浅谈 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 相关文章推荐
麦鸡的TAB切换功能结合了javascript和css
Dec 17 Javascript
BootStrap使用popover插件实现鼠标经过显示并保持显示框
Jun 23 Javascript
修改jquery中dialog的title属性方法(推荐)
Aug 26 Javascript
JS异步文件分片断点上传的实现思路
Dec 25 Javascript
JavaScript常用正则函数用法示例
Jan 23 Javascript
基于vue实现分页/翻页组件paginator示例
Mar 09 Javascript
微信小程序实战之自定义模态弹窗(8)
Apr 18 Javascript
解决Mac下安装nmp的淘宝镜像失败问题
May 16 Javascript
Vue脚手架的简单使用实例
Jul 10 Javascript
vue2.0获取鼠标位置的方法
Sep 13 Javascript
适合前端Vue开发童鞋的跨平台Weex的使用详解
Oct 16 Javascript
vue+swiper实现左右滑动的测试题功能
Oct 30 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与javascript的两种交互方式
2006/10/09 PHP
discuz程序的PHP加密函数原理分析
2011/08/05 PHP
php使用curl和正则表达式抓取网页数据示例
2014/04/13 PHP
JavaScript判断密码强度(自写代码)
2013/09/06 Javascript
javascript ajax 仿百度分页函数
2013/10/29 Javascript
js写的方法实现上传图片之后查看大图
2014/03/05 Javascript
Javascript MVC框架Backbone.js详解
2014/09/18 Javascript
Javascript中判断一个值是否为undefined的方法详解
2016/09/28 Javascript
Node.js包管理器Yarn的入门介绍与安装
2016/10/17 Javascript
AngularJS实现使用路由切换视图的方法
2017/01/24 Javascript
d3.js实现立体柱图的方法详解
2017/04/28 Javascript
JavaScript限制在客户区可见范围的拖拽(解决scrollLeft和scrollTop的问题)(2)
2017/05/17 Javascript
基于vue组件实现猜数字游戏
2020/05/28 Javascript
解决Nodejs全局安装模块后找不到命令的问题
2018/05/15 NodeJs
解决vue 引入子组件报错的问题
2018/09/06 Javascript
详解node字体压缩插件font-spider的用法
2018/09/28 Javascript
ES6 Iterator接口和for...of循环用法分析
2019/07/31 Javascript
JS document内容及样式操作完整示例
2020/01/14 Javascript
vue props 单项数据流实例分享
2020/02/16 Javascript
原生JavaScript实现贪吃蛇游戏
2020/11/04 Javascript
[10:18]2018DOTA2国际邀请赛寻真——找回自信的TNCPredator
2018/08/13 DOTA
Python中__call__用法实例
2014/08/29 Python
编写Python脚本抓取网络小说来制作自己的阅读器
2015/08/20 Python
将Emacs打造成强大的Python代码编辑工具
2015/11/20 Python
详解设计模式中的工厂方法模式在Python程序中的运用
2016/03/02 Python
搭建python django虚拟环境完整步骤详解
2019/07/08 Python
python进程间通信Queue工作过程详解
2019/11/01 Python
VSCode配合pipenv搞定虚拟环境的实现方法
2020/05/17 Python
Feelunique澳大利亚:欧洲的化妆品零售电商
2019/12/18 全球购物
法国在线药房:DoctiPharma
2020/10/21 全球购物
中班开学寄语
2014/04/04 职场文书
实习公司领导推荐函
2014/05/21 职场文书
安全事故隐患排查治理制度
2015/08/05 职场文书
Python数据分析入门之数据读取与存储
2021/05/13 Python
python识别围棋定位棋盘位置
2021/07/26 Python
Jedis操作Redis实现模拟验证码发送功能
2021/09/25 Redis