查看jquery绑定的事件函数
作为技术狂热分子的职业本能,看到一个技术产品的功能,总会忍不住想知道它是怎么被实现的。比如我每每看到别人网站一个很炫的界面或者很酷的功能,就忍不住打开了浏览器的控制台。。。
好,不扯远,说说当你想看到网站上某个元素绑定的事件函数的代码时应该怎么做吧。
查看原生绑定的事件函数代码
所谓原生就是通过addEventListener方法绑定到dom元素上。这个好办:
- 审查绑定事件的元素(对着它右键->审查元素)
- 在弹出的Elements视图的控制台,右侧点击“Event Listeners”页签
- 然后就能看到所有绑定在该元素的事件了,点开后,找到handler,右击鼠标,选择“Show Function Definition”菜单。就能跳到绑定到该元素的事件函数的源码位置了。有图有真相:
查看jquery绑定的事件函数代码
嗯,我知道,你遇到问题了吧,所有jquery绑定的事件函数,你通过上面的方式,跳到的都是jquery的代码,而且永远是那一个地方。看了跟没看一样。所以,宝哥在这里教你针对jquery的查看方式。
- 还是审查元素
- 点击“Properties”视图。选择第一个,展开
- 找到一个‘jQueryxxxxx(一串数字)’这样的属性,记住它的值(一般是一个数字)N
- 然后左侧切到Console视图,在控制台里执行
$.cache[N]
,这里的N是前面那个属性值 - 然后就会出来绑定在这个元素上的东西了。展开events,里面就有你想要查看的真实函数了。
- 右击具体事件下的handle后面的function…,然后选择“Show Function Definition”就可以看到了。
- 例子=》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(这里是j)对象,找到_queueHooks这个方法,看到它的代码大概是“return L.get(a,c)||L.access…”这种,记住这个L也可能是不是L)
- 展开任意一个j下面首层的对象,比如就是上面的_queueHooks,找到展开,再展开下面的Closure,找到前面的那个“L”对句,对着它后面的字母右键,选择“Store as Global Variable”
- 然后控制台里就打出一个tempX的对象,它就那个装着cache的东东。假设它叫temp1。
- 那个temp1有个get方法可以直接获取它的cache对象。假如你要查看绑定事件的对象的id叫clickMe。那执行
temp1.get($('#clickMe').get(0))
(或者temp1.get(document.querySelector('#clickMe'))
))就会打出跟上面jquery1.x版本相当的东西 - 后面就跟上面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会在之后的新版本中废除。所以上面介绍的方法仍然是很有价值的。授人以鱼,不如授人以渔嘛,:)
本条目发布于2014 年 7 月 9 日。属于javascript分类,被贴了 宝哥教你 标签。
原文地址:http://sudodev.cn/articles/340.html#comments
查看jquery绑定的事件函数的更多相关文章
- JS: javascript 点击事件执行两次js问题 ,解决jquery绑定click事件出现点击一次执行两次问题
javascript 点击事件执行两次js问题 在JQuery中存在unbind()方法,先解绑再添加点击事件,解决方案为: $(".m-layout-setting").unbi ...
- input标签的accept属性、JQuery绑定keyDown事件
一. input标签的accept属性 当我们上传文件或者注册上传头像时,我们可以一般都是使用: <input type="file" id="my_file&qu ...
- JQuery 绑定单击事件到某个函数的的方法
<script> function 我会在加载完页面马上执行() { alert('我会在加载完页面马上执行'); } function 我只会在按钮点击时才执行() { alert('我 ...
- jquery绑定回车事件
//回车事件绑定 $(".left-content").keyup(function(event){ var theEvent = event || window.event; v ...
- 解决jquery绑定click事件出现点击一次执行两次问题
问题定位:通过浏览器F12定位到点击一次出现两次调用. 问题复现: $("#mail_span").on("click",function(){ ...
- Jquery 绑定标签事件
为子元素绑定: $('#foreachResult').delegate('td', 'click', function () { alert($(this).text()); ...
- Chrome浏览器插件VisualEvent,可以方便的查看页面绑定的事件
http://files.cnblogs.com/files/jiqing9006/VisualEvent.zip
- JQuery 绑定回车事件 兼容ie8,ie9
$("#form-search").find('#search-query').bind('keypress', function(e) { var keycode; if(win ...
- jquery绑定onkeyup()事件3中方法
$('input').keyup(function () { ... }); $('input').bind('keyup', function () { ... }); $('input').liv ...
随机推荐
- 破解 crackme(完全拆解警告窗口)
系统 : Windows xp 程序 : crackme 程序下载地址 :http://pan.baidu.com/s/1kUrbcAr 要求 : 注册机编写 & 去除Nag窗口 使用工具 : ...
- 解密Redis持久化
原文 http://blog.nosqlfan.com/html/3813.html 本文内容来源于Redis作者博文,Redis作者说,他看到的所有针对Redis的讨论中,对Redis持久化的误解是 ...
- CSS2伪类选择器要点
有四个选择器,分别是 hover:鼠标悬停 link:链接不能使用时 visited:链接被点击后 active:链接被点击时,如果鼠标不放,就会一直触发active属性 link在w3c中记录为链接 ...
- Sqlserver 还原那些事
由于想总结的东西比较杂乱,就起了这么一个题目 1.当还原数据库,没有选择结尾日志备份时,会出现下图异常: 这是因为,对于使用完全恢复模式或大容量日志恢复模式的数据库,在大多数情况下,您必须在还原数据库 ...
- Java BTrace实战(1)--BTrace的入门和使用
前言: 对线上的java服务, 往往采用日志进行问题处理和分析. 倘若日志缺乏相关的信息时, 那又该如何处理? 远程调试会影响服务的正常工作, 修改代码重新部署的方案其实时性和灵活性难以保证(线上服务 ...
- 382. Linked List Random Node
Given a singly linked list, return a random node's value from the linked list. Each node must have t ...
- tulterbot遥感操作使用Interactive Markers--12
原创博客:转载请表明出处:http://www.cnblogs.com/zxouxuewei/ 1.安装ros indigo功能包: sudo apt-get install ros-indigo-t ...
- python--迭代--7
原创博文,转载请标明出处--周学伟http://www.cnblogs.com/zxouxuewei/ 一.什么是迭代 在Python中,如果给定一个list或tuple,我们可以通过for循环来遍历 ...
- UVa 572 油田(DFS求连通块)
https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem& ...
- leetcode 143. Reorder List ----- java
Given a singly linked list L: L0→L1→-→Ln-1→Ln,reorder it to: L0→Ln→L1→Ln-1→L2→Ln-2→- You must do thi ...