如何捕获由 jquery 创建的事件处理程序

Question

我正在开发一个项目，其中 jQuery 中的许多遗留代码在许多不同的地方创建 onChange、onClick 处理程序。 运行应用程序时 - 我看到各种奇怪的功能，而不是我需要一段时间来反转 eng。并找到行动的地点。

有没有简单的方法来设置断点并捕获所有或某些特定的jquery.on('... 函数？

更新：主要问题是，处理程序一直在添加和删除。有时选择器不是那么简单（例如特定类下tr 的第三个孩子）。 我确实知道如何使用开发工具，我正在寻找智能方法来缩短逆向工程的方式，并在调用堆栈中找到处理程序创建/添加的正确位置。

Answer 1

您可以使用一个拦截事件处理程序注册的函数、一个包含debugger 语句以及对事件处理程序的调用的函数来覆盖on 函数。像这样：

const oldOn = jQuery.fn.on;
jQuery.fn.extend({
  on(...args) {
    const f = args.pop();
    oldOn.call(this, ...args, function(...args) {
      debugger;
      f.call(this, ...args);
    });
  }
});

jQuery( "#box" ).on( "click", function() {
  console.log( 'clicked' );
});

#box {
  position: relative;
  height: 100px;
  width: 100px;
  background: skyblue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="box"></div>

注意：debugger 不适用于 SO，但适用于 jsfiddle：https://jsfiddle.net/7kr5y2d8/2/