前端查看节点已绑定的 addEventListener监听事件

最新推荐文章于 2025-03-31 18:16:40 发布
最新推荐文章于 2025-03-31 18:16:40 发布
阅读量7.6k 收藏 5
点赞数 2
分类专栏： 前端 文章标签： html chrome devtools js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41064597/article/details/118159024
版权
本文介绍了如何使用ChromeDevTools的API和EventListenersInspector面板来检查和管理DOM元素上的事件监听器。通过调用getEventListeners() API，可以查看节点绑定的监听事件，帮助开发者确保代码的整洁和性能优化。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

项目中一个节点绑定了多个监听事件 addEventListener ，由于害怕监听事件没有很好的去除，强迫症觉得万一浪费了内存多不好，想查看一下节点绑定了什么监听事件，无奈JS没有很好的方法去发现，Chrome DevTools命令行API提供了多种方式来观察和检查事件监听器

  • 使用monitorEvents()监听某一类型的事件。
  • 使用unmonitorEvents()停止监听。
  • 使用getEventListeners()获取DOM元素的监听器。
  • 使用Event Listeners Inspector(事件监听检查器)面板获取有关事件监听器的信息。

本文使用第三条就能查看了，其他API可以在最后🔗链接 查看用法，下面开始操作：
  1. F12 打开调试器 获取节点
  2. 调用API getEventListeners()

下面以百度为例，获取搜索输入框的监听事件

可以看到各种监听事件以数组的形式作为保存




进入官方的文档查看👉 详细API

浏览器查找js绑定或者监听的事件
cf
03-15 2424
1.打开浏览器审核模式 2.选择源代码 3.最右边有个事件监听断点 4.以触摸模式为例，如果代码中有监听触屏事件，移动的时候就会触发相关js代码，并找到位置
JavaScript 事件监听addEventListener
uuind的博客
03-15 748
JavaScript事件监听器 addEventListener()的工作原理是将实现EventListener的函数添加到调用它的EventTarget上的指定事件类型的事件侦听器列表中。 1、事件监听 addEventListener() 语法：ele.addEventListener(event_type , function ,布尔值(是否启用事件捕获去触发事件))  &nb...
JavaScript 教程「10」：DOM 事件
村雨遥
04-25 820
JavaScript 教程第 10 篇
JavaScript事件监听
最新发布
2301_82023822的博客
03-31 1170
，并将其作为参数传递给事件处理函数。该对象包含与事件相关的所有信息，例如触发事件的元素、事件类型、坐标位置、按键信息等。若回调函数引用外部变量或 DOM 元素，可能导致内存泄漏（需及时移除监听）。如果将函数 A 做为参数传递给函数 B 时，我们称函数 A 为回调函数。（可选）：配置对象或布尔值，控制捕获/冒泡阶段、一次性执行等。：用户或浏览器触发的动作，如点击、滚动、键盘输入等。：触发事件的元素（如点击的具体子元素）。事件触发后，相对应的回调函数会被执行。：阻止事件继续传播（冒泡或捕获）。
DOM学习---获取节点绑定事件
四岁爱上了她的博客
08-23 1372
这里写自定义目录标题DOM1.1 什么是DOM1.2 DOM树1.3获取元素1.3.1 根据ID获取1.3.2 根据标签名获取元素1.3.3 H5新增获取元素的方式合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 DOM 1.1 什么是DOM
js查看页面上所有的addEventListener
qq_42612951的博客
10-31 1526
js查看页面上所有的addEventListener
jQuery查看dom元素上绑定的事件列表
weixin_30514745的博客
04-23 846
作为技术狂热分子的职业本能，看到一个技术产品的功能，总会忍不住想知道它是怎么被实现的。比如我每每看到别人网站一个很炫的界面或者很酷的功能，就忍不住打开了浏览器的控制台。。。 好，不扯远，说说当你想看到网站上某个元素绑定的事件函数的代码时应该怎么做吧。 查看原生绑定的事件函数代码 所谓原生就是通过addEventListener方法绑定到dom元素上。这个好办： 审查绑定事件的元素...
javascript 中的监听事件
weixin_46174785的博客
09-13 615
js 实现事件监听 1、行内绑定 行内绑定：在ＨＴＭＬ　的标签中通过onclick属性进行绑定，绑定方式为：on＋　事件名称，　在将所触发你事件赋值给该属性 <button onclick='onClick()'></button> 2、 使用元素进行事件绑定 使用element.onclick 进行 事件绑定，通过操作DOM元素，为DOM绑定事件【使用形式同行内绑定】 window.onload = function (){ let btn = document
JS 事件绑定、事件监听、事件委托详细介绍
10-21
事件机制涉及到多个方面，包括事件绑定、事件监听和事件委托等概念，这些都是前端开发中常见的术语。下面将详细介绍这些概念。 首先，让我们来看一下什么是事件绑定。事件绑定指的是将一个或多个事件处理函数与DOM...
JavaScript实现为事件句柄绑定监听函数的方法分析
10-19
本文将深入探讨如何使用JavaScript为事件句柄绑定监听函数，以及不同浏览器的兼容性问题和解决策略。 1. **传统绑定方法** 这是最基础的事件绑定方式，通过直接将函数赋值给DOM元素的事件属性来实现，如`elem....
js事件监听机制(事件捕获)总结
12-04
在父元素上监听事件，然后根据事件对象的`target`属性判断哪个子元素触发了事件，从而进行相应的处理。 总的来说，理解JavaScript的事件监听机制，特别是事件捕获和冒泡，是编写高效且跨浏览器的前端代码的关键。...
react获取绑定事件的那个元素的方法
qq_39047764的博客
07-05 1235
直接用在事件函数里面bind.(this,aa)  而不是在constructor里面绑定this。这个e会代表被绑定事件的元素
如何判断document 有多少个addEventListener
小漠007的专栏
05-28 2567
document.realAddEventListener = document.addEventListener; document.addEventListener = function(a,b,c){ this.realAddEventListener(a,b,c); if(!this.lastListenerInfo){ this.lastListenerInfo = new Array()}; this.lastListenerInfo.push({a : ...
JavaScript的事件监听
modi000的博客
07-25 675
/ console.log(“图片的宽度和高度:”, imgEl.offsetWidth, imgEl.offsetHeight)转载： https://blog.csdn.net/Welitsi/article/details/132906980。事件类型：https://developer.mozilla.org/zh-CN/docs/Web/Events。接下来我们来看一下常见的鼠标事件（不仅仅是鼠标设备，也包括模拟鼠标的设备，比如手机、平板电脑）
JavaScript之事件监听
qq_43751200的博客
06-06 1344
JavaScript之事件监听
JS之事件监听
困难总比办法多
04-15 645
addEventListener 一般的写法是为响应的tag绑定事件，比如onclick事件等等，但是也可以通过监听事件为其绑定函数。 addEventListener的参数详解 百度百科监听事件 代码示例 <script src="../js/mui.js"></script> <script type="text/javascript"> mui.init(); document.getElementById("login").addEventListene
js事件监听
@随性的博客
09-13 4623
事件监听 事件监听就是让计算机等待某个事件的发生，当这个事件发生之后，对其做出一个相应，如等待鼠标单击按钮，单击发生时打开一个新的页面；但是你写的监听事件发现这件事情后，会进行阻止，让其无法跳转。 作用：实现多个事件的绑定 通用性的事件监听方法： （1）绑定HTML元素属性： （2）绑定DOM对象属性： document.getElementById(“xxx”).οnclick=test; <!DOCTYPE html> <html lang="en"> <head
JavaScript事件监听器 addEventListener
kevin@hbstu.net
04-14 1296
在JS(ECMA)中当一个事件发生时，分为三个阶段：1、 捕获阶段 从根节点开始顺序而下，检测每个节点是否注册了事件处理程序。如果注册了事件处理程序，并且 useCapture 为 true，则调用该事件处理程序。2、目标阶段 触发在目标对象本身注册的事件处理程序，也称正常事件派发阶段 。3、冒泡阶段 从目标节点到根节点，检测每个节点是否注册了事件处理程序，如果注册了事件处理程序，并且 useCap
JS事件监听：addEventListener与事件冒泡详解
3. **事件委托**：利用事件冒泡可以实现事件委托，即在一个父元素上监听事件，通过检查事件的目标元素（`event.target`）来执行不同的代码。这种方法减少了事件监听器的数量，提高了程序的性能。 4. **event.target...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值