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. OpenHarmony组件复用示例

      本文转载自<#2023盲盒+码# OpenHarmony组件复用示例>,作者zhushangyuan_ ● 摘要:在开发应用时,有些场景下的自定义组件具有相同的组件布局结构,仅有状态变 ...

  2. Linux忘记root密码修改方法

    1. 再开机启动的时候按键盘上的"e"键会出现如下界面.再次按"e"键进行选择相应的内核. 2. 选择相应的内核,再次按"e". 3.经过第 ...

  3. 6本值得推荐的MySQL学习书籍(有赠书福利)

    前言 在DotNetGuide技术社区交流群和微信公众号后台经常收到小伙伴们的留言,让我出一期MySQL相关学习书籍的推荐文章.因此,今天我特意为大家精选了 6 本值得推荐的 MySQL 学习书籍,希 ...

  4. 携手HMS Core统一扫码服务, 兴业证券优理宝App提升用户扫码体验

    兴业证券优理宝App联合华为HMS Core,集成HMS Core统一扫码服务,在提升扫码成功率的同时,还支持C端用户用手机端APP扫描手表端二维码,实现行情在手机与手表间跨终端流转,行情信息,抬腕可 ...

  5. c# apollo订阅与发布(一)(迁)

    前言 apollo 翻译过来是阿波罗的意思,准确的说是:apache apollo,看了apache基本可以放心,因为它不像微软. 安装 下面我以windows 为例. https://activem ...

  6. Django3.0连接数据库注意点

    需先在应用下的__Init__.py文件中配置 import pymysqlpymysql.version_info=(1, 3, 13, 'final', 0) # 3.0时需要pymysql.in ...

  7. 怀里橘猫柴犬,掌上代码江湖——对话阿里云 MVP郭旭东

    简介: 跟郭旭东聊过之后,我对程序员的敬佩又多一分.这个92年的开发者,难能可贵地兼备朝气蓬勃的技术能量与长远深刻的行业洞见.独自承担DevOps平台从0到1的所有工作,我打趣说超级开发者不过如此,他 ...

  8. 技术干货 | mPaaS 小程序高玩带你起飞:客户端预置小程序无视网络质量

    简介: 弱网拉包无障碍,深度提升用户体验 传统的小程序技术容易受到网络环境影响,当网络质量不佳时可能导致拉取不到小程序包的情况.通过预置小程序,即可规避该问题.本文介绍了预置小程序的原理和预置小程序的 ...

  9. 来电科技:基于 Flink + Hologres 的实时数仓演进之路

    简介: 本文将会讲述共享充电宝开创企业来电科技如何基于 Flink + Hologres 构建统一数据服务加速的实时数仓 作者:陈健新,来电科技数据仓库开发工程师,目前专注于负责来电科技大数据平台离线 ...

  10. GRPC: 如何实现分布式日志跟踪?

    ​简介: 本文将介绍如何在 gRPC 分布式场景中,实现 API 的日志跟踪. 介绍 本文将介绍如何在 gRPC 分布式场景中,实现 API 的日志追踪. 什么是 API 日志追踪? 一个 API 请 ...