jQuery中dom元素上绑定的事件详解


Posted in Javascript onApril 24, 2015

作为技术狂热分子的职业本能,看到一个技术产品的功能,总会忍不住想知道它是怎么被实现的。比如我每每看到别人网站一个很炫的界面或者很酷的功能,就忍不住打开了浏览器的控制台。。。

好,不扯远,说说当你想看到网站上某个元素绑定的事件函数的代码时应该怎么做吧。

查看原生绑定的事件函数代码

所谓原生就是通过addEventListener方法绑定到dom元素上。这个好办:

审查绑定事件的元素(对着它右键->审查元素)在弹出的Elements视图的控制台,右侧点击“Event Listeners”页签然后就能看到所有绑定在该元素的事件了,点开后,找到handler,右击鼠标,选择“Show Function Definition”菜单。就能跳到绑定到该元素的事件函数的源码位置了。有图有真相:

jQuery中dom元素上绑定的事件详解

查看jquery绑定的事件函数代码

嗯,我知道,你遇到问题了吧,所有jquery绑定的事件函数,你通过上面的方式,跳到的都是jquery的代码,而且永远是那一个地方。看了跟没看一样。所以,宝哥在这里教你针对jquery的查看方式。

还是审查元素点击“Properties”视图。选择第一个,展开找到一个‘jQueryxxxxx(一串数字)'这样的属性,记住它的值(一般是一个数字)N

jQuery中dom元素上绑定的事件详解

然后左侧切到Console视图,在控制台里执行$.cache[N],这里的N是前面那个属性值

jQuery中dom元素上绑定的事件详解

然后就会出来绑定在这个元素上的东西了。展开events,里面就有你想要查看的真实函数了。右击具体事件下的handle后面的function…,然后选择“Show Function Definition”就可以看到了。

jQuery中dom元素上绑定的事件详解

例子=》http://demo.sudodev.cn/frontend/jqDetect查看jquery2.x版本绑定的事件函数代码

好的,我知道,你肯定又遇到问题了。因为当你使用的jquery2.x版本的jquery时,上面的这个方法又不work了,原因是2.x的代码架构变了。其实2.x版本的事件仍然是用的cache机制,但不像1.x版本暴露到外面去了,而是封装起来,并且存在了闭包对象data_priv中,而且一般使用的是jquery的压缩版本,这个data_priv名字你也无法查看到。所以在查看过jquery2.x版本的源码后,宝哥教你如何定位它:

直接进入控制台,构造一个包含jQuery的对象,以便在控制台里查看jQuery。比如输入var o={j:$},这样做的好处是,你执行后能在控制吧里查看jQuery的所有属性

jQuery中dom元素上绑定的事件详解

然后在控制台展开jQuery(这里是j)对象,找到_queueHooks这个方法,看到它的代码大概是“return L.get(a,c)||L.access…”这种,记住这个L也可能是不是L)

jQuery中dom元素上绑定的事件详解

展开任意一个j下面首层的对象,比如就是上面的_queueHooks,找到展开,再展开下面的Closure,找到前面的那个“L”对句,对着它后面的字母右键,选择“Store as Global Variable”

jQuery中dom元素上绑定的事件详解

然后控制台里就打出一个tempX的对象,它就那个装着cache的东东。假设它叫temp1。那个temp1有个get方法可以直接获取它的cache对象。假如你要查看绑定事件的对象的id叫clickMe。那执行temp1.get($('#clickMe').get(0))(或者temp1.get(document.querySelector('#clickMe'))))就会打出跟上面jquery1.x版本相当的东西

jQuery中dom元素上绑定的事件详解

后面就跟上面jquery1.x的方式一样例子=》http://demo.sudodev.cn/frontend/jq2Detect另:

以上默认是在chrome浏览器下做的操作,其实在Firefox下也是类似的,相信作为一个技术人员,你应该能举一反三的。至于IE嘛,呃…当我没说哈。:)

更新:

1.为省去查看属性的麻烦,jquery1.x可以直接在控制台执行$.cache[$('#clickMe').get(0)[$.expando]]输出元素上绑定的东西,而不是先去查看元素上jQueryxxxxxxx的属性的值了

2.经过一篇查阅和测试。有一个新的目前最省力而且jquery1,jquery2都适用的办法是,直接在控制台输入$._data($('#clickMe').get(0)),即可把绑定在元素的东西都输出来。但是,从jquery2的源码的注释中发现,$._data会在之后的新版本中废除。所以上面介绍的方法仍然是很有价值的。授人以鱼,不如授人以渔嘛,:)

Javascript 相关文章推荐
JavaScript在IE中“意外地调用了方法或属性访问”
Nov 19 Javascript
javascript arguments 传递给函数的隐含参数
Aug 21 Javascript
TinyMCE 新增本地图片上传功能
Nov 05 Javascript
js判断运行jsp页面的浏览器类型以及版本示例
Oct 30 Javascript
js实现点击后将文字或图片复制到剪贴板的方法
Aug 04 Javascript
jquery和css3实现的炫酷时尚的菜单导航
Sep 01 Javascript
jQuery中的pushStack实现原理和应用实例
Feb 03 Javascript
jQuery与js实现颜色渐变的方法
Dec 30 Javascript
JavaScript代理模式原理与用法实例详解
Mar 10 Javascript
vscode 配置vue+vetur+eslint+prettier自动格式化功能
Mar 23 Javascript
JavaScript枚举选择jquery插件代码实例
Nov 17 jQuery
vue使用wavesurfer.js解决音频可视化播放问题
Apr 04 Vue.js
原生js制作简单的数字键盘
Apr 24 #Javascript
Javascript中arguments和arguments.callee的区别浅析
Apr 24 #Javascript
Node.js实现Excel转JSON
Apr 24 #Javascript
js中for in语句的用法讲解
Apr 24 #Javascript
JScript中的条件注释详解
Apr 24 #Javascript
HTML5+setCutomValidity()函数验证表单实例分享
Apr 24 #Javascript
js闭包实现按秒计数
Apr 23 #Javascript
You might like
Yii框架在页面输出执行sql语句以方便调试的实现方法
2014/12/24 PHP
PHP-FPM之Chroot执行环境详解
2015/08/03 PHP
PHP上传图片类显示缩略图功能
2016/06/30 PHP
PHP框架自动加载类文件原理详解
2017/06/06 PHP
php解决安全问题的方法实例
2019/09/19 PHP
Thinkphp集成抖音SDK的实现方法
2020/04/28 PHP
PHP如何使用cURL实现Get和Post请求
2020/07/11 PHP
kmock javascript 单元测试代码
2011/02/06 Javascript
jquery each()源代码
2011/02/14 Javascript
JS字符串处理实例代码
2013/08/05 Javascript
javascript中对Attr(dom中属性)的操作示例讲解
2013/12/02 Javascript
nodejs批量修改文件编码格式
2015/01/22 NodeJs
jQuery动画与特效详解
2015/02/01 Javascript
jQuery验证元素是否为空的两种常用方法
2015/03/17 Javascript
JavaScript中连接操作Oracle数据库实例
2015/04/02 Javascript
js从数组中删除指定值(不是指定位置)的元素实现代码
2016/09/13 Javascript
读Javascript高性能编程重点笔记
2016/12/21 Javascript
js图片上传的封装代码
2017/08/01 Javascript
angular或者js怎么确定选中ul中的哪几个li
2017/08/16 Javascript
vue-cli3.0配置及使用注意事项详解
2018/09/05 Javascript
vue如何自动化打包测试环境和正式环境的dist/test文件
2019/06/06 Javascript
微信小程序 授权登录详解(附完整源码)
2019/08/23 Javascript
小程序实现长按保存图片的方法
2019/12/31 Javascript
Vue将props值实时传递 并可修改的操作
2020/08/09 Javascript
[47:45]DOTA2-DPC中国联赛 正赛 Phoenix vs Dragon BO3 第一场 2月26日
2021/03/11 DOTA
python函数的万能参数传参详解
2019/07/26 Python
python将数组n等分的实例
2019/12/02 Python
在tensorflow实现直接读取网络的参数(weight and bias)的值
2020/06/24 Python
世界上最大的曲棍球商店:Pro Hockey Life
2017/10/30 全球购物
MySQL面试题
2014/01/12 面试题
资产评估专业学生的自我鉴定
2013/11/14 职场文书
外贸销售员求职的自我评价
2013/11/23 职场文书
父亲婚礼答谢词
2015/01/04 职场文书
实习报告怎么写
2019/06/20 职场文书
MySQL时间盲注的五种延时方法实现
2021/05/18 MySQL
Redis+Lua脚本实现计数器接口防刷功能(升级版)
2022/02/12 Redis