我有一个页面，其中一些事件监听器附加到输入框和选择框。是否有一种方法可以找出哪些事件侦听器正在观察特定的DOM节点以及观察什么事件?
使用以下方法附加事件:
Prototype, Event.observe; 唐,addEventListener; 元素属性元素onclick
当前回答
原型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];
}
其他回答
Chrome或Safari浏览器中的WebKit Inspector现在可以做到这一点。当您在Elements窗格中选择某个DOM元素时，它将显示该DOM元素的事件侦听器。
我试图在jQuery 2.1中做到这一点，并使用“$().click() -> $(element).data(“events”).click;”方法它不起作用。
我意识到只有$._data()函数在我的情况下工作:
$(document).ready(function(){ var node = $('body'); // Bind 3 events to body click node.click(function(e) { alert('hello'); }) .click(function(e) { alert('bye'); }) .click(fun_1); // Inspect the events of body var events = $._data(node[0], "events").click; var ev1 = events[0].handler // -> function(e) { alert('hello') var ev2 = events[1].handler // -> function(e) { alert('bye') var ev3 = events[2].handler // -> function fun_1() $('body') .append('<p> Event1 = ' + eval(ev1).toString() + '</p>') .append('<p> Event2 = ' + eval(ev2).toString() + '</p>') .append('<p> Event3 = ' + eval(ev3).toString() + '</p>'); }); function fun_1() { var txt = 'text del missatge'; alert(txt); } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> </body>
这取决于事件是如何附加的。为了说明，假设我们有以下点击处理程序:
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文件中函数声明的行。
2022年更新:
在Chrome开发工具的元素面板中，有一个事件监听器选项卡，在那里你可以看到元素的监听器。
你也可以取消选择“祖宗”，这样它只显示该元素的监听器
有很好的jQuery事件扩展:
(主题)
