按需监听事件处理程序，并对重复添加进行预警，并统计你关心事件处理程序。
完成思路，请参考：
EventTarget系列demo截图：
events系列demo截图：
- EventTarget
- DOM节点 + windwow + document 其继承于 EventTarget
- XMLHttpRequest 其继承于 EventTarget
- 原生的WebSocket 其继承于 EventTarget
- nodejs 标准的 events
- MQTT 基于 events库
socket.io基于 events库socket.io-client基于component-emitter库
<script src="http://127.0.0.1:8080/dist/evm.js?t=5"></script>
<script>
const evm = new EVM.ETargetEVM({
isInWhiteList(target, event, listener, options) {
if (target === window && event !== "error") {
return true;
}
return false;
// return true;
}
});
evm.watch();
// 周期性监听
setInterval(async function () {
console.log("-------");
// statistics getExtremelyItems
const data = await evm.getExtremelyItems();
console.log("evm:", data);
}, 3000)
// window.__evm__ = evm;
// window.__evm__.getExtremelyItems().then(data=> console.log("evm::", data));
// window.__evm__.statistics().then(data=> console.log("evm::", data));
</script>import { EventEmitter } from "events";
; (function evmCheck() {
const win = window as any;
const evm = win.__evm__ = new win.EVM.EventsEVM(undefined, EventEmitter);
evm.watch();
setTimeout(async function () {
// console.log("-------");
// statistics getExtremelyItems
const data = await evm.getExtremelyItems();
console.log("evm:", data);
}, 5000)
// window.__evm__.getExtremelyItems().then(data=> console.log("evm::", data));
// window.__evm__.statistics().then(data=> console.log("evm::", data));
})();- DOM事件来源
- DOM的基本操作
- 事件中心
- 方法拦截 可参见7中方法拦截手段
- ES6 Map
- ES6 class 私有变量
- ES6 模块JS & mjs
- ES6 Proxy
- ES WeakRef
- ES FinalizationRegistry
其他
- 属性键的最大长度？
- 查找数组中相同的项目
- 插件？
- getEventListeners https://github.com/colxi/getEventListeners 其只是直接修改了原型方法，结果可行，不推荐这么玩。
缺点
- 入侵了每个节点，节点上保留了事件信息
- 单次只能获取一个元素的监听事
- chrome 控制台 getEventListeners获得单个Node的事件 缺点
- 只能在控制台使用
- 单次只能获取一个元素的监听事件
- chrome控制台， Elements => Event Listeners
- 只能在开发者工具界面使用
- 查找相对麻烦
- chrome more tools => Performance monitor 可以得到 JS event listeners, 也就是事件总数
并未有详细的信息，只有一个统计数据
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent