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

Question

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

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

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

我的问题：

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

当务之急是我把所有的事件全部转成这个格式...None可以省下来！

谢谢！

我为什么要这样做？

我正在尝试捕获 Chrome 扩展程序触发的所有事件。为此，我决定在将扩展内容脚本注入页面之前修改它（我不关心背景页面或弹出页面），因此触发的所有事件都是 "tagged" 来自扩展（这将添加到上面示例中的 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、选择器和之类的

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

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

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

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

Trigger all browser events using dispatchEvent

javascript

jquery

events

dom-events

jquery-events