谈jQuery事件的源代码定位

昨天群里有人问了一个关于事件源代码位置的问题，简单描述如下。

在一个不是自己写的页面上，如何快速定位他绑定的事件代码在哪里？(页面使用jQuery。)这个问题说起来不难，但说简单也没那么简单。用委托之类的会比较麻烦。

chrome控制台中有一个事件监听器，它将显示您所选元素的事件。如果是本机事件，将直接显示。当您单击事件时，它会跳转到相应的代码，但jQuery绑定的事件不是这样。点击后，只会跳转到jQuery的源代码。min之后，jQuery的源代码很密集，看得晕头转向。

至于jQuery对事件的管理，大牛们也做了透彻的分析，我就不多言了，因为这不是我们今天要讲的重点。我们要说的是如何定位事件源代码。因为jQuery的版本很多，而且已经重构了很多次，所以应该分情况。

基本上测试了1.2.6-1.8和1.9两种情况，一般确定下面两个版本1.2.6-1.8使用$。数据(elem，“事件”，未定义，真)；1.9使用$。_数据(elem，“事件”)；

PS:你也可以按F12打开控制台查看结果，也可以复制下面的源代码自己测试。谷歌受到重创，于是用百度的cdn取代了cdn。2014-06-07

！doctype html html lang=' en ' head meta charset=' UTF-8 ' title test/title script src=' http :http://libs . Baidu.com/jquery/1.4.0/jquery . js '/script/heady输入类型=' button ' id=' test BTN ' value=' test BTN '/script var version=[' 1 . 2 . 6 '，' 1.3.0 '，' 1 . 4 . 0 '，' 1.5.0 '，' 1.6.0 '，' 1//的函数句柄(var I=0；一.版本.长度；I){ URL=' http://libs . Baidu.com/jquery/' version[I]'/jquery . min . js '；$.getScript(url，function() { jq=$。noConflict(真)；//释放控制权jqver=jq . fn . jquery；//当前jquery版本fn=newfunction ('ver _' jqver。替换(/\。/g，' _ ')，' ')；//生成一个类似function (ver_1_9_0) {} jq (elem)的函数。单击(fn)。单击(fn)。bind ('test '，fn)；//常见事件和自定义事件console.log (jqver，jq.datajq.data (elem，' events '，undefined，true)，jq。_ datajq。_ data (elem，‘events’)；});}/script/body/html/html如果没有意外，可以在控制台看到这个显示结果。

展开后，您可以看到绑定函数参数中的版本对应于当前版本。

可以看到1.2.6-1.4只支持$。数据(elem，“事件”，未定义，真)；1.5-1.8都支持1.9-1.11只支持$。_data(elem，‘events’)；

然后我们可以写一个简单兼容，但是完全兼容的函数。

函数lookEvents (elem) { return $。数据？$.数据(elem，' events '，undefined，true ) :美元。_data(elem，‘events’)；}现在您可以通过调用lookEvents来获取相应的events对象。

虽然我们可以看到我们绑定的自定义事件，但我们仍然不知道它在哪个文件和哪一行。

让我们定位他的具体位置。让我们试试1.7。PS:的以下操作都是在控制台完成的，我的环境是chrome 34。

函数lookEvents (elem) { return $。数据？$.数据(elem，' events '，undefined，true ) :美元。_data(elem，‘events’)；} var event=lookEvents($(' # test BTN ')[0])；//获取绑定事件event.click[0]。handler //获取click事件的第一个事件的源代码地址，并将其复制到控制台。按enter键运行后，您可以毫无意外地看到以下结果。

你见过右下角的1.html:36吗？这是源代码所在的文件和对应的行号。可以直接点击1.html:36跳转到对应的代码。感觉很棒吗？

以上方法适用于1.5版本的jQuery，与1.2.6-1.4版本略有不同，但也很简单。

函数lookEvents (elem) { return $。数据？$.数据(elem，' events '，undefined，true ) :美元。_data(elem，‘events’)；} var event=lookEvents($(' # test BTN ')[0])；//获取绑定事件event.click//检查有几个点击事件。如果您想查看其他事件，只需输入event并按enter。

上面的代码是对应的事件句柄，例如，我的1和2事件(如下图所示)。这个数字没有顺序，所以我们应该注意这一点。Event.click[1] //获取click事件id为1的事件的源地址。你可以毫无意外地看到下面的结果。

操作方面，1.2.6-1.4和1.5两个版本都差不多，只是1.5采用数组方式管理函数句柄，比较方便。好了，这就是我们要说的。让我们做各种各样的测试。