Javascript 使用Chrome'；s元素检查器以跟踪事件侦听器的添加位置

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

是否有一种方法可以跳转到源代码中创建事件的atachement的位置

有没有一种方法可以跳转到源代码中的位置

您可以（单击单词

文档

右侧带下划线的

jquery.min.js

）。问题是，它不会对您有多大帮助，因为它会将您带到jQuery的中心事件处理程序，用于该元素的事件，而不是您要查找的特定处理程序。jQuery只在元素上挂接一次给定事件；如果jQuery附带了多个处理程序，它将自己管理它们（因此它可以在旧浏览器上确保顺序和其他一些事情）

这会很费劲，但您可以覆盖上的

（绑定

和其他各种东西最终都会调用），并在覆盖的版本中设置断点（过滤您感兴趣的事件，以及可选的元素）。然后运行页面，并在每次遇到断点时查看调用方

下面是如何在上（加载jQuery后立即）执行基本的

覆盖：

…或者在
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”
的元素，则：

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

感谢您的回复，代码非常清晰，我只是不知道“加载jQuery后立即”在哪里@Keren:在

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