获取 js DOM元素中绑定的所有事件,模仿 chrome getEventListeners

最新推荐文章于 2022-10-31 15:54:25 发布
最新推荐文章于 2022-10-31 15:54:25 发布
阅读量3.4k 收藏 2
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/xianshenglu/p/8137805.html
版权

偶尔看到了这个问题，如何用JS获取元素某一事件上绑定的所有Listener？

突然觉得好像是有解决办法的，查了下，在 chrome 下，支持

window.getEventListeners(obj)

例如：

addEvent(aLink, 'click',f, false);
window.getEventListeners(aLink)

返回：

bV09Ei?w=254&h=195

如果要模仿 chrome 实现呢，也是可以的，需要修改 addEventListener 和 removeEventListener，或者你自己自定义一个也行，比如我实现后的效果：

最低0.47元/天 解锁文章
weixin_30457065
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery中dom元素上绑定的事件详解
10-24
在jQuery中，DOM元素上的事件绑定是实现交互性的重要手段。jQuery提供了多种方式来绑定事件，包括`click`、`change`、`mouseout`等基本事件以及`.bind()`、`.live()`等方法。这些方法允许开发者轻松地为HTML元素添加...
【冷知识】获取网页所有的监听事件类型、方法。请认准getEventListeners
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
08-27 1万+
获取事件列表 getEventListeners(window)//获取window绑定的所有监听事件列表 getEventListeners(document.querySelector("选择器"))//获取指定DOM的所有监听事件列表 这里以CSDN为例，F12当前页面在Console选项卡输入getEventListeners(window),回车执行代码后会输出以下对象： 获取事件绑定的方法源码 getEventListeners(window).事件名[0].listene..
vue通过父组件调用子组件里面的方法，子组件的方法通过全局定义的eventLists获取到所有已绑定事件，移除并重新绑定该事件，防止重复绑定
06-17 704
引子：原生JS貌似没有获取元素已绑定事件的方法，查了查实在没找到，只能自个儿写一个了 有人说让用Chrome的window.getEventListeners(elemObj)去获取，可是我的还是报错，实在没辙了，用最笨的办法一劳永逸吧，懒人有懒人的办法，这样不就好多了嘛 重新封装全局绑定事件和移除事件方法 function addEvent(obj, type, callback, useCap...
获取元素中的所有监听事件
qq_42880714的博客
01-12 8450
addEventListener
js查看页面上所有的addEventListener
qq_42612951的博客
10-31 1270
js查看页面上所有的addEventListener
addEventListener()使用方法
热门推荐
搏·梦的博客
04-10 2万+
document.addEventListener() 方法用于向文档添加事件句柄，即事件监听。先看下面代码，稍后进行讲解。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body>...
JavaScript 事件监听器列表
m0_63639281的博客
08-22 1420
JavaScript 事件监听器列表
在vue中获取dom元素内容的方法
08-30
"在 Vue 中获取 DOM 元素内容的方法" 在 Vue 中获取 DOM 元素内容是开发者经常遇到的问题，而解决这个问题的方法很多，今天我们就来讨论其中的一种，即使用 ref 属性来获取 DOM 元素内容。 使用 ref 属性获取 DOM ...
js中DOM事件绑定分析
11-27
在脚本中通过JavaScript获取DOM元素并为其设置事件处理函数。例如： ```javascript var input = document.getElementsByTagName('input')[0]; input.onclick = function () { alert('Lee'); }; ``` 这种方式...
vue动态生成dom并且自动绑定事件
01-19
用jquery的时候你会发现，页面渲染后动态生成的dom，在生成之前的代码是没办法取到相应对象的，必须重新获取.但是vue基于数据绑定的特性让它能生成的时候直接绑定数据。 html: <input type=text v-model...
js事件-笔记
qq_43563512的博客
10-26 706
这里写目录标题js事件常见事件事件的注册方式事件处理分级1.DOM0级事件处理程序：2. DOM2级事件处理程序：3. DOM3级事件事件流三个阶段 js事件 常见事件 onload 加载完成事件 页面加载之后，常用于页面js代码初始化动作 onclick 单击事件 常用于按钮的点击响应操作 onblur 失去焦点事件 常用于输入框失去焦点后验证其输入内容是否合法 onchange 内容发生改变事件 常用于下拉列表和输入框发生改变后操作 insubmit 表单提交事件 常用于表单提交前
【JS】addEventListener方法介绍
红尘道，红尘练心
09-07 5958
第三个参数useCapture：设置传递的类型，默认值为false，即冒泡传递（可省略）；使用 attachEvent 方法有个缺点，this 的值会变成 window 对象的引用而不是触发事件的元素。addEventListener()，事件监听，用于向指定的元素添加事件监听。在捕获中，外部元素的事件会被先触发，然后才会触发内部元素的事件。在冒泡中，内部元素的事件会先被触发，然后再触发外部元素；(它允许给一个事件注册多个监听器，且不会覆盖已存在的事件)事件的传递有两种方式：冒泡与捕获。
addEventListener()
qq_41918834的博客
01-11 1540
https://www.cnblogs.com/mcdnf/p/5347537.html 先看个例子： document.getElementById(“myBtn”).addEventListener(“click”, function(){ document.getElementById(“demo”).innerHTML = “Hello World”; }); 定义和用法 addEventListener() 方法用于向指定元素添加事件句柄。 提示： 使用 removeEventListener()
addeventlistener事件第三个参数_事件监听函数，以及事件的捕获和冒泡机制
weixin_39610722的博客
11-27 901
1.函数事件事件一般是用于浏览器和用户操作之间的交互，当用户执行某些特殊的操作时，浏览器给予反应，触发绑定的事件事件流，事件发生时会在元素节点和根节点之间按照约定的顺序传播，事件经过的所有节点都会受到事件的影响，这个传播过程被称为DOM事件流true是捕获，false是冒泡，默认为冒泡事件2.addEventListener()－－添加事件监听函数给元素添加一个事件，假如有多个事件，不会...
JS事件处理程序中的event
csdssdn的博客
05-18 993
目录 Event对象 获取event对象 隐藏在监听函数中的"event" event. preventDefault() event.stopPropagation() & event.stopImmediatePropagation() 1. event.stopPropagation() 方法 2. stopImmediatePropagation()方法 event.target & event.currentTarget 事件代理 Event对象 Event.
html 应用js字段,如何用 JS 一次获取 HTML 表单的所有字段 ？
weixin_33189820的博客
06-03 198
作者：VALENTINO GAGLIARDI译者：前端小智来源：valentinog移动端阅读：https://mp.weixin.qq.com/s/rj...点赞再看，养成习惯本文 GitHub https://github.com/qq44924588... 上已经收录，更多往期高赞文章的分类，也整理了很多我的文档，和教程资料。欢迎Star和完善，大家面试可以参照考点复习，希望我们一起有点东西...
addEventListener（）参数及事件汇总
菠萝萝的博客
09-26 5835
addEventListener（）事件的汇总记录
JS DOM事件（常用消息、常用事件、addEventListener、removeEventListener）
墨痕诉清风的博客
09-03 638
HTML 事件的例子： 当用户点击鼠标时 当网页已加载时 当图像已加载时 当鼠标移动到元素上时 当输入字段被改变时 当提交 HTML 表单时 当用户触发按键时 单击事件 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>阿西吧</title> </head> <body> <h1 onclick="this.in.
vue2中获取DOM绑定原生js键盘事件
最新发布
07-14
在Vue2中，你可以通过使用`ref`来获取DOM元素的引用，并使用原生的JavaScript来绑定键盘事件。以下是一个示例： ```html <template> <div> <input type="text" ref="inputRef" /> </div> </template> <script> export default { mounted() { this.$refs.inputRef.addEventListener('keyup', this.handleKeyUp); }, beforeDestroy() { this.$refs.inputRef.removeEventListener('keyup', this.handleKeyUp); }, methods: { handleKeyUp(event) { if (event.key === 'Enter') { // 处理回车事件的逻辑 console.log('回车键被按下了！'); } } } } </script> ``` 在上面的示例中，我们给输入框添加了一个`ref`属性，将其命名为`inputRef`。在`mounted`生命周期钩子函数中，我们通过`this.$refs.inputRef`获取到输入框的DOM引用，并使用`addEventListener`方法来绑定`keyup`事件和对应的处理函数`handleKeyUp`。 在`handleKeyUp`方法中，我们检查按下的键是否是回车键（通过`event.key`属性），如果是，则执行相应的逻辑。在组件销毁之前，我们使用`removeEventListener`方法来移除键盘事件的监听。 这样，你就可以使用原生的JavaScript来绑定和处理键盘事件了。记得在适当的时候移除事件监听，以避免内存泄漏。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值