获取 js DOM元素中绑定的所有事件,模仿 chrome getEventListeners
偶尔看到了这个问题,如何用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的更多相关文章
- vue中一个dom元素可以绑定多个事件?
其实这个问题有多个解决方法的 这里提出两点 第一种 第二种 现在dom上绑定一个 然后在你的methods中直接调用 如果要传参数 这时候千万别忘记 原创 如需转载注明出处 谢谢
- JS获取HTML DOM元素的方法
JS获取HTML DOM元素有八种方法: 1.根据id获取标签元素: document.getElementById("id名"); 2.根据标签名获取标签列表: document ...
- Jquery 方式获取 iframe Dom元素
Jquery 方式获取 iframe Dom元素 測试页面代码: <html> <head> <title>jquery方式,訪问iframe页面dom元素& ...
- (转载)js(jquery)的on绑定点击事件执行两次的解决办法
js(jquery)的on绑定点击事件执行两次的解决办法—不是事件绑定而是事件冒泡 遇到的问题:jquery中用.on()给页面中新加的元素添加点击事件时,点击事件源,绑定的事件执行两次,这里的ale ...
- JQuery 动态加载 HTML 元素时绑定点击事件无效问题
问题描述 假设项目中有一个列表页面,如下: 当点击列表一行数据可以显示详情页面,而详情页面的数据是根据当前行的数据作为参数,通过 ajax 请求到后台返回的数据,再根据返回的结果动态生成 html 页 ...
- JS获取HTML DOM元素的8种方法
什么是HTML DOM 文档对象模型(Document Object Model),是W3C组织推荐的处理可扩展置标语言的标准编程接口.简单理解就是HTML DOM 是关于如何获取.修改.添加或删除 ...
- 原生JS获取HTML DOM元素的8种方法
JS获取DOM元素的方法(8种) 通过ID获取(getElementById) 通过name属性(getElementsByName) 通过标签名(getElementsByTagName) 通过类名 ...
- VUE中v-on:click事件中获取当前dom元素
在开发中总是忘记, 特意在此记录 关键字: $event <div class="bed" v-on:click="updateBed(index,$e ...
- D3.js 选择元素和绑定数据/使用数据
选择元素和绑定数据是 D3 最基础的内容,本文将对其进行一个简单的介绍. 一.如何选择元素 在 D3 中,用于选择元素的函数有两个: d3.select():是选择所有指定元素的第一个 d3.sele ...
随机推荐
- java遍历实体类的属性和数据类型以及属性值
遍历实体类的树形和数据类型一级属性值 /** * 遍历实体类的属性和数据类型以及属性值 * @param model * @throws NoSuchMethodException * @throws ...
- Delphi 全局画点TCanvas.Pixels[X,Y]
procedure TForm1.btnChangePixelClick(Sender: TObject); var baseX : integer ; baseY : integer ; i,j : ...
- windows phone 应用提交商店失败总结
应用完成后,在提交微软商店时,可能因为各种各样的问题导致提交审核失败.以前的审核失败并没有总结,希望今后 把各种提交审核失败的情况总结一下,以减少今后提交认证时浪费时间. 1.商店的屏幕截图上不能包含 ...
- 在无法单步调试的情况下找Bug的技巧
比如说你有一个大的模块A,其组成部分有B,C,D这3个小的模块,现在A出了一个BUG,因为某种原因的限制你无法单步调试.怎么较快地定位BUG发生的根源? 这里记录一下刚才我在找BUG的时候采用的思路, ...
- windows7环境下使用pip安装MySQLdb
1.首先,需要确定你已经安装了pip.在Python2.7的安装包中,easy_install.py和pip都是默认安装的.可以在Python的安装目录先确认,如果\Python27\Scripts里 ...
- 【Code::Blocks】windows 环境下编译 Code::Blocks(已修正)
Code::Blocks 在2012-11-25发布了最新的12.11版本,相比上一个版本(10.05),Code::Blocks 进行了许多改进和更新(Change log). 引用 Wikiped ...
- IIS 与 Apache共存
http://support.microsoft.com/kb/813368 http://www.blueidea.com/computer/system/2006/3585.asp 操作其实也很简 ...
- Redis简单介绍
redis简单介绍 Redis VS key-value缓存产品 Redis支持数据的持久化,能够将内存中的数据保持在磁盘中,重新启动的时候能够再次载入进行使用. Redis不只支持简单的key-va ...
- [WDT]内部看门狗和外部看门狗
1. 芯片内部看门狗 内部看门狗通常为芯片内部某个特殊定时器,用户可以通过手动初始化.设置timeout.使能.失能该看门狗,然后在线程中定时去喂狗,从而达到检测应用程序跑飞.跑死的情况. 在Linu ...
- UCOS2系统内核讲述_总体描述
Ⅰ.写在前面 学习本文之前可以参考我前面基于STM32硬件平台移植UCOS2的几篇文章,我将其汇总在一起: UCOS2_STM32F1移植详细过程(汇总文章) 要想学习,或使用系统配套的资源(如:信号 ...