javascript - 查看元素的所有 dom 事件

Question

我有一个 jQuery UI 日期选择器，当您单击日期时，将我的 URL 哈希清除为#，并且不会更改文本框中的日期。

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

我如何单步执行或查看所有委托事件与此 dom 元素匹配。

Answer 1

Chrome 的开发工具可以帮助解决这个问题：

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

除此之外，您可以使用未缩小版本的 jQuery 并在您单击日期选择器中的日期时遍历事件调度。

当然，Gabe 展示了如何通过未记录的 jQueryevents数据获取特定于 jQuery 的处理程序。（这不会向您显示委托的处理程序（除非您遍历祖先树），也不会向您显示可能附加的非 jQuery 处理程序，但它仍然是非常有用的东西。）

Answer 2

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

jsFiddle

例子：

HTML

<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');   
}