浅谈jQuery事件源码定位问题

  
  
  

展开后可以看到绑定的函数参数里的版本和当前版本是对应的。


 
可以看到

1.2.6-1.4 只支持  $.data( elem, "events", undefined, true ); 

1.5-1.8 两者都支持

1.9-1.11 只支持  $._data( elem, "events" ); 
那么我们可以写个函数简单的兼容下，然他全兼容即可

function lookEvents (elem) {
  return $.data &＃63; $.data( elem, "events", undefined, true ) : $._data( elem, "events" );
}

现在调用 lookEvents 就可以得到对应的 events 对象了。
虽然可以看到了我们绑定的自定义事件，但还是不知道他在哪个文件哪一行啊。
下面我们就来定位他的具体位置，我们就拿 1.7 的试试。

PS: 下面操作都是在控制台完成，我的环境是 chrome 34

function lookEvents (elem) {
  return $.data &＃63; $.data( elem, "events", undefined, true ) : $._data( elem, "events" );
}
var event = lookEvents($("#testbtn")[0]); // 获取绑定的事件
event.click[0].handler // 获取click事件的第一个事件源码地址

复制到控制台，按回车运行后，不出意外可以看到下面这个结果。

有没有看到右下角的 1.html:36 这个就是源码所在的文件和对应的行号了。

你可以直接点击 1.html:36 跳到对应的代码处，是不是觉得很给力啊。

上面方法适用于 1.5+ 版本的 jQuery，对于 1.2.6-1.4 的版本，稍微有点不同，不过也非常简单。
function lookEvents (elem) { return $.data &＃63; $.data( elem, "events", undefined, true ) : $._data( elem, "events" );}var event = lookEvents($("#testbtn")[0]); // 获取绑定的事件event.click; // 查看有几个click事件，如果要查看其他事件直接输入 event 然后回车即可
上面看到的编码就是对应事件句柄了，比如我这的 1，2 事件(如下图显示), 这个编号不是按顺序的，这个要注意。

 event.click[1] // 获取click事件的 id是1 的事件源码地址 

不出意外可以看到下面这个结果。

从操作来说，不管是 1.2.6-1.4 还是 1.5+ 版本 都差不多，只是 1.5+ 利用数组模式管理函数句柄了，比较方便。

好了，该说的都说完了，小伙伴们各种测试起来吧。