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

最新推荐文章于 2024-08-24 18:51:28 发布
最新推荐文章于 2024-08-24 18:51:28 发布
阅读量6.8k 收藏 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，可以查看节点绑定的监听事件，帮助开发者确保代码的整洁和性能优化。
摘要由CSDN通过智能技术生成

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

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

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

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

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




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

芝芝葡萄
关注
专栏目录
浏览器查找js绑定或者监听的事件
cf
03-15 2270
1.打开浏览器审核模式 2.选择源代码 3.最右边有个事件监听断点 4.以触摸模式为例，如果代码中有监听触屏事件，移动的时候就会触发相关js代码，并找到位置
JavaScript 教程「10」：DOM 事件
村雨遥
04-25 752
JavaScript 教程第 10 篇
事件监听查看、监听器删除方法
最新发布
z1076233241的博客
08-24 545
最近在开发过程中遇上了不知在哪加入的点击事件，导致页面跳转发生问题，需要找到该点击事件并将其取消掉。以下就是在完成该目标过程中使用、尝试的方法。
DOM学习---获取节点绑定事件
四岁爱上了她的博客
08-23 1317
这里写自定义目录标题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 1356
js查看页面上所有的addEventListener
javascript 中的监听事件
weixin_46174785的博客
09-13 567
js 实现事件监听 1、行内绑定 行内绑定：在ＨＴＭＬ　的标签中通过onclick属性进行绑定，绑定方式为：on＋　事件名称，　在将所触发你事件赋值给该属性 <button onclick='onClick()'></button> 2、 使用元素进行事件绑定 使用element.onclick 进行 事件绑定，通过操作DOM元素，为DOM绑定事件【使用形式同行内绑定】 window.onload = function (){ let btn = document
如何判断document 有多少个addEventListener
小漠007的专栏
05-28 2424
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之事件监听
qq_43751200的博客
06-06 1264
JavaScript之事件监听
JS 事件绑定、事件监听、事件委托详细介绍
10-21
事件机制涉及到多个方面，包括事件绑定、事件监听和事件委托等概念，这些都是前端开发中常见的术语。下面将详细介绍这些概念。 首先，让我们来看一下什么是事件绑定。事件绑定指的是将一个或多个事件处理函数与DOM...
JavaScript实现为事件句柄绑定监听函数的方法分析
10-19
本文将深入探讨如何使用JavaScript为事件句柄绑定监听函数，以及不同浏览器的兼容性问题和解决策略。 1. **传统绑定方法** 这是最基础的事件绑定方式，通过直接将函数赋值给DOM元素的事件属性来实现，如`elem....
JavaScript 事件监听addEventListener
uuind的博客
03-15 687
JavaScript事件监听器 addEventListener()的工作原理是将实现EventListener的函数添加到调用它的EventTarget上的指定事件类型的事件侦听器列表中。 1、事件监听 addEventListener() 语法：ele.addEventListener(event_type , function ,布尔值(是否启用事件捕获去触发事件))  &nb...
js事件监听机制(事件捕获)总结
12-04
在父元素上监听事件，然后根据事件对象的`target`属性判断哪个子元素触发了事件，从而进行相应的处理。 总的来说，理解JavaScript的事件监听机制，特别是事件捕获和冒泡，是编写高效且跨浏览器的前端代码的关键。...
JS之事件监听
困难总比办法多
04-15 597
addEventListener 一般的写法是为响应的tag绑定事件，比如onclick事件等等，但是也可以通过监听事件为其绑定函数。 addEventListener的参数详解 百度百科监听事件 代码示例 <script src="../js/mui.js"></script> <script type="text/javascript"> mui.init(); document.getElementById("login").addEventListene
js事件监听
@随性的博客
09-13 4523
事件监听 事件监听就是让计算机等待某个事件的发生，当这个事件发生之后，对其做出一个相应，如等待鼠标单击按钮，单击发生时打开一个新的页面；但是你写的监听事件发现这件事情后，会进行阻止，让其无法跳转。 作用：实现多个事件的绑定 通用性的事件监听方法： （1）绑定HTML元素属性： （2）绑定DOM对象属性： document.getElementById(“xxx”).οnclick=test; <!DOCTYPE html> <html lang="en"> <head
JavaScript事件监听器 addEventListener
kevin@hbstu.net
04-14 1230
在JS(ECMA)中当一个事件发生时，分为三个阶段：1、 捕获阶段 从根节点开始顺序而下，检测每个节点是否注册了事件处理程序。如果注册了事件处理程序，并且 useCapture 为 true，则调用该事件处理程序。2、目标阶段 触发在目标对象本身注册的事件处理程序，也称正常事件派发阶段 。3、冒泡阶段 从目标节点到根节点，检测每个节点是否注册了事件处理程序，如果注册了事件处理程序，并且 useCap
JavaScript事件监听、常见事件及表单验证
m0_61961937的博客
05-07 2251
JavaScript事件监听及常见事件示例，及简单表单验证示例
JS DOM 事件监听及案例
qq_35112578的博客
08-02 853
元素.addEventListener(‘事件’，函数）/*鼠标手势*/
JavaScript中的事件监听和事件对象
weixin_73918953的博客
05-07 321
什么是事件事件是在编程时系统内发生的动作或者发生的事情，比如用户在网页上单击一个按钮什么是事件监听就是让程序检测是否有事件产生，一旦有事件触发就立即调用一个函数做出响应，也称为绑定事件或者注册事件，比如鼠标经过显示下拉菜单，比如点击可以播放轮播图等等语法。
获取元素中的所有监听事件
qq_42880714的博客
01-12 8792
addEventListener
window.addEventListener监听'drop'事件没有效果
08-15
在JavaScript中，`window.addEventListener('drop', function() {...})` 是用来为浏览器窗口添加`drop`事件处理程序，这个事件通常会在用户将数据（比如文件、文本等）从外部拖入到网页上时触发。如果你发现这样的代码没有效果，可能有以下几个原因： 1. **兼容性问题**：`drop`事件在一些老版本的浏览器或者某些特定环境中可能不被支持，确保你在现代和主流浏览器上测试。 2. **阻止默认行为**：如果用户的操作被页面内的其他元素阻止了默认的`drop`事件处理，你需要明确取消阻止。 3. **DOM元素未正确绑定**：检查事件处理器是否绑定到了正确的DOM元素上，如果是对整个`window`应用的，确保元素没有覆盖或包含其他节点。 4. **事件处理函数错误**：确认函数定义是否有误，是否接收了正确的参数并进行了适当的处理。 5. **异步加载**：某些情况下，事件可能还未完全加载就执行了，确保在所有资源加载完毕后再绑定事件。 6. **事件冒泡或捕获**：`addEventListener`默认是捕获阶段，你可以尝试改为`useCapture: true`来在冒泡阶段处理。 如果你能提供具体的代码片段和环境描述，我可以给出更针对性的帮助。接下来有一些相关问题： 1. `drop`事件在哪些场景下不会触发？ 2. 如何检查浏览器对`drop`事件的支持情况？ 3. 如何设置阻止浏览器默认的`drop`事件处理？
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值