浅谈 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 相关文章推荐
Javascript new Date().valueOf()的作用与时间戳由来详解
Apr 24 Javascript
调用HttpHanlder的几种返回方式小结
Dec 20 Javascript
angularjs实现文字上下无缝滚动特效代码
Sep 04 Javascript
vue.js通过自定义指令实现数据拉取更新的实现方法
Oct 18 Javascript
基于js实现二级下拉联动
Dec 17 Javascript
JS实现加载和读取XML文件的方法详解
Apr 24 Javascript
在Vue中使用echarts的实例代码(3种图)
Jul 10 Javascript
JS+canvas绘制的动态机械表动画效果
Sep 12 Javascript
深入浅析vue组件间事件传递
Dec 29 Javascript
Vue中使用clipboard实现复制功能
Sep 05 Javascript
微信小程序如何实现精确的日期时间选择器
Jan 21 Javascript
微信小程序实现点击导航标签滚动定位到对应位置
Nov 19 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
修复ShopNC使用QQ 互联时提示100010 错误
2015/11/08 PHP
CodeIgniter配置之config.php用法实例分析
2016/01/19 PHP
PHP解压tar.gz格式文件的方法
2016/02/14 PHP
PHP HTTP 认证实例详解
2016/11/03 PHP
php用xpath解析html的代码实例讲解
2019/02/14 PHP
JS 时间显示效果代码
2009/08/23 Javascript
jquery pagination插件实现无刷新分页代码
2009/10/13 Javascript
在多个页面使用同一个HTML片段的代码
2011/03/04 Javascript
基于Jquery插件开发之图片放大镜效果(仿淘宝)
2011/11/19 Javascript
jquery 年会抽奖程序
2011/12/22 Javascript
JavaScript判断一个字符串是否包含指定子字符串的方法
2015/03/18 Javascript
JavaScript基础知识及常用方法总结
2016/01/10 Javascript
用jQuery向div中添加Html文本内容的简单实现
2016/07/13 Javascript
JS判断是否在微信浏览器打开的简单实例(推荐)
2016/08/24 Javascript
jquery版轮播图效果和extend扩展
2017/07/18 jQuery
微信小程序多列选择器range-key使用详解
2020/03/30 Javascript
JS实现生成由字母与数字组合的随机字符串功能详解
2018/05/25 Javascript
vue进入页面时滚动条始终在底部代码实例
2019/03/26 Javascript
纯JS开发baguetteBox.js响应式画廊插件
2020/06/28 Javascript
Python的地形三维可视化Matplotlib和gdal使用实例
2017/12/09 Python
python实现Flappy Bird源码
2018/12/24 Python
Python流行ORM框架sqlalchemy安装与使用教程
2019/06/04 Python
Python 3 实现定义跨模块的全局变量和使用教程
2019/07/07 Python
利用Pytorch实现简单的线性回归算法
2020/01/15 Python
Python爬虫爬取博客实现可视化过程解析
2020/06/29 Python
快速了解Python开发环境Spyder
2020/06/29 Python
详解matplotlib中pyplot和面向对象两种绘图模式之间的关系
2021/01/22 Python
canvas像素画板的实现代码
2018/11/21 HTML / CSS
自荐信模版
2013/10/24 职场文书
教师党员自我剖析材料
2014/09/29 职场文书
公民授权委托书
2014/10/15 职场文书
销售经理助理岗位职责
2015/04/13 职场文书
学校会议通知范文
2015/04/15 职场文书
Python实现byte转integer
2021/06/03 Python
Python3.10的一些新特性原理分析
2021/09/15 Python
win10重装系统后上不了网怎么办 win10重装系统网络故障的解决办法
2022/07/23 数码科技