时间戳

首页 > 解决方案 > 如何捕获由 jquery 创建的事件处理程序

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

问题描述

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

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

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

标签： javascriptjquerygoogle-chrome-devtools

解决方案

您可以用一个拦截事件处理程序注册的函数覆盖该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/

推荐阅读