javascript - 使用 Chrome 的 Element Inspector 跟踪事件监听器的添加位置

Question

我想找到将事件监听器添加到元素的代码。 Chrome 的元素检查器有助于显示添加了哪些事件，我想找到添加该事件的代码并禁用它。

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

Answer 1

Is there a way to jump to the location in source code?

您可以(点击document一词右侧带下划线的jquery.min.js)。问题是，它不会对您有太大帮助，因为它会将您带到该元素的该事件的 jQuery 中央事件处理程序，而不是您想要查找的特定处理程序。 jQuery 仅在元素上 Hook 一次给定事件；如果 jQuery 附加了多个处理程序，它会自行管理它们(因此它可以确保旧浏览器上的顺序和其他一些事情)。

这会很费力，但您可以覆盖on(bind和各种其他东西最终都会调用)并在覆盖的版本中设置一个断点(过滤您感兴趣的事件，以及可选的元素)。然后运行您的页面并在每次遇到断点时查看调用者。

以下是对 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);
};

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

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);
};