查看原生绑定的事件函数代码
所谓原生就是通过addEventListener方法绑定到dom元素上。这个好办:
- 审查绑定事件的元素(对着它右键->审查元素)
- 在弹出的Elements视图的控制台,右侧点击“Event Listeners”页签
然后就能看到所有绑定在该元素的事件了
点开后,找到handler,右击鼠标,选择“Show Function Definition”菜单。就能跳到绑定到该元素的事件函数的源码位置了。
为省去查看属性的麻烦,jquery1.x可以直接在控制台执行$.cache[$('#clickMe').get(0)[$.expando]]输出元素上绑定的东西,而不是先去查看元素上jQueryxxxxxxx的属性的值了
查看jquery1.x版本绑定的事件函数代码
所有jquery绑定的事件函数,你通过上面的方式,跳到的都是jquery的代码,而且永远是那一个地方。针对jquery的查看方式
- 还是审查元素
- 点击“Properties”视图。选择第一个,展开
- 找到一个‘jQueryxxxxx(一串数字)’这样的属性,记住它的值(一般是一个数字)N,如
jQuery12354154868454445:17的N就是17 - 然后左侧切到Console视图,在控制台里执行
$.cache[N] - 然后就会出来绑定在这个元素上的东西了。展开events,里面就有你想要查看的真实函数了。
- 右击具体事件下的handle后面的function…,然后选择“Show Function Definition”就可以看到了源码。
查看jquery1.8.0版本之前dom绑定的事件函数代码
在1.8.0版本之前,若要获取某个DOM绑定的事件函数可以这样写:
1 | $.data(domObj,'events');//或者$('selector').data('events') |
domObj节点必须为dom节点对象,event为事件
jquery1.8.0版本后
1 | $._data(domObj,'events');//注意,这里不能像$('selector')._data('events')这样用了。 |
兼容使用jquery1.8.0和其后版本
1 | var eventsData = $.data(domObj,'events') || $._data(domObj,'events'); |
参考来源:
宝哥教你查看jquery绑定的事件函数
JQuery获取 绑定过的事件函数