使用Chrome的元素检查器来跟踪添加事件侦听器的位置

Question

我想找到一个将事件监听器添加到元素的代码。 Chrome的Element Inspector有助于显示添加了哪些事件，我希望找到添加它的代码并将其禁用。

有没有办法跳转到源代码中发生事件发生的位置？

Answer 1

  

有没有办法跳转到源代码中的位置？

您可以（点击单词jquery.min.js右侧带下划线的document）。问题是，它不会对你有多大帮助，因为它会把你带到jQuery的元素的中心事件处理程序，而不是你想要找到的特定处理程序。 jQuery只在一个元素上挂钩一次;如果有多个处理程序附加jQuery，它自己管理它们（因此它可以确保订单和旧浏览器上的一些其他东西）。

这将是费力的，但你可以覆盖on（bind和其他各种事情最终都会调用）并在你的被覆盖的版本中设置一个断点（过滤你所做的事件＆＃39;对这个元素感兴趣。然后运行您的页面，并在每次遇到断点时查看调用者。

这里是你如何对on进行基本覆盖（在加载jQuery之后立即执行）：

var original = jQuery.fn.on;
jQuery.fn.on = function() {
    /*...your logic here...*/
    return original.apply(this, arguments);
};

...或者在jquery.js文件中交替设置断点（不要尝试使用缩小版）。

替代内部jQuery.event.add函数可能会稍微容易一些，因为所有on预处理都是由该点完成的：

var original = jQuery.fn.on;
jQuery.event.add = function(elem, types) {
    if ((elem matches the one you care about) &&
        /\bclick\b/i.test(types)) {
        debugger;
    }
    return original.apply(this, arguments);
};

例如，如果您只关心click添加到id="foo"的元素，那么：

var original = jQuery.fn.on;
jQuery.event.add = function(elem, types) {
    if (elem.id === "foo" &&          // `elem` is a DOM element, not a jQuery object
        /\bclick\b/i.test(types)) {
        debugger;
    }
    return original.apply(this, arguments);
};