我最近正在处理事件，并想查看/控制页面中的所有事件。研究了可能的解决方案之后，我决定按照自己的方式创建一个自定义系统来监视事件。所以，我做了三件事。
首先，我需要一个用于页面中所有事件侦听器的容器：这是EventListeners对象。它有三个有用的方法：add()，remove()，和get()。
接着，我创建一个EventListener对象来保存事件的必要信息，即：target，type，callback，options，useCapture，wantsUntrusted，和添加的方法remove()，以除去该侦听器。
最后，我扩展了native addEventListener()和removeEventListener()方法，使它们可以与我创建的对象（EventListener和EventListeners）一起使用。
用法：
var bodyClickEvent = document.body.addEventListener("click", function () {
console.log("body click");
});
// bodyClickEvent.remove();
addEventListener()创建一个EventListener对象，将其添加到EventListeners该EventListener对象并返回该对象，以便以后可以将其删除。
EventListeners.get()可用于查看页面中的侦听器。它接受一个EventTarget或字符串（事件类型）。
// EventListeners.get(document.body);
// EventListeners.get("click");
演示版
假设我们想知道当前页面中的每个事件侦听器。我们可以做到这一点（假设您使用的是脚本管理器扩展，在这种情况下为Tampermonkey）。下面的脚本执行此操作：
// ==UserScript==
// @name New Userscript
// @namespace http://tampermonkey.net/
// @version 0.1
// @description try to take over the world!
// @author You
// @include https://stackoverflow.com/*
// @grant none
// ==/UserScript==
(function() {
fetch("https://raw.githubusercontent.com/akinuri/js-lib/master/EventListener.js")
.then(function (response) {
return response.text();
})
.then(function (text) {
eval(text);
window.EventListeners = EventListeners;
});
})(window);
当我们列出所有侦听器时，它说有299个事件侦听器。“似乎”有一些重复项，但我不知道它们是否真的是重复项。并非每个事件类型都重复，因此所有这些“重复”可能都是一个单独的侦听器。
可以在我的存储库中找到代码。我不想在这里发布它，因为它很长。
更新：这似乎不适用于jQuery。当我检查EventListener时，我看到回调是
function(b){return"undefined"!=typeof r&&r.event.triggered!==b.type?r.event.dispatch.apply(a,arguments):void 0}
我相信这属于jQuery，而不是实际的回调。jQuery将实际的回调存储在EventTarget的属性中：
$(document.body).click(function () {
console.log("jquery click");
});
若要删除事件侦听器，需要将实际的回调传递给该removeEventListener()方法。因此，为了使它与jQuery一起使用，需要进行进一步的修改。我将来可能会解决。
