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

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

window.getEventListeners(obj)

例如:

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

返回:

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

基本上是模仿了,chrome 定义的全局方法,我是绑定在每一个事件对象的属性上,通过 obj.eventList 来访问,具体代码如下:

var aLink = document.links[0];

function addEvent(obj, type, callback, useCapture) {
obj.addEventListener(type, callback, useCapture);
addEventList(obj, type, callback, useCapture);
} function removeEvent (obj, type, callback, useCapture) {
obj.removeEventListener(type, callback, useCapture);
removeEventList(obj, type, callback, useCapture);
} function addEventList(obj, type, callback, useCapture) {
if (obj.eventList) {
if (obj.eventList[type]) {
obj.eventList[type].push({ callback: callback, useCapture: useCapture });
} else {
obj.eventList[type] = [{ callback: callback, useCapture: useCapture }];
}
} else {
obj.eventList = {};
obj.eventList[type] = [{ callback: callback, useCapture: useCapture }];
}
} function removeEventList(obj, type, callback, useCapture) {
var eventList=obj.eventList;
if (eventList) {
if (eventList[type]) {
for (var i = 0; i < eventList[type].length; i++) {
if (eventList[type][i].callback===callback) {
eventList[type].splice(i, 1);
if (eventList[type].length===0) {
delete eventList[type];
}
break;
}
}
}
}
} function f () {
event.preventDefault();
alert('f');
}
function g () {
event.preventDefault();
alert('g');
}
function h () {
event.preventDefault();
alert('h');
} addEvent(aLink, 'click', f, false);
addEvent(aLink, 'click', g, false);
addEvent(aLink, 'mouseup', h, false);
console.log(aLink.eventList);

但是这样的缺点也很明显,只能通过 addEvent 来绑定事件,不能通过其他的方式来绑定,不然还是获取不到,所以远没有 chrome 的方法强大,不过这个实现我觉得还是有点意思的,就留了个博客,,,

获取 js DOM元素中绑定的所有事件,模仿 chrome getEventListeners的更多相关文章

  1. vue中一个dom元素可以绑定多个事件?

    其实这个问题有多个解决方法的  这里提出两点 第一种 第二种 现在dom上绑定一个 然后在你的methods中直接调用 如果要传参数  这时候千万别忘记 原创 如需转载注明出处 谢谢

  2. JS获取HTML DOM元素的方法

    JS获取HTML DOM元素有八种方法: 1.根据id获取标签元素: document.getElementById("id名"); 2.根据标签名获取标签列表: document ...

  3. Jquery 方式获取 iframe Dom元素

    Jquery 方式获取 iframe Dom元素 測试页面代码: <html>  <head>   <title>jquery方式,訪问iframe页面dom元素& ...

  4. (转载)js(jquery)的on绑定点击事件执行两次的解决办法

    js(jquery)的on绑定点击事件执行两次的解决办法—不是事件绑定而是事件冒泡 遇到的问题:jquery中用.on()给页面中新加的元素添加点击事件时,点击事件源,绑定的事件执行两次,这里的ale ...

  5. JQuery 动态加载 HTML 元素时绑定点击事件无效问题

    问题描述 假设项目中有一个列表页面,如下: 当点击列表一行数据可以显示详情页面,而详情页面的数据是根据当前行的数据作为参数,通过 ajax 请求到后台返回的数据,再根据返回的结果动态生成 html 页 ...

  6. JS获取HTML DOM元素的8种方法

    什么是HTML DOM 文档对象模型(Document Object Model),是W3C组织推荐的处理可扩展置标语言的标准编程接口.简单理解就是HTML DOM 是关于如何获取.修改.添加或删除 ...

  7. 原生JS获取HTML DOM元素的8种方法

    JS获取DOM元素的方法(8种) 通过ID获取(getElementById) 通过name属性(getElementsByName) 通过标签名(getElementsByTagName) 通过类名 ...

  8. VUE中v-on:click事件中获取当前dom元素

    在开发中总是忘记, 特意在此记录 关键字:   $event     <div class="bed" v-on:click="updateBed(index,$e ...

  9. D3.js 选择元素和绑定数据/使用数据

    选择元素和绑定数据是 D3 最基础的内容,本文将对其进行一个简单的介绍. 一.如何选择元素 在 D3 中,用于选择元素的函数有两个: d3.select():是选择所有指定元素的第一个 d3.sele ...

随机推荐

  1. 编译安装PHP7并安装Redis扩展Swoole扩展(未实验)

    用PECL自动安装Redis扩展.Swoole扩展 pecl install redis pecl install swool 编译安装PHP7并安装Redis扩展Swoole扩展 在编译php7的机 ...

  2. Atitit. 解决80端口 System 占用pid 4,,找到拉个程序或者服务占用http 80服务

    Atitit. 解决80端口  System 占用pid 4,,找到拉个程序或者服务占用http服务 这个是http.sys系统服务占用了... net stop http ,三,没法儿终止 1. 寻 ...

  3. [转]html5调用摄像头实例

    原文:https://blog.csdn.net/binquan_liang/article/details/79489989 最近在学习在做HTML5的项目,看了博客上html5调用摄像头拍照的文章 ...

  4. path方法总结

    $.mobile.path.get(url);//获取URL地址的目录部分,就是除了a.html之外的那部分 jQuery.mobile.path.getDocumentBase(bool) //获取 ...

  5. 02、Windows Phone 套接字(Socket)实战之服务器端设计

    这里主要写 PC 服务器端的逻辑,UI 使用的是 WPF,因为 WPF 比普通的 WinForm 的流式布局 更容易控制,而且比 WinForm 美观一些,显示截图: 一.页面 UI MainWind ...

  6. 工作流Activiti的学习总结(十二) activiti官方十分钟快速学习 (zhuan)

    http://topmanopensource.iteye.com/blog/1315341 ***************************************************** ...

  7. 常见编码和编码头BOM

    ANSI(American National Standards Institute,美国国家标准学会)ANSI编码标准是指所有从基本ASCII码基础上发展起来的编码标准,比如扩展的ASCII码(12 ...

  8. 非常多学ThinkPHP的新手会遇到的问题

    在模板传递变量的时候,非常多视频教程都使用$v.channel的方式.例如以下: <a href="{:U('Chat/set',array('id'=>$v.channel)) ...

  9. springboot日志管理+集成log4j

    sprongboot使用的默认日志框架是Logback. 可以在application.properties配置简单日志属性,也可以单独配置logback.xml格式,还可以使用log4j来管理. 下 ...

  10. redis-stat 安装

    apt-get install ruby     apt-get install rubygems redis-stat安装: cd/root git clone https://github.com ...