1

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

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

使用断点或使用控制台时，您无法通过浏览 DOM 元素的属性（在Chrome 的开发人员工具或类似工具中）找到该单击事件，例如：

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 的更具可读性和易于编写的解决方案？

另请参阅：如何使用 Firebug（或类似工具）调试 JavaScript/jQuery 事件绑定

4

2 回答 2

0

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

视觉事件

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

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

除了有助于调试您自己的代码之外，Visual Event 还可以用作一种教育工具，显示已创建的网站数量。

Visual Event 是开源软件 (GPLv2)，Git 存储库托管在GitHub 上，供您根据需要进行分叉和修改！

于 2012-09-21T15:44:17.663 回答
0

检查这个[FIDDLE]

我为每个图像添加了两个事件，单击和鼠标输入

您需要传递事件参数（在本例中为 e）以获取所选元素的属性..

如果您在 debugger() 函数命中时放置一个调试点，请使用 Chrome 开发人员工具。您可以将鼠标悬停在 e 参数上，其中有一个名为 handleObj的属性。如果单击该属性，您可以看到事件的类型那叫函数..

您还拥有类型属性中当前对象的信息..

于 2012-09-21T15:58:09.330 回答