javascript - 在 Chrome 开发工具(或类似工具)中调试时如何查找给定范围内的所有 jQuery 事件

Question

如果您添加了 jQuery 事件，例如click() :

$(element).click(function() {
    debugger;
    //Some code
});

您无法通过 browsing a DOM element's properties 找到该点击事件(在Chrome's Developer Tools或类似)使用断点或使用控制台时，例如:

console.log(element);

但是，我发现如果你这样做，你可以找到元素的事件:

//Finds all events for <img> tags within the scope of
//the HTML-element with the id "container".
var elementsToFindEventsFor = $("img", $("#container"));
var events = [];
$(elementsToFindEventsFor).each(function(i, element) {
    events.push($._data(element, "events"));
});
console.log(events);

jsFiddle:http://jsfiddle.net/Muskar/Mf9Eb/

这使您可以在调试时浏览返回元素上的事件，但编写 5 行代码进行调试不太方便。

所以我很好奇，看看 jQuery API 是否有更多我无法找到的可读且易于编写的解决方案？

Also see: How to debug JavaScript/jQuery event bindings with Firebug (or similar tool)

Answer 1

Allan Jardine 为此目的编写了一个出色的书签:

Visual Event

Visual Event 是一个开源 Javascript 书签，它提供有关附加到 DOM 元素的事件的调试信息。视觉事件显示:

• 哪些元素附加了事件
• 附加到元素的事件类型
• 触发将与事件一起运行的代码
• 定义附加函数的源文件和行号(仅限 Webkit 浏览器和 Opera)

除了可用于调试您自己的代码之外，Visual Event 还可用作教育工具，显示已创作了多少个网站。

Visual Event 是开源软件 (GPLv2)，Git 存储库托管于 GitHub供您按照自己的意愿 fork 和修改!