我有一个页面,其中一些事件监听器附加到输入框和选择框。是否有一种方法可以找出哪些事件侦听器正在观察特定的DOM节点以及观察什么事件?
使用以下方法附加事件:
Prototype, Event.observe; 唐,addEventListener; 元素属性元素onclick
我有一个页面,其中一些事件监听器附加到输入框和选择框。是否有一种方法可以找出哪些事件侦听器正在观察特定的DOM节点以及观察什么事件?
使用以下方法附加事件:
Prototype, Event.observe; 唐,addEventListener; 元素属性元素onclick
当前回答
如果你有Firebug,你可以使用控制台。在任何JavaScript标量、数组或对象的控制台日志中打印一个漂亮的树。
试一试:
console.dir(clickEvents);
or
console.dir(window);
其他回答
Opera 12(不是最新的基于Chrome Webkit的引擎)蜻蜓已经有一段时间了,并且很明显地显示在DOM结构中。在我看来,这是一个优秀的调试器,也是我仍然使用基于Opera 12的版本的唯一原因(没有v13, v14版本,基于v15 Webkit的版本仍然缺乏Dragonfly)
更改这些函数将允许您记录添加的侦听器:
EventTarget.prototype.addEventListener
EventTarget.prototype.attachEvent
EventTarget.prototype.removeEventListener
EventTarget.prototype.detachEvent
朗读其余的听众
console.log(someElement.onclick);
console.log(someElement.getAttribute("onclick"));
2022年更新:
在Chrome开发工具的元素面板中,有一个事件监听器选项卡,在那里你可以看到元素的监听器。
你也可以取消选择“祖宗”,这样它只显示该元素的监听器
粘贴到console中,可以在HTML元素旁边打印所有eventlistener
Array.from(document.querySelectorAll("*")).forEach(element => {
const events = getEventListeners(element)
if (Object.keys(events).length !== 0) {
console.log(element, events)
}
})
使用getEventListeners在谷歌Chrome:
getEventListeners(document.getElementByID('btnlogin'));
getEventListeners($('#btnlogin'));