Question

我正在考虑构建一个工具，将所有浏览器事件（如.click()或jQuery事件等本机dom事件）转换为标准表单。

标准格式为：HTMLElement.dispatchEvent(new Event(eventType, eventInitDict))

例如，我想将所有事件的HTMLElement.click()更改为HTMLElement.dispatchEvent(new Event("click", {"bubbles": true, ...}))。

我的问题：

是否存在从事件到此标准表单的完整映射以及是否那么，它是否记录在任何地方？
是否有任何无法转换的事件被触发这个标准形式？
jQuery是否会做任何我无法做到的事情转换。

我必须将所有事件完全转换为这种格式......没有人可以幸免！

谢谢！

为什么我要尝试这样做？

我正在尝试捕获Chrome扩展程序触发的所有事件。为此，我决定在将扩展内容脚本注入页面之前修改它（我不关心后台页面或弹出页面），因此触发的所有事件都被“标记”为源自扩展（这将可以添加到上面示例中的eventInitDict。我正在修改Chromium来执行此操作。

PS。我想不出一个更好的问题标题，但如果你有一个，请告诉我/改变它。

Answer 1

捕获所有事件，您需要为每个事件向DOM添加事件侦听器。

要捕获很多事件，这很费力。我知道，因为我必须在我正在进行的项目中这样做。

通常在SO回答中，建议将所有相关文本放入答案中，在这种情况下，由于可用事件的数量，我不打算这样做。您可以找到DOM事件的详细列表here (MDN)

幸运的是，无论是什么触发它们，都可以捕获事件。在下面，JQuery很可能触发DOM事件，虽然我没有看过JQuery源代码，但我无法肯定地说。

添加事件侦听器时，您需要在addEventListener函数上为useCapture传递布尔值设置为true。

target.addEventListener(type, listener, useCapture);

有关addEventListener here

的更多文档

您可能希望声明要捕获的JSON事件数组或代码中的静态数组，以便维护要捕获的事件列表。

此外，对于触发事件，您需要存储对其定位的元素的引用。我也必须这样做。您将希望找到一种方法来获取触发事件的任何元素的选择器。

类似于以下内容

var eventList = ['click', 'keydown'];
for(var i = 0;i < eventList.length; i++) {
    var eventName = eventList[i];
    document.addEventListener(eventName, function (evt) {
        var selector = getElementSelector(evt.target); // where getElementSelector will be a function that returns an id, css path or xpath selector.
        var captured = { eventName: eventName, selector: selector };
    });
}

要触发捕获的事件，您可以执行以下操作，假设您使用上面的对象结构

var eventObject = { eventName: 'click', selector: '#targetId'};
var target = document.querySelector(eventObject.selector);
var event = new Event(eventName, {
    view: window,
    bubbles: true,
    cancelable: true
});
target.dispatchEvent(event);

有一个警告，对于捕获的每个事件，您将要捕获可能特定于该事件类型的事件的属性，并将其保存在存储事件属性（如eventName，selector等）的自定义对象中

新活动的“标准”形式不会就足够了。某些事件具有不同的初始化字典，如果属性不是事件的标准，则忽略忽略这就是您的原因应该实例化正确的对象类型，例如新的MouseEvent，新的KeyboardEvent。等

您可以使用新的CustomEvent来捕获合成事件，这些事件不会将任何标准属性添加到事件的detail属性中，但这对于常规DOM事件来说是不够的。

无论如何，这都不是一项小任务。

使用dispatchEvent

1 个答案: