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 相关文章推荐
JQuery上传插件Uploadify使用详解及错误处理
Apr 27 Javascript
javascript打印大全(打印页面设置/打印预览代码)
Mar 29 Javascript
iframe子页面与父页面在同域或不同域下的js通信
May 07 Javascript
script标签属性用type还是language
Jan 21 Javascript
Js数组排序函数sort()介绍
Jun 08 Javascript
Node.js事件驱动
Jun 18 Javascript
jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果
Aug 25 Javascript
JavaScript获取服务器端时间的方法
Nov 29 Javascript
JavaScript使用readAsDataURL读取图像文件
May 10 Javascript
vue使用laydate时间插件的方法
Nov 14 Javascript
Vue+Typescript中在Vue上挂载axios使用时报错问题
Aug 07 Javascript
javascript 内存模型实例详解
Apr 18 Javascript
原生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
php中将html中的br换行符转换为文本输入中的换行符
2013/03/26 PHP
PHP中strlen()和mb_strlen()的区别浅析
2014/06/19 PHP
ThinkPHP的截取字符串函数无法显示省略号的解决方法
2014/06/25 PHP
7个鲜为人知却非常实用的PHP函数
2015/07/01 PHP
PHP获取数据库表中的数据插入新的表再原删除数据方法
2018/10/12 PHP
js模拟实现Array的sort方法
2007/12/11 Javascript
Javascript表达式中连续的 && 和 || 之赋值区别
2010/10/17 Javascript
JavaScript 5 新增 Array 方法实现介绍
2012/02/06 Javascript
Eclipse配置Javascript开发环境图文教程
2015/01/29 Javascript
jquery序列化方法实例分析
2015/06/10 Javascript
webpack进阶——缓存与独立打包的用法
2017/08/02 Javascript
Vue shopCart 组件开发详解
2018/01/26 Javascript
bootstrap table插件动态加载表头
2019/07/19 Javascript
js prototype和__proto__的关系是什么
2019/08/23 Javascript
JavaScript 作用域scope简单汇总
2019/10/23 Javascript
javascript设计模式 ? 命令模式原理与用法实例分析
2020/04/20 Javascript
[47:53]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#2COL VS Spirit
2016/03/02 DOTA
python+selenium+autoit实现文件上传功能
2017/08/23 Python
python使用turtle绘制分形树
2018/06/22 Python
Python实现二叉树的常见遍历操作总结【7种方法】
2019/03/06 Python
python pandas时序处理相关功能详解
2019/07/03 Python
python实现大文本文件分割
2019/07/22 Python
python中的split()函数和os.path.split()函数使用详解
2019/12/21 Python
Django操作session 的方法
2020/03/09 Python
HTML5中Canvas与SVG的画图原理比较
2013/01/16 HTML / CSS
美国一站式电动和手动工具商店:International Tool
2020/11/26 全球购物
哈理工毕业生的求职信
2013/12/22 职场文书
主题酒店策划书
2014/01/28 职场文书
会计电算化专业求职信
2014/06/10 职场文书
四风自我剖析材料
2014/09/30 职场文书
党员群众路线教育实践活动学习笔记
2014/11/05 职场文书
公司感谢信范文
2015/01/22 职场文书
python 算法题——快乐数的多种解法
2021/05/27 Python
AudioContext 实现音频可视化(web技术分享)
2022/02/24 Javascript
Python数据可视化之Seaborn的安装及使用
2022/04/19 Python
Mysql 文件配置解析介绍
2022/05/06 MySQL