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

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

  1. 审查绑定事件的元素(对着它右键->审查元素)
  2. 在弹出的Elements视图的控制台,右侧点击“Event Listeners”页签

然后就能看到所有绑定在该元素的事件了

点开后,找到handler,右击鼠标,选择“Show Function Definition”菜单。就能跳到绑定到该元素的事件函数的源码位置了。

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

查看jquery1.x版本绑定的事件函数代码

所有jquery绑定的事件函数,你通过上面的方式,跳到的都是jquery的代码,而且永远是那一个地方。针对jquery的查看方式

  1. 还是审查元素
  2. 点击“Properties”视图。选择第一个,展开
  3. 找到一个‘jQueryxxxxx(一串数字)’这样的属性,记住它的值(一般是一个数字)N,如jQuery12354154868454445:17的N就是17
  4. 然后左侧切到Console视图,在控制台里执行$.cache[N]
  5. 然后就会出来绑定在这个元素上的东西了。展开events,里面就有你想要查看的真实函数了。
  6. 右击具体事件下的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获取 绑定过的事件函数

× 请我吃糖~
打赏二维码