我有一个页面,其中一些事件监听器附加到输入框和选择框。是否有一种方法可以找出哪些事件侦听器正在观察特定的DOM节点以及观察什么事件?
使用以下方法附加事件:
Prototype, Event.observe; 唐,addEventListener; 元素属性元素onclick
我有一个页面,其中一些事件监听器附加到输入框和选择框。是否有一种方法可以找出哪些事件侦听器正在观察特定的DOM节点以及观察什么事件?
使用以下方法附加事件:
Prototype, Event.observe; 唐,addEventListener; 元素属性元素onclick
当前回答
Chrome, Firefox, Vivaldi和Safari在他们的开发人员工具控制台中支持getEventListeners(domElement)。
对于大多数调试目的,都可以使用这种方法。
下面是一个很好的使用它的参考: getEventListeners函数
Clifford Fajardo在评论中给出了高度投票的建议:
getEventListeners($0)将获得你在Chrome开发工具中关注的元素的事件监听器。
其他回答
(重写这个问题的答案,因为它与这里有关。)
在调试时,如果你只想看到事件,我建议你选择…
视觉事件 Chrome开发者工具的元素部分:选择一个元素,在右下角寻找“事件监听器”(类似于Firefox)
如果你想在你的代码中使用事件,并且你在1.8版本之前使用jQuery,你可以使用:
$(selector).data("events")
来获取事件。从1.8版开始,停止使用.data("events")(请参阅此错误票据)。你可以使用:
$._data(element, "events")
另一个例子:将某个链接上的所有点击事件写入控制台:
var $myLink = $('a.myClass');
console.log($._data($myLink[0], "events").click);
(工作示例见http://jsfiddle.net/HmsQC/)
不幸的是,使用$。_data除了调试之外不建议使用,因为它是jQuery的内部结构,在未来的版本中可能会改变。不幸的是,我不知道其他方便的方法来访问这些事件。
Opera 12(不是最新的基于Chrome Webkit的引擎)蜻蜓已经有一段时间了,并且很明显地显示在DOM结构中。在我看来,这是一个优秀的调试器,也是我仍然使用基于Opera 12的版本的唯一原因(没有v13, v14版本,基于v15 Webkit的版本仍然缺乏Dragonfly)
在JavaScript中列出所有事件监听器是可能的:这并不难;你只需要破解HTML元素的原型方法(在添加侦听器之前)。
function reportIn(e){
var a = this.lastListenerInfo[this.lastListenerInfo.length-1];
console.log(a)
}
HTMLAnchorElement.prototype.realAddEventListener = HTMLAnchorElement.prototype.addEventListener;
HTMLAnchorElement.prototype.addEventListener = function(a,b,c){
this.realAddEventListener(a,reportIn,c);
this.realAddEventListener(a,b,c);
if(!this.lastListenerInfo){ this.lastListenerInfo = new Array()};
this.lastListenerInfo.push({a : a, b : b , c : c});
};
现在每个锚元素(a)都有一个lastListenerInfo属性,其中包含它所有的侦听器。它甚至可以用匿名函数删除侦听器。
有很好的jQuery事件扩展:
(主题)
使用getEventListeners在谷歌Chrome:
getEventListeners(document.getElementByID('btnlogin'));
getEventListeners($('#btnlogin'));