偶尔看到了这个问题,如何用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. Atitit。D&D drag&drop拖拽功能c#.net java swing的对比与实现总结

    Atitit.D&D drag&drop拖拽功能c#.net java swing的对比与实现总结 1. 实现一个D&D操作一般包括三个步骤: 1 2. .net黑头的拖曳机制 ...

  2. Windows剪贴板操作简单小例

    1.复制文字到剪贴板 CString strText = L"须要拷贝到剪贴板的文字"; if ( ::OpenClipboard(m_hWnd) ) { if ( ::Empty ...

  3. 对称加密算法-DES以及DESede算法

    一.简述 对称加密算法就是能将数据加解密.加密的时候用密钥对数据进行加密,解密的时候使用同样的密钥对数据进行解密. DES是美国国家标准研究所提出的算法.因为加解密的数据安全性和密钥长度成正比.des ...

  4. SQL Server 2014 Agent 无法启动

    - <Event xmlns="http://schemas.microsoft.com/win/2004/08/events/event">- <System& ...

  5. 折腾kali linux2.0

    偶然的机会了解到了kali linux这个用于渗透测试的linux发行版,于是就从官网下了iso,但是制作启动盘老出错.网上查了下说在linux下用dd命令特别简单,于是转到ubuntu下制作启动盘, ...

  6. RIP动态路由的配置

    RIP其实相对比会比静态路由会简单的多,只需要使用rip命令添加邻居的网络号即可. 命令: Router(config)#ip route rip Router(config-router)#netw ...

  7. 关于报错“syntax error near unexpected token `”和回车换行

    本来是很简单一个事情,转过来是因为打字机这事比较有趣…… http://blog.csdn.net/xyp84/archive/2009/08/11/4435899.aspx 摘要一下: 回车 换行 ...

  8. 关于Nvelocity的主要语法和一些代码示例

    context.Response.ContentType = "text/html"; VelocityEngine vltEngine = new VelocityEngine( ...

  9. 当springMVC 容器初始化完成后执行某个方法

    分类: spring java2013-06-19 16:40 8289人阅读 评论(4) 收藏 举报 在某些应用中,我们希望,当spring 容器将所有的bean都初始化完成后,做一个操作(例如:将 ...

  10. VC++ 窗口拆分CSplitterWnd

    前言         当前许多优秀的软件都采用“多视”技术. 所谓“多视”,是指在同一个框架窗口里同时显示多个视图. 通过运用这种技术,可以在框架的有限控件内同时提供用户更大的信息量,并且使得用户界面 ...