查看元素的所有dom事件

Question

我有一个jQuery UI数据报警器，当您单击某个日期时，它会将我的URL散列清除为#，并且不会更改textbox中的日期。

我假设还有一些其他的JavaScript实用工具具有某种委托事件，这些事件也被调用，抛出一个错误，并杀死jquery处理程序。

我如何通过，或看到所有委托事件匹配此dom元素。

Answer 1

Chrome的开发工具可以在这方面提供帮助：

1. 将Chrome指向页面
2. 右键单击“jQuery UI数据报警器”中的日期，然后选择“检查元素”。
3. 在最右边，有一个手风琴，里面有各种各样的东西.接近底部的是“事件侦听器”。(Chrome开发工具的当前版本在这方面非常聪明，包括查询jQuery的处理程序链。)
4. 展开“事件侦听器”树项，您将看到与该元素相关的挂钩事件列表，即使该元素上没有专门设置处理程序。(例如，如果您在这个问题上使用up抽签按钮执行此操作，您将看到click对a.vote-up-off和document都有帮助。)因此，您可以围绕这些元素来查看与该元素的事件相关的直接和委托处理程序。

除此之外，您还可以使用jQuery的非小型化版本，并在单击datepicker中的日期时遍历事件分派。

当然，加布如何通过jQuery events数据获得特定于jQuery的处理程序。(这将不会显示委托处理程序(除非您遍历祖先树)，也不会向您展示可能附加的非jQuery处理程序，但它仍然是非常有用的东西。

Answer 2

使用jQuery，您可以通过访问数据的events键来查看所有的元素事件。

jsFiddle

示例：

<input type="text" id="myelement" />​

JS

$(function() {


    var myelement = $('#myelement');
    myelement.click(function() {

        console.log('anonymous event');

    });

    myelement.click(anotherEvent);
    myelement.change(anotherEvent);

    var events = myelement.data('events');

    console.log('Number of click events:' + events.click.length);
    console.log('Number of change events:' + events.change.length);

});

function anotherEvent(){
    console.log('another event');   
}