查看jquery绑定的事件函数

转载 2015年07月08日 15:36:05

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

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

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

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

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

  • 还是审查元素
  • 点击“Properties”视图。选择第一个,展开
  • 找到一个‘jQueryxxxxx(一串数字)’这样的属性,记住它的值(一般是一个数字)NjqDetect1
  • 然后左侧切到Console视图,在控制台里执行$.cache[N],这里的N是前面那个属性值jqDetect2
  • 然后就会出来绑定在这个元素上的东西了。展开events,里面就有你想要查看的真实函数了。
  • 右击具体事件下的handle后面的function…,然后选择“Show Function Definition”就可以看到了。jqDetect3
  • 例子=》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的所有属性jq2Detect
  • 然后在控制台展开jQuery(这里是j)对象,找到_queueHooks这个方法,看到它的代码大概是“return L.get(a,c)||L.access…”这种,记住这个L也可能是不是L)jq2Detect2
  • 展开任意一个j下面首层的对象,比如就是上面的_queueHooks,找到展开,再展开下面的Closure,找到前面的那个“L”对句,对着它后面的字母右键,选择“Store as Global Variable”jq2Detect3
  • 然后控制台里就打出一个tempX的对象,它就那个装着cache的东东。假设它叫temp1。
  • 那个temp1有个get方法可以直接获取它的cache对象。假如你要查看绑定事件的对象的id叫clickMe。那执行temp1.get($('#clickMe').get(0))(或者temp1.get(document.querySelector('#clickMe'))))就会打出跟上面jquery1.x版本相当的东西jq2Detect4
  • 后面就跟上面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会在之后的新版本中废除。所以上面介绍的方法仍然是很有价值的。授人以鱼,不如授人以渔嘛,:)

http://sudodev.cn/articles/340.html

JQuery 之从 $(核心函数)加载事件入门

JQuery 代码少而多实现的JS类库 就是这么6 一、关于JQuery(一)、什么是JQuery ? 《1》jQuery,顾名思义,也就是JavaScript和查询(Query), 它就是辅助Jav...
  • lxf512666
  • lxf512666
  • 2016年10月23日 15:15
  • 449

JQuery中的常用事件

JQuery中的常用事件 .click() 鼠标单击触发事件,参数可选(data,function) .dblclick() 双击触发,同上 ...
  • theVicTory
  • theVicTory
  • 2017年01月29日 11:50
  • 1322

jQuery查看dom元素上绑定的事件列表

作为技术狂热分子的职业本能,看到一个技术产品的功能,总会忍不住想知道它是怎么被实现的。比如我每每看到别人网站一个很炫的界面或者很酷的功能,就忍不住打开了浏览器的控制台。。。 好,不扯远,说说当你...
  • a460550542
  • a460550542
  • 2016年07月25日 17:25
  • 1416

查看jquery绑定的事件函数

跳转网页查看jquery绑定的事件函数
  • String716
  • String716
  • 2015年07月02日 17:27
  • 300

jQuery事件大全(真的很全)

Dom: Attribute: $("p").addClass(css中定义的样式类型); 给某个元素添加样式 $("img").attr({src:"test.jpg",alt:"test Ima...
  • tanga842428
  • tanga842428
  • 2016年09月21日 20:36
  • 1254

jQueryindex()函数在简单事件的使用

函数index() 搜索匹配的元素,并返回相应元素的索引值,从0开始计数。 如果找不到匹配的元素,则返回-1。 语法: (1)jquery对象.index() 返回这个元素在同辈中的索引位置 ...
  • DHM00
  • DHM00
  • 2017年02月12日 18:17
  • 465

使用jQuery查找注册到某个DOM对象的事件处理函数

举例,某个输入框绑定了onblur事件处理函数,我如何快速找到那段代码呢? var elem = document.getElementById("xxxxxx")     // xxx...
  • omage
  • omage
  • 2015年09月14日 15:54
  • 836

jquery on绑定多个事件

一、jquery为多个选择器绑定同一个事件 $("#start,#end").on("click",function(){     alert("The paragraph was clicked."...
  • sinat_36146776
  • sinat_36146776
  • 2016年12月22日 10:15
  • 2339

【jQuery】onload事件,load(),ready()比较和使用

一、ready() :页面DOM结构加载完成后触发 $(document).ready(function(){...}); $().ready(function(){...}); $(funct...
  • xn_28
  • xn_28
  • 2016年02月25日 17:06
  • 4868

jQuery事件函数

jQuery 名称冲突 jQuery准则 jQuery事件jQuery 名称冲突jQuery 使用 $ 符号作为 jQuery 的简介方式。 某些其他 JavaScript 库中的函数(比如 Pro...
  • tonydandelion2014
  • tonydandelion2014
  • 2016年07月10日 22:28
  • 321
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:查看jquery绑定的事件函数
举报原因:
原因补充:

(最多只允许输入30个字)