jQuery 事件源码定位
如何快速定位到绑定的事件代码
在 chrome 的控制台里有个 Event Listeners,这里会显示你所选择元素的事件,如果是原生事件,他会直接显示,
你点击一下事件就会跳到对应代码里了,可是 jQuery 绑定的事件却不是这样的,你点击后只会跳到 jQuery 源码里,
min后的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>
如果不出意外,你可以在控制台看到这样的显示结果
展开后可以看到绑定的函数参数里的版本和当前版本是对应的。
可以看到
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事件的第一个事件源码地址
复制到控制台,按回车运行后,不出意外可以看到下面这个结果。
有没有看到右下角的 1.html:36 这个就是源码所在的文件和对应的行号了。
你可以直接点击 1.html:36 跳到对应的代码处,是不是觉得很给力啊。
上面方法适用于 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 的事件源码地址
不出意外可以看到下面这个结果。
从操作来说,不管是 1.2.6-1.4 还是 1.5+ 版本 都差不多,只是 1.5+ 利用数组模式管理函数句柄了,比较方便。
转载于:https://www.cnblogs.com/wyongqi/p/7463650.html
jQuery 事件源码定位相关推荐
- 深入学习jquery源码之高德地图组件的使用
深入学习jquery源码之高德地图组件的使用 高德地图组件是一类高度模块化的LBS服务组件,开发者通过调用相应标签便可轻松实现诸如在地图上标注点.查找附近poi.公交/驾车线路规划等功能.该类组件仅针 ...
- jQuery源码解析(架构与依赖模块)
jQuery设计理念 引用百科的介绍: jQuery是继prototype之后又一个优秀的Javascript框架.它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF 1. ...
- jQuery源码解析(架构与依赖模块)第一章 理解架构
1-1 jQuery设计理念 引用百科的介绍: jQuery是继prototype之后又一个优秀的Javascript框架.它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, F ...
- jQuery源码学习之Callbacks
jQuery源码学习之Callbacks jQuery的ajax.deferred通过回调实现异步,其实现核心是Callbacks. 使用方法 使用首先要先新建一个实例对象.创建时可以传入参数flag ...
- js便签笔记(9)——解读jquery源码时记录的一些知识点
近来一直利用业余时间在看jquery2.1.1源码,大约看了两千行了.平时看的时候,做了一些笔记,贴出来分享. 1. Array.prototype.slice.call 可以将伪数组转化为真正的数组 ...
- jQuery源码学习(1)——addClass
最近比较闲,寻思着学习下jQuery源码,看了好多博客,很多都讲的比较详细.jQuery虽然只有那么200多K,但内容却比较丰富,对于我这样一个js菜鸟,看起来相当吃力.骨头太大,只能化整为零,从简单 ...
- jquery源码学习笔记一:总体结构
练武不练功,到老一场空.计算机也一样. 计算机的功,就是原理.如果程序员只会使用各种函数,各种框架,而不知其原理,顶多熟练工人而已.知其然,更要知其所以然. jquery我们用得很爽,但它究竟咋实现的 ...
- Jquery源码分析-整体结构
最近在学习Jquery的最新的源码,Jquery-3.3.1版本.网上有很多对jquery解析的文章.但是我还是要自己去尝试着看一篇jquery的源码.本系列博客用来记录其中的过程,并同大家分享.本次 ...
- jQuery 源码分析第一篇之入口源码
目前阅读的是jQuery 1.11.3的源码,有参考nuysoft的资料.原来比较喜欢在自己的Evernote上做学习基类,并没有在网上写技术博客的习惯,现在开始学习JS的开源代码,想跟大家多交流,希 ...
- jQuery源码分析-each函数
本文部分截取自且行且思 jQuery.each方法用于遍历一个数组或对象,并对当前遍历的元素进行处理,在jQuery使用的频率非常大,下面就这个函数做了详细讲解: 复制代码代码 /*! * jQuer ...
最新文章
- 一盘红烧肉告诉你,本科、硕士和博士区别太大了!
- 速卖通店铺流量少的原因分析以及解决办法
- 专注于元宇宙后 Meta今年将取消举办F8开发者大会
- 清明节,如何用代码让网页变灰
- 0基础学单片机要知道51单片机CPU的一些相关构成以及作用
- Cmakelists 与gcc 调用so库文件,几个名词解释
- 解读 | 关于阿里巴巴架构大调整,有 7 个重点值得特别关注
- echart获取geoJson格式世界各国地图的资源,世界地图,世界各国分区显示,精确到乡镇一级资源
- 【文献阅读】 2019-IJCAI-Sequential Recommender Systems Challenges, Progress and Prospects
- 企业私有云建设需求分析
- 神来之笔之傅里叶变换(频谱)
- gateway请求就是404 nacos+gateway 搭建网关gateway
- 送给大一新生的一些话
- 机器学习之决策树实践:隐形眼镜类型预测
- 积分符号内取微分的方法
- GPU占用率过高致错failed to create cublas handle: CUBLAS_STATUS_ALLOC_FAILED
- echarts水波球特效(附带外边框进度条)
- 常见经典目标检测算法
- 详解AD(Altium Designer)中的机械层 - 1
- 计算机空格键作用,电脑键盘空格键的使用方法及技巧
热门文章
- python蚁群算法可视化_蚁群算法原理及其实现(python)
- 在Unity进行平台打包发布的时候需要注意的一些细节问题
- 哪些计算机的应用需采用多媒体技术,计算机多媒体技术的应用现状与发展前景...
- java解释器是哪个命令_宽恕命令解释器的最佳Java库(IES)
- 线性模型第3讲:Lasso方法
- 【Python实例第18讲】affinity propagation聚类算法
- 关于平方根倒数速算法(雷神之锤3,牛B)
- 求解偏微分方程开源有限元软件deal.II学习--Step 13
- d3js fill与class优先级
- 【转】Roberts 算子