Javascript/DOM:如何删除 DOM 对象的所有事件侦听器
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 对象的所有事件侦听器的更多相关文章
- JavaScript DOM高级程序设计 4.3控制事件流和注册事件侦听器--我要坚持到底!
一.事件流 我们通过下面一个实例,进行说明. <body> <h1>Event Flow</h1> <ul id="nav"> &l ...
- javascript中事件总结&通用的事件侦听器函数封装&事件委托
前言: JAVASCRIPT与HTML之间的交互是通过事件来实现的.事件,就是文档或浏览器窗口中发生的一些特定交互瞬间.可以使用侦听器( 或处理程序 )来预定事件,以便事件发生时执行相应的代码.这种在 ...
- 【JavaScript代码实现二】通用的事件侦听器函数
// event(事件)工具集,来源:github.com/markyun markyun.Event = { // 页面加载完成后 readyEvent : function(fn) { if (f ...
- JavaScript addEventListener()事件监听方法
addEventListener()方法将事件处理程序附加到指定的元素. addEventListener()方法将事件处理程序附加到元素,而不覆盖现有的事件处理程序. 您可以向一个元素添加许多事件处 ...
- python 全栈开发,Day55(jQuery的位置信息,JS的事件流的概念(重点),事件对象,jQuery的事件绑定和解绑,事件委托(事件代理))
一.jQuery的位置信息 jQuery的位置信息跟JS的client系列.offset系列.scroll系列封装好的一些简便api. 一.宽度和高度 获取宽度 .width() 描述:为匹配的元素集 ...
- javascript中0级DOM和2级DOM事件模型浅析
Javascript程序使用的是事件驱动的设计模式,为一个元素添加事件监听函数,当这个元素的相应事件被触发那么其添加的事件监听函数就被调用: <input type="button&q ...
- javascript中0级DOM和2级DOM事件模型浅析 分类: C1_HTML/JS/JQUERY 2014-08-06 15:22 253人阅读 评论(0) 收藏
Javascript程序使用的是事件驱动的设计模式,为一个元素添加事件监听函数,当这个元素的相应事件被触发那么其添加的事件监听函数就被调用: <input type="button&q ...
- Javascript高级编程学习笔记(57)—— 事件(1)事件流
事件 JS与HTML的交互是通过事件实现的 而事件指的就是:文档或浏览器窗口特定的交互瞬间 可以通过侦听器来预定事件,以便在事件发生时执行相应的代码 这种模式也是设计模式中的观察者模式 事件流 有了事 ...
- JavaScript事件监听以及addEventListener参数分析
事件监听 在Javascript中事件的监听是用来对某些操作做出反应的方法.例如监听一个按钮的pressdown, 或者获取鼠标左键按下时候鼠标的位置.这些都需要使用监听来完成.监听的函数很简单:ad ...
- JavaScript DOM编程基础精华01(DOM入门,DOM模型和获取页面元素,事件,window对象的方法)
DOM入门 DOM就是Html页面的模型,将每个标签都做为一个对象,JavaScript通过调用DOM中的属性.方法就可以对网页中的文本框.层等元素进行编程控制.比如通过操作文本框的DOM对象,就可以 ...
随机推荐
- OpenHarmony自定义组件介绍
一.创建自定义组件 在ArkUI中,UI显示的内容均为组件,由框架直接提供的称为系统组件,由开发者定义的称为自定义组件.在进行 UI 界面开发时,通常不是简单的将系统组件进行组合使用,而是需要考虑 ...
- Chrome浏览器前端开发调试时强制更新js、css静态资源文件缓存的方法
以Chrome浏览器为例,国产浏览器未做全面测试.前端开发静态文件时,浏览器访问会缓存样式.图片.js等,怎么快速更新缓存. 以下方法特别适合只想清除某个网页的缓存,而不想清除全部浏览器缓存可以采用以 ...
- CentOS 利用pam控制ssh用户的登录及SSH安全配置
CentOS 利用pam控制ssh用户的登录 有关pam的使用,请找相关的文档.下面只说两个简单的例子. 首先在/etc/pam.d/sshd加入一句: account required ...
- 重新整理asp.net core 实操篇——简介
前言 实操篇和底层刨析分开的,<重新整理.net core 计1400篇>是探索底层概念. 介绍asp.net core之前先介绍.net core. .NET Core 是一个通用的开放 ...
- k8s集群部署1.28.2版本(无坑)
Kubernetes-1.28.2 集群介绍及搭建 一.Kubernetes 概述 1.什么是Kubernetes? K8S 的全称为 Kubernetes.用于自动部署.扩展和管理"容器化 ...
- 力扣633(java&python)-平方数之和(中等)
题目: 给定一个非负整数 c ,你要判断是否存在两个整数 a 和 b,使得 a2 + b2 = c . 示例 1: 输入:c = 5输出:true解释:1 * 1 + 2 * 2 = 5示例 2: 输 ...
- 系列解读SMC-R:透明无感提升云上 TCP 应用网络性能(一)| 龙蜥技术
简介:已有的应用若想使用RDMA技术改造成本高,那么有没有一种技术是不做任何改造就可以享受RDMA带来的性能优势? 文/龙蜥社区高性能网络SIG 引言 Shared Memory Communi ...
- 好云推荐官丨飞天加速之星怎样选择云服务器ECS?
编者按:本文来自"好云推荐官"活动的技术博主投稿,作者(昵称天狼)曾入选首届"飞天加速之星",获得飞天人气奖. 你是否还在苦苦地寻找一家合适的云厂商,寻找合 ...
- Fluid给数据弹性一双隐形的翅膀 (1) -- 自定义弹性伸缩
简介: 弹性伸缩作为Kubernetes的核心能力之一,但它一直是围绕这无状态的应用负载展开.而Fluid提供了分布式缓存的弹性伸缩能力,可以灵活扩充和收缩数据缓存. 它基于Runtime提供了缓存空 ...
- Snowflake核心技术解读系列——架构设计
简介:Snowflake取得了巨大的商业成功,技术是如何支撑起它的千亿美元市值呢?它技术强在哪?本文为大家倾情解读Snowflake的核心技术原理. 背景:2020年9月16日,Snowflake成 ...