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

一、重写

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

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

function cleanup(elem) {
for (let t in elem) if (t.startsWith('on') && elem[t] != null) {
elem[t] = 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 等等事件。删除原有事件,你可以复用现有功能按钮添加自定义事件处理。



原文地址

Javascript/DOM:如何删除 DOM 对象的所有事件侦听器的更多相关文章

  1. JavaScript DOM高级程序设计 4.3控制事件流和注册事件侦听器--我要坚持到底!

    一.事件流 我们通过下面一个实例,进行说明. <body> <h1>Event Flow</h1> <ul id="nav"> &l ...

  2. javascript中事件总结&通用的事件侦听器函数封装&事件委托

    前言: JAVASCRIPT与HTML之间的交互是通过事件来实现的.事件,就是文档或浏览器窗口中发生的一些特定交互瞬间.可以使用侦听器( 或处理程序 )来预定事件,以便事件发生时执行相应的代码.这种在 ...

  3. 【JavaScript代码实现二】通用的事件侦听器函数

    // event(事件)工具集,来源:github.com/markyun markyun.Event = { // 页面加载完成后 readyEvent : function(fn) { if (f ...

  4. JavaScript addEventListener()事件监听方法

    addEventListener()方法将事件处理程序附加到指定的元素. addEventListener()方法将事件处理程序附加到元素,而不覆盖现有的事件处理程序. 您可以向一个元素添加许多事件处 ...

  5. python 全栈开发,Day55(jQuery的位置信息,JS的事件流的概念(重点),事件对象,jQuery的事件绑定和解绑,事件委托(事件代理))

    一.jQuery的位置信息 jQuery的位置信息跟JS的client系列.offset系列.scroll系列封装好的一些简便api. 一.宽度和高度 获取宽度 .width() 描述:为匹配的元素集 ...

  6. javascript中0级DOM和2级DOM事件模型浅析

    Javascript程序使用的是事件驱动的设计模式,为一个元素添加事件监听函数,当这个元素的相应事件被触发那么其添加的事件监听函数就被调用: <input type="button&q ...

  7. javascript中0级DOM和2级DOM事件模型浅析 分类: C1_HTML/JS/JQUERY 2014-08-06 15:22 253人阅读 评论(0) 收藏

    Javascript程序使用的是事件驱动的设计模式,为一个元素添加事件监听函数,当这个元素的相应事件被触发那么其添加的事件监听函数就被调用: <input type="button&q ...

  8. Javascript高级编程学习笔记(57)—— 事件(1)事件流

    事件 JS与HTML的交互是通过事件实现的 而事件指的就是:文档或浏览器窗口特定的交互瞬间 可以通过侦听器来预定事件,以便在事件发生时执行相应的代码 这种模式也是设计模式中的观察者模式 事件流 有了事 ...

  9. JavaScript事件监听以及addEventListener参数分析

    事件监听 在Javascript中事件的监听是用来对某些操作做出反应的方法.例如监听一个按钮的pressdown, 或者获取鼠标左键按下时候鼠标的位置.这些都需要使用监听来完成.监听的函数很简单:ad ...

  10. JavaScript DOM编程基础精华01(DOM入门,DOM模型和获取页面元素,事件,window对象的方法)

    DOM入门 DOM就是Html页面的模型,将每个标签都做为一个对象,JavaScript通过调用DOM中的属性.方法就可以对网页中的文本框.层等元素进行编程控制.比如通过操作文本框的DOM对象,就可以 ...

随机推荐

  1. 如何获取华为运动健康服务授权码并调用Rest API访问数据?

    华为运动健康服务(HUAWEI Health Kit)允许三方生态应用在获取用户授权后,通过REST API接口访问数据库,读取华为和生态伙伴开放的运动健康数据或写入数据到华为运动健康服务,为用户提供 ...

  2. Win7 局域网服务器 - FTP 服务器搭建指南

    1. 打开 "开始" 菜单,找到控制面板 2. 选择 "程序" 3. 选择 "打开或关闭 Windows 功能" 4. 选择 "I ...

  3. css 文字溢出省略号

    前言 css 文字溢出后显示省略号,这是一个非常常规的操作,但是你会发现在网上很多给出的例子两行之后显示省略号,却没有用. 这是为什么呢?please look follow. 正文 在一行省略的: ...

  4. java知识点查漏补缺-- 2020513

    重载和重写 方法重载(overload): 必须是同一个类 方法名(也可以叫函数)一样 参数类型不一样或参数数量不一样 方法的重写(override)两同两小一大原则: 方法名相同,参数类型相同 子类 ...

  5. navicat连接mysql8报错

    mysql8采用更安全的加密方式,navicat不支持,网上大多办法都是采用的更改数据库加密方式为外部加密 个人觉得这样它不太合适 so,终于找到一个办法: 把mysql8安装后的lib文件夹里的 l ...

  6. 阿里云日志服务SLS携手观测云发布可观测性解决方案,共建可观测应用创新

    简介: 2022年云栖大会期间,阿里云同观测云共同发布可观测性联合解决方案.观测云通过集成日志服务SLS的产品能力,发布了观测云SAAS专属版. 2022年云栖大会期间,阿里云同观测云共同发布可观测性 ...

  7. MSE 治理中心重磅升级-流量治理、数据库治理、同 AZ 优先

    简介: 本次 MSE 治理中心在限流降级.数据库治理及同 AZ 优先方面进行了重磅升级,对微服务治理的弹性.依赖中间件的稳定性及流量调度的性能进行全面增强,致力于打造云原生时代的微服务治理平台. 作者 ...

  8. [GPT] golang 有那么多系统包 该如何了解和学习

    在学习和了解Golang(Go语言)的系统包时,可以遵循以下步骤来逐步熟悉并掌握它们: 1. 官方文档阅读: 首先从官方文档入手,Go的标准库文档非常详尽且易于理解.你可以访问 Go标准库 来查看各个 ...

  9. [Go] 选择 Beego 的三个理由

    1. 项目支持角度较其它框架考虑的多一些,比如:目录结构的简单约定,内置项目配置读取,内置bee脚手架,热重载特性 等. (实际这些 feature 都可以找到 golang 专精的组件引入起来,效果 ...

  10. RT-Thead移植时缺少SystemCoreClockUpdate函数

    一.问题 在移植 RT-Thead 时,需要获取mcu当前的 HCLK 时钟频率来设置滴答时钟,而我使用的库函数中刚好缺少SystemCoreClockUpdate函数. 我之前在RT-Thread移 ...