我有一个页面,其中一些事件监听器附加到输入框和选择框。是否有一种方法可以找出哪些事件侦听器正在观察特定的DOM节点以及观察什么事件?

使用以下方法附加事件:

Prototype, Event.observe; 唐,addEventListener; 元素属性元素onclick


当前回答

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"));

Opera 12(不是最新的基于Chrome Webkit的引擎)蜻蜓已经有一段时间了,并且很明显地显示在DOM结构中。在我看来,这是一个优秀的调试器,也是我仍然使用基于Opera 12的版本的唯一原因(没有v13, v14版本,基于v15 Webkit的版本仍然缺乏Dragonfly)

我试图在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>

(重写这个问题的答案,因为它与这里有关。)

在调试时,如果你只想看到事件,我建议你选择…

视觉事件 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的内部结构,在未来的版本中可能会改变。不幸的是,我不知道其他方便的方法来访问这些事件。

原型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];
}