mr88fang 发表于 2024-2-23 16:41

Javascript/DOM:如何删除 DOM 对象的所有事件侦听器

# Javascript/DOM:如何删除 DOM 对象的所有事件侦听器

## 一、重写

重写 `EventTarget` 添加监听事件方法 `addEventListener`

```javascript
if (EventTarget.prototype.original_addEventListener == null) {
    EventTarget.prototype.original_addEventListener = EventTarget.prototype.addEventListener;
    function addEventListener_hook(typ, fn, opt) {
      console.log('--- add event listener',this.nodeName,typ);
      this.all_handlers = this.all_handlers || [];
      this.all_handlers.push({typ,fn,opt});
      this.original_addEventListener(typ, fn, opt);
    }
    EventTarget.prototype.addEventListener = addEventListener_hook;
}
```

## 二、代码注入

您应该将此代码插入到主网页顶部附近(例如`index.html`)。在清理期间,您可以循环遍历 `all_handlers`,并为每个处理程序调用`removeEventHandler`。不必担心使用同一函数多次调用 `removeEventHandler`

```js
function cleanup(elem) {
    for (let t in elem) if (t.startsWith('on') && elem != null) {
      elem = null;
      console.log('cleanup removed listener from '+elem.nodeName,t);
    }
    for (let t of elem.all_handlers || []) {
      elem.removeEventListener(t.typ, t.fn, t.opt);
      console.log('cleanup removed listener from '+elem.nodeName,t.typ);
    }
}
```

**注意:**对于 IE,请使用 Element 而不是 EventTarget,并将 => 更改为 function 以及其他各种内容。

## 三、实战

**举一反三**,该操作可移除监听复制事件,`Ctrl+C `等等事件。删除原有事件,你可以复用现有功能按钮添加自定义事件处理。

<img src="https://cdn.dtking.cn/script/b1.png" style="zoom:50%;" />

<img src="https://cdn.dtking.cn/script/b3.png" style="zoom:50%;" />

<img src="https://cdn.dtking.cn/script/b4.png" style="zoom:50%;" />

[原文地址](https://stackoverflow.com/questions/4386300/javascript-dom-how-to-remove-all-event-listeners-of-a-dom-object)

Pwaerm 发表于 2024-2-23 17:27

好文章,学习了。{:301_997:}

inkcolor233 发表于 2024-2-23 18:24

那限制复制可以类似原理自己做油猴插件

bwuaich 发表于 2024-2-23 19:03

了解; 学习; 温习一下; 谢谢分享

moruye 发表于 2024-2-23 21:14

页: [1]
查看完整版本: Javascript/DOM:如何删除 DOM 对象的所有事件侦听器