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

Question

我正在从事的项目中，jQuery 中的许多遗留代码在许多不同的地方创建了 onChange、onClick 处理程序。当运行应用程序时 - 我看到了各种奇怪的功能，这让我花了一些时间来逆向工程。 & 找到动作的位置。

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

更新：主要问题是，处理程序一直在添加和删除。有时选择器并不是那么微不足道（例如 3rd child of tr under specific class）。我确实知道如何使用 dev-tools，我正在寻找缩短逆向工程方式并到达处理程序 created/added.

调用堆栈中正确位置的智能方法

Answer 1

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

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/

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

How to catch event handlers created by jquery

javascript

jquery

google-chrome-devtools