查看元素的所有dom事件

Question

我有一个jQuery UI datepicker,当你点击一个日期时,清除我的URL哈希#,并且不会更改文本框中的日期.

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

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

Answer 1

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

1. 点击页面上的Chrome
2. 右键单击jQuery UI datepicker中的日期,然后选择"inspect element".
3. 在最右边,有各种各样的手风琴.底部附近是"事件听众".(当前版本的Chrome开发工具非常聪明,包括查询jQuery的处理程序链.)
4. 展开"事件监听器"树项,您将看到与该元素相关的挂钩事件列表,即使未在该元素上专门设置处理程序.(例如,如果您使用问题上的upvote按钮执行此操作,则会看到它click同时用于a.vote-up-off和document.)因此,您可以启动它们以查看直接和委派处理程序与该元素的事件相关的内容.

除此之外,您可以使用未缩小版本的jQuery,并在单击datepicker中的日期时遍历事件派发.

当然,Gabe展示了如何通过未记录的jQuery events数据获取特定于jQuery的处理程序.(这不会显示委派的处理程序(除非你走过祖先树),并且不会向你显示可能附加的非jQuery处理程序,但它仍然是非常有用的东西.)