浅谈 jQuery 事件源码定位问题


Posted in Javascript onJune 18, 2014

昨天群里有人问了个事件源码定位的问题,简单描述下是这样的。

在一个不是自己写的页面上,如何快速定位到他绑定的事件代码在哪?(页面用的是jQuery)
这个问题,说难不难,说简单也没那么简单,万一用的是委托之类也会麻烦点。

在 chrome 的控制台里有个 Event Listeners,这里会显示你所选择元素的事件,如果是原生事件,他会直接显示,
你点击一下事件就会跳到对应代码里了,可是 jQuery 绑定的事件却不是这样的,你点击后只会跳到 jQuery 源码里,
min后的jQuery源码密密麻麻的,看着都眼花。

浅谈 jQuery 事件源码定位问题

浅谈 jQuery 事件源码定位问题

关于jQuery对于事件的管理,大牛们也分析的非常透彻了,我就不??铝耍?蛭?皇俏颐墙裉煲?档闹氐恪?br /> 我们要说的重点是怎么定位到事件源码处。因为jQuery版本众多,而且重构过多次,所以要分情况来说了。

基本上 1.2.6-1.8 和 1.9 两种情况,经过测试,大体上定为下面2个版本
1.2.6-1.8 用  $.data( elem, "events", undefined, true ); 
1.9+ 用  $._data( elem, "events" ); 

PS: 你现在也可以按 F12 打开控制台看看结果,当然也可以复制下面的源码自己测试。
由于谷歌被墙的厉害,所以把cdn换成百度的了。2014-06-07

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>test</title>
  <script src="http://libs.baidu.com/jquery/1.4.0/jquery.js"></script>
</head>

<body>
  <input type="button" id="testbtn" value="testbtn" />
  <script>
    var version = ["1.2.6", "1.3.0", "1.4.0", "1.5.0", "1.6.0", "1.7.0", "1.8.0", "1.9.0", "1.10.0"],
      elem = $("#testbtn")[0], // 待操作的元素
      url, // jquery 地址
      jq = null, // 保存新的jquery句柄
      jqver, // jqury 版本
      fn; // 函数句柄

    for (var i = 0; i < version.length; i++) {
      url = "http://libs.baidu.com/jquery/" + version[i] + "/jquery.min.js";

      $.getScript(url, function() {
        jq = $.noConflict(true); // 释放控制权
        jqver = jq.fn.jquery; // 当前 jquery 版本
        fn = new Function('ver_' + jqver.replace(/\./g, "_"), ''); // 生成类似 function (ver_1_9_0) {} 这样的函数
        jq(elem).click(fn).click(fn).bind("test", fn); // 普通事件和自定义事件

        console.log(
          jqver,
          jq.data && jq.data(elem, "events", undefined, true),
          jq._data && jq._data(elem, "events")
        );
      });
    }
  </script>
</body>
</html>

如果不出意外,你可以在控制台看到这样的显示结果
浅谈 jQuery 事件源码定位问题

展开后可以看到绑定的函数参数里的版本和当前版本是对应的。
浅谈 jQuery 事件源码定位问题

 

可以看到
1.2.6-1.4 只支持  $.data( elem, "events", undefined, true ); 
1.5-1.8 两者都支持
1.9-1.11 只支持  $._data( elem, "events" ); 

那么我们可以写个函数简单的兼容下,然他全兼容即可

function lookEvents (elem) {
  return $.data ? $.data( elem, "events", undefined, true ) : $._data( elem, "events" );
}

现在调用 lookEvents 就可以得到对应的 events 对象了。

虽然可以看到了我们绑定的自定义事件,但还是不知道他在哪个文件哪一行啊。

下面我们就来定位他的具体位置,我们就拿 1.7 的试试。
PS: 下面操作都是在控制台完成,我的环境是 chrome 34

function lookEvents (elem) {
  return $.data ? $.data( elem, "events", undefined, true ) : $._data( elem, "events" );
}
var event = lookEvents($("#testbtn")[0]); // 获取绑定的事件
event.click[0].handler // 获取click事件的第一个事件源码地址

复制到控制台,按回车运行后,不出意外可以看到下面这个结果。

浅谈 jQuery 事件源码定位问题

有没有看到右下角的 1.html:36 这个就是源码所在的文件和对应的行号了。
你可以直接点击 1.html:36 跳到对应的代码处,是不是觉得很给力啊。

浅谈 jQuery 事件源码定位问题

上面方法适用于 1.5+ 版本的 jQuery,对于 1.2.6-1.4 的版本,稍微有点不同,不过也非常简单。

function lookEvents (elem) { return $.data ? $.data( elem, "events", undefined, true ) : $._data( elem, "events" );}var event = lookEvents($("#testbtn")[0]); // 获取绑定的事件event.click; // 查看有几个click事件,如果要查看其他事件直接输入 event 然后回车即可

上面看到的编码就是对应事件句柄了,比如我这的 1,2 事件(如下图显示), 这个编号不是按顺序的,这个要注意。
 event.click[1] // 获取click事件的 id是1 的事件源码地址 
不出意外可以看到下面这个结果。

浅谈 jQuery 事件源码定位问题

从操作来说,不管是 1.2.6-1.4 还是 1.5+ 版本 都差不多,只是 1.5+ 利用数组模式管理函数句柄了,比较方便。
好了,该说的都说完了,小伙伴们各种测试起来吧。

Javascript 相关文章推荐
arguments对象
Nov 20 Javascript
jquery $.ajax()取xml数据的小问题解决方法
Nov 20 Javascript
JavaScript onkeydown事件入门实例(键盘某个按键被按下)
Oct 17 Javascript
使用iojs的jsdom库实现同步系统时间
Apr 20 Javascript
jQuery插件FusionCharts绘制的3D饼状图效果实例【附demo源码下载】
Mar 03 Javascript
jQuery时间验证和转换为标准格式的时间格式
Mar 06 Javascript
JavaScript切换搜索引擎的导航网页搜索框实例代码
Jun 11 Javascript
浅析java线程中断的办法
Jul 29 Javascript
微信小程序异步API为Promise简化异步编程的操作方法
Aug 14 Javascript
微信小程序使用gitee进行版本管理
Sep 20 Javascript
javascript使用substring实现的展开与收缩文字功能示例
Jun 17 Javascript
深入浅出vue图片路径的实现
Sep 04 Javascript
js调试系列 源码定位与调试[基础篇]
Jun 18 #Javascript
js调试系列 控制台命令行API使用方法
Jun 18 #Javascript
js调试系列 初识控制台
Jun 18 #Javascript
ext前台接收action传过来的json数据示例
Jun 17 #Javascript
Ext GridPanel加载完数据后进行操作示例代码
Jun 17 #Javascript
ext中store.load跟store.reload的区别示例介绍
Jun 17 #Javascript
基于jquery实现的文字向上跑动类似跑马灯的效果
Jun 17 #Javascript
You might like
php 模拟post_验证页面的返回状态(实例讲解)
2013/10/28 PHP
PHPExcel简单读取excel文件示例
2016/05/26 PHP
php 解决扫描二维码下载跳转问题
2017/01/13 PHP
php实现在线考试系统【附源码】
2018/09/18 PHP
jquery trim() 功能源代码
2011/02/14 Javascript
关于scrollLeft,scrollTop的浏览器兼容性测试
2013/03/19 Javascript
JavaScript 事件绑定及深入
2015/04/13 Javascript
javascript倒计时效果实现
2015/11/12 Javascript
JavaScript中的this使用详解
2016/07/27 Javascript
JavaScript DOM节点操作方法总结
2016/08/23 Javascript
Vuejs第十三篇之组件——杂项
2016/09/09 Javascript
canvas绘制多边形
2017/02/24 Javascript
js轮播图透明度切换(带上下页和底部圆点切换)
2017/04/27 Javascript
react-native使用react-navigation进行页面跳转导航的示例
2017/09/07 Javascript
Vue 多层组件嵌套二种实现方式(测试实例)
2017/09/08 Javascript
vuejs实现递归树型菜单组件
2018/01/13 Javascript
使用Vue开发一个实时性时间转换指令
2018/01/17 Javascript
Vue iview-admin框架二级菜单改为三级菜单的方法
2018/07/03 Javascript
vue 权限认证token的实现方法
2018/07/17 Javascript
在Python程序中操作文件之isatty()方法的使用教程
2015/05/24 Python
Python实现删除文件中含“指定内容”的行示例
2017/06/09 Python
详解Python实现多进程异步事件驱动引擎
2017/08/25 Python
python实现log日志的示例代码
2018/04/28 Python
Python使用pylab库实现绘制直方图功能示例
2018/06/01 Python
django框架之cookie/session的使用示例(小结)
2018/10/15 Python
python3使用matplotlib绘制散点图
2019/03/19 Python
新手入门学习python Numpy基础操作
2020/03/02 Python
关于h5中的fetch方法解读(小结)
2017/11/15 HTML / CSS
Microsoft Advertising美国:微软搜索广告
2019/05/01 全球购物
英国水族馆和池塘用品购物网站:Warehouse Aquatics
2019/08/29 全球购物
阅兵口号
2014/06/19 职场文书
无保留意见审计报告
2015/06/05 职场文书
创业计划书之旅游网站
2019/09/06 职场文书
Html分层的box-shadow效果的示例代码
2021/03/30 HTML / CSS
python实现简单的三子棋游戏
2022/04/28 Python
Win10多屏显示如何设置?Win10电脑多屏显示设置操作方法
2022/07/07 数码科技