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. Java 日期和时间 API:实用技巧与示例 - 轻松处理日期和时间

    Java 用户输入(Scanner) 简介 Scanner 类用于获取用户输入,它位于 java.util 包中. 使用 Scanner 类 要使用 Scanner 类,请执行以下步骤: 导入 jav ...

  2. Seaborn分布数据可视化---直方图/密度图

    直方图\密度图 直方图和密度图一般用于分布数据的可视化. distplot 用于绘制单变量的分布图,包括直方图和密度图. sns.distplot( a, bins=None, hist=True, ...

  3. Stable diffusion 初学者指南

    1. Stable diffusion 初学者指南 想掌握Stable Diffusion AI技术吗? 这份初学者指南专为完全没接触过Stable Diffusion或任何AI图像生成器的新手设计. ...

  4. BI 和报表有什么区别

    BI 从早期提出的概念上来划分可以分为数据仓库.ETL.olap 和报表这几部分可以看到报表只是 BI 中的一个组成部分,只不过数据在 web 端展示时通常是通过报表形式,所以经常会把报表当做是 BI ...

  5. mysql 必知必会整理—sql 正则表达[五]

    前言 简单整理一下sql 正则表达式. 正文 正则表达式是用来匹配文本的特殊的串(字符集合).如果你想从一个文本文件中提取电话号码,可以使用正则表达式.如果你需要查找名字中间有数字的所有文件,可以使用 ...

  6. c# webapi 自定义返回数据

    前言 webapi呢,我们创建的时候我给我们5个方法:get get(data)put post delete. 很明显,get,get(data)是用来获取,post用来修改数据的,put,dele ...

  7. xilinx下载器,JTAG-HS3和Platform Cable USB II 速度对比

    下面测试速度,以一个V7的配置文件为例子.文件大小如下,27MB.特别是对于有点规模的项目配置文件都是很大的.总不能是点灯项目. 选择普通的下载器,Platform Cable USB.这种下载器是基 ...

  8. Vue 项目 invalid host header 问题 配置 disableHostCheck:true报错

    项目场景:解决 Vue 项目 invalid host header 问题disableHostCheck:true报错 问题描述使用内网穿透时出现 invalid host header找了好多都是 ...

  9. [Trading] 股票日内交易者能赚多少钱 - 看到日内交易的潜力并学习如何实现它

    无论是为了生活方式.寻求刺激还是为了挑战,股票市场短线交易者能赚多少钱的问题不可避免地出现了. 股票日内交易者的交易量变化很大,一些当日交易者损失了他们的资金,而另一些人利用他们的资金创造了一个高的月 ...

  10. ASP.NET CORE 发布时不编译Views文件夹

    .net core 3.0正式版已经发布,目前整体相对来说已经稳定了,可以进行生产开发. 发布时默认情况下Views是直接编译成DLL文件(XXXXXX.Views.dll),日常开发维护过程中,经常 ...