我有一个页面，其中一些事件监听器附加到输入框和选择框。是否有一种方法可以找出哪些事件侦听器正在观察特定的DOM节点以及观察什么事件?
使用以下方法附加事件:
Prototype, Event.observe; 唐,addEventListener; 元素属性元素onclick
当前回答
粘贴到console中，可以在HTML元素旁边打印所有eventlistener
Array.from(document.querySelectorAll("*")).forEach(element => {
const events = getEventListeners(element)
if (Object.keys(events).length !== 0) {
console.log(element, events)
}
})
其他回答
Opera 12(不是最新的基于Chrome Webkit的引擎)蜻蜓已经有一段时间了，并且很明显地显示在DOM结构中。在我看来，这是一个优秀的调试器，也是我仍然使用基于Opera 12的版本的唯一原因(没有v13, v14版本，基于v15 Webkit的版本仍然缺乏Dragonfly)
原型1.7.1方式
function get_element_registry(element) {
var cache = Event.cache;
if(element === window) return 0;
if(typeof element._prototypeUID === 'undefined') {
element._prototypeUID = Element.Storage.UID++;
}
var uid = element._prototypeUID;
if(!cache[uid]) cache[uid] = {element: element};
return cache[uid];
}
这取决于事件是如何附加的。为了说明，假设我们有以下点击处理程序:
var handler = function() { alert('clicked!') };
我们将使用不同的方法将它附加到元素上，有些允许检查，有些不允许。
方法A)单个事件处理程序
element.onclick = handler;
// inspect
console.log(element.onclick); // "function() { alert('clicked!') }"
方法B)多个事件处理程序
if(element.addEventListener) { // DOM standard
element.addEventListener('click', handler, false)
} else if(element.attachEvent) { // IE
element.attachEvent('onclick', handler)
}
// cannot inspect element to find handlers
方法C): jQuery
$(element).click(handler);
1.3.x // inspect var clickEvents = $(element).data("events").click; jQuery.each(clickEvents, function(key, value) { console.log(value) // "function() { alert('clicked!') }" }) 1.4.x (stores the handler inside an object) // inspect var clickEvents = $(element).data("events").click; jQuery.each(clickEvents, function(key, handlerObj) { console.log(handlerObj.handler) // "function() { alert('clicked!') }" // also available: handlerObj.type, handlerObj.namespace }) 1.7+ (very nice) Made using knowledge from this comment. events = $._data(this, 'events'); for (type in events) { events[type].forEach(function (event) { console.log(event['handler']); }); }
(参见jQuery.fn.data和jQuery.data)
方法D):原型(凌乱)
$(element).observe('click', handler);
1.5.x // inspect Event.observers.each(function(item) { if(item[0] == element) { console.log(item[2]) // "function() { alert('clicked!') }" } }) 1.6 to 1.6.0.3, inclusive (got very difficult here) // inspect. "_eventId" is for < 1.6.0.3 while // "_prototypeEventID" was introduced in 1.6.0.3 var clickEvents = Event.cache[element._eventId || (element._prototypeEventID || [])[0]].click; clickEvents.each(function(wrapper){ console.log(wrapper.handler) // "function() { alert('clicked!') }" }) 1.6.1 (little better) // inspect var clickEvents = element.getStorage().get('prototype_event_registry').get('click'); clickEvents.each(function(wrapper){ console.log(wrapper.handler) // "function() { alert('clicked!') }" })
当单击控制台中的结果输出(其中显示了函数的文本)时，控制台将直接导航到相关JS文件中函数声明的行。
如果你有Firebug，你可以使用控制台。在任何JavaScript标量、数组或对象的控制台日志中打印一个漂亮的树。
试一试:
console.dir(clickEvents);
or
console.dir(window);
更改这些函数将允许您记录添加的侦听器:
EventTarget.prototype.addEventListener
EventTarget.prototype.attachEvent
EventTarget.prototype.removeEventListener
EventTarget.prototype.detachEvent
朗读其余的听众
console.log(someElement.onclick);
console.log(someElement.getAttribute("onclick"));
