Question

我正在研究一个项目，其中jQuery中的许多旧代码在许多不同的地方创建onChange和onClick处理程序。在运行该应用程序时-我看到了各种各样的奇怪功能，这比我花了一段时间才能恢复英文。并找到行动地点。

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

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

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创建的事件处理程序

1 个答案: