javascript - 使用 dispatchEvent 触发所有浏览器事件

Question

我正在考虑构建一个工具，将所有浏览器事件(本地 dom 事件，如 .click() 或 jQuery 事件)转换为标准形式。

标准形式是:HTMLElement.dispatchEvent(new Event(eventType, eventInitDict))

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

我的问题:

1. 是否存在从事件到此标准形式的完整映射，如果那么，它有任何记录吗？
2. 是否有任何可以触发但无法转换的事件到这个标准表格？
3. jQuery 会做一些我做不到的事情吗？转换。

我必须将所有事件完全转换成这种格式......一个都不能幸免!

谢谢!

---

我为什么要这样做？

我正在 try catch Chrome 扩展程序触发的所有事件。为此，我决定在将扩展内容脚本注入(inject)页面之前修改它(我不关心背景页面或弹出页面)，因此触发的所有事件都被“标记”为源自扩展(这将被添加到上面示例中的 eventInitDict。我正在修改 Chromium 来执行此操作。

---

附言。我想不出更好的问题标题，但如果您有，请告诉我/更改它。

Answer 1

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

要捕获的事件很多，这很费力。我知道，因为我必须在我目前正在进行的项目中执行此操作。

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

现在幸运的是，无论触发事件的原因如何，都可以捕获事件。在底层，JQuery 最有可能触发 DOM 事件，但由于我没有查看 JQuery 源代码，所以我不能肯定地说。

添加事件监听器时，您需要为 addEventListener 函数上的 useCapture 传递一个设置为 true 的 bool 值。

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);

有一个警告，对于捕获的每个事件，您需要捕获可能特定于该事件类型的事件属性，并将其保存在存储事件属性(如事件名称、选择器等)的自定义对象中.

新事件的“标准”形式是不够的。有些事件有不同的初始化字典，如果属性不是事件的标准，它们将被普通事件忽略，这就是为什么你应该实例化正确的对象类型，例如新的鼠标事件，新的键盘事件。等等

您可以使用新的 CustomEvent 来捕获不向事件的详细信息属性添加标准属性的合成事件，但这对于常规 DOM 事件来说是不够的。

无论以何种标准衡量，这都不是一项小任务。