查看元素的所有dom事件 [英] See all dom events for an element

问题描述

我有一个jQuery UI datepicker，当你点击一个日期时，我将我的URL哈希清除到＃，并且不会更改文本框中的日期。 / p>

我假设某些其他JavaScript实用程序某处有某种委托事件也会被调用，抛出错误并终止jquery处理程序。

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

解决方案

Chrome的开发工具可以为您提供帮助：

1. 点击Chrome页面


2. 右键单击jQuery UI datepicker中的日期，然后选择inspect element。


3. 开在最右边，有各种各样的手风琴。底部附近是事件听众。 （Chrome的开发工具的当前版本非常聪明，包括查询jQuery的处理程序链。）


4. 展开事件监听器树项目，您将看到相关的钩子事件列表到该元素，即使处理程序没有专门设置在那个元素上。 （例如，如果您使用问题上的upvote按钮执行此操作，您会看到点击同时隐藏 a.vote-up -off 和 document 。）因此，你可以开始讨论那些直接和委托处理程序与该元素的事件相关的内容。

除此之外，您可以使用未缩小版的jQu​​ery，并在单击datepicker中的日期时完成事件发送。

当然， Gabe已经展示了如何获得jQuery特定的处理程序通过未记录的jQuery 事件数据。 （这不会显示委托处理程序（除非你走过祖先树），并且不会向你显示可能附加的非jQuery处理程序，但它仍然是非常有用的东西。）

I have a jQuery UI datepicker that, when you click on a date, clears my URL hash to #, and doesn't change the date in the textbox.

I assume there's some other JavaScript utility somewhere that has some sort of delegated event that's also being called, throwing an error, and killing the jquery handler.

How can I step through, and or see all delegated events match this dom element.

解决方案

Chrome's dev tools can help with this:

1. Point Chrome at the page
2. Right-click the date in the jQuery UI datepicker and choose "inspect element".
3. On the far right-hand side, there's an accordian with various things. Near the bottom is "Event Listeners". (Current versions of Chrome's dev tools are very smart about this, including querying jQuery's handler chain.)
4. Expand the "Event Listeners" tree item and you'll see a list of hooked events related to that element, even if the handler isn't set specifically on that element. (For instance, if you did this with the upvote button on the question, you'd see that click is hooked both for a.vote-up-off and document.) So you can kick around those to see what direct and delegated handlers relate to that event for that element.

Other than that, you could use the un-minified version of jQuery and walk through the event dispatch when you click the date in the datepicker.

And of course, Gabe's shown how you can get the jQuery-specific handlers via the undocumented jQuery events data. (That won't show you delegated handlers (unless you walk the ancestor tree), and won't show you non-jQuery handlers that might be attached, but it's still pretty useful stuff.)

这篇关于查看元素的所有dom事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！