首页 > 编程语言 >Javascript/DOM:如何删除 DOM 对象的所有事件侦听器

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

时间:2024-02-23 16:59:27浏览次数:39  
标签:DOM Javascript elem EventTarget 侦听器 addEventListener typ handlers

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 等等事件。删除原有事件,你可以复用现有功能按钮添加自定义事件处理。

原文地址

标签:DOM,Javascript,elem,EventTarget,侦听器,addEventListener,typ,handlers
From: https://www.cnblogs.com/bxmm/p/18029900

相关文章

  • Java事件侦听器学习记录
    前言我们监听事件之前要有事件源source,创建事件源(Event),发布事件(publishEvent),然后才能到监听事件。事件驱动机制是观察者模式(称发布订阅)具体实现,事件对象(Event)相当于被观察对象(Subject),事件监听(EventListener)相当于观察者(Observer)1、包结构(个人): 2、创建事件源(Event)......
  • python调用Javascript实践
    一、背景知识1、Node.jsjavacript的运行环境有两个:浏览器、node.jsNode.js是一个开源与跨平台的JavaScript运行时环境。它是一个可用于几乎任何项目的流行工具!Node.js在浏览器外运行V8JavaScript引擎(GoogleChrome的内核)。这使Node.js表现得非常出色。运行js的命......
  • SciTech-Mathmatics-FourierSeries: Time Domain and Frequency Domain
    TimeDomainandFrequencyDomainFrequencydomain:measuredbySpectrumAnalysiszerTellsushowproperties(amplitudes)changeoverfrequencies:TimeDomain:measuredbyOscilloscopeTellsushowproperties(suchasAmplitude(Power),Phase,andsoon)......
  • vue3 ref 获取单个Dom及多个Dom
    获取单个Dom<inputtype="text"ref="inputRef"/>setup(){constinputRef=ref(null)onMounted(()=>{console.log(inputRef.value);})}获取多个Dom<divv-for="(item,index)instate.list":key=&quo......
  • JavaScript
    JavaScriptJavaScript(简称JS)是一种用于网页交互的脚本语言,通常用于在网页上添加动态功能、交互性和响应式设计。它是一种基于对象和事件驱动的脚本语言,由Netscape公司(现在属于Mozilla公司)在1995年首次引入,最初被设计为在客户端执行。(1)varlet变量关键字varvarname......
  • 引入JavaScript自定义提示信息(账户密码不为空,必须勾选用户协议)
     当不输入用户或密码就登录时不勾选用户协议就登录时form表单的修改,引入了onsubmit控件,提交表单时,调用validateForm函数<formaction="/home"method="post"onsubmit="returnvalidateForm()">validateForm函数内容functionvalidateForm(){//验证用户名和密......
  • [ARC104E] Random LIS
    题意:数列每个数是在\([1,a_i]\)上均匀随机分布的整数,求其最长上升子序列长度的期望,\(n\le6\)。发现\(n\)很小,考虑\(O(n^n)\)枚举所有数的偏序关系,然后设\(h_i=\min_{rk_j=i}a_j\),\(m=\max_{i=1}^nrk_i\),这样问题就能转化为数列每个数是\([1_i,h_i]\)上均匀随机分布......
  • 05-JavaScript基础语法
     <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>JS-基础语法</title></head><body></body><script>//输出语句//1.alert()弹出警告框aler......
  • JavaScript 的新数组分组方法
    对数组中的项目进行分组,你可能已经做过很多次了。每次都会手动编写一个分组函数,或者使用lodash的groupBy函数。好消息是,JavaScript现在有了分组方法,所以你再也不必这样做了。Object.groupBy和Map.groupBy这两个新方法将使分组变得更简单,并节省我们的时间或依赖性。以前......
  • 04-JavaScript介绍
      注意:JS是脚本语言,不需要经过编译,直接经过浏览器的解释就可以运行了。而Java语言需要先编译成class文件,再通过虚拟机进行运行。  <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>JS-引入方式</title></head><body>......