查看元素的所有DOM事件

Question

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

我认为还有其他JavaScript实用程序在某个地方具有某种委派事件也被调用，抛出错误并杀死jquery处理程序。

如何逐步执行，并查看所有委派事件匹配此dom元素。

- Adam Rackis

---

不太清楚，但您可以打开Chrome的开发工具，转到“脚本”选项卡，在日期选择器代码中设置断点，并逐步执行JS代码以查看执行了什么。 - sachleen

请查看此问题：https://dev59.com/LXRB5IYBdhLWcg3w-8E9 - dotcoder

Answer 1

Chrome开发者工具可以帮助解决此问题：

1. 将 Chrome 导向该页面
2. 右键单击 jQuery UI 日期选择器中的日期，然后选择“检查元素”。
3. 在极右侧，有一个带有各种内容的手风琴。靠近底部的是“事件侦听器”。（当前版本的 Chrome 开发者工具非常聪明，包括查询 jQuery 的处理程序链。）
4. 展开“事件侦听器”树项，您将看到与该元素相关的挂钩事件列表，即使处理程序没有特别设置在该元素上。（例如，如果您在问题的赞同按钮上执行此操作，则会看到点击被挂钩在 a.vote-up-off 和 document 上。）因此，您可以查看这些内容，以了解与该元素的事件相关的直接和委托处理程序。

除此之外，您还可以使用未压缩的 jQuery 版本，并在单击日期选择器中的日期时探索事件分派。

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

- T.J. Crowder

---

你是众人中的神，TJ。一如既往地感谢你。 - Adam Rackis

@AdamRackis：哈哈，没问题，希望能帮到你。 - T.J. Crowder

Answer 2

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

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

- Gabe

---

这个会不会也捕获委托事件呢？例如 $(document).on("click", "a", function() { ... }); 如果 #myelement 是一个锚点，它会显示这个处理程序吗？ - Adam Rackis

@AdamRackis：不，它不会。它只会显示直接挂钩的处理程序，而不是可能也会被调用的树上更高层次的处理程序：http://jsbin.com/ujipuz 当然，这并不意味着您不能遍历元素的祖先并为每个祖先重复该过程，这将为您提供完整的图片。+1 给 Gabe - T.J. Crowder

我误解了，以为你在寻找一个编程解决方案而不是一个调试工具 :) - Gabe

@Gabe - 不用担心 - 你的回答实际上很有用，即使它不适用于我这里的特定情况。谢谢。 - Adam Rackis