快捷導(dǎo)航

淺談 jQuery 事件源碼定位問(wèn)題

更新時(shí)間：2014年06月18日 11:28:02 投稿：mdxy-dxy

在一個(gè)不是自己寫(xiě)的頁(yè)面上，如何快速定位到他綁定的事件代碼在哪,下面為大家簡(jiǎn)單的介紹下,需要的朋友可以參考下

昨天群里有人問(wèn)了個(gè)事件源碼定位的問(wèn)題，簡(jiǎn)單描述下是這樣的。

在一個(gè)不是自己寫(xiě)的頁(yè)面上，如何快速定位到他綁定的事件代碼在哪？(頁(yè)面用的是jQuery)
這個(gè)問(wèn)題，說(shuō)難不難，說(shuō)簡(jiǎn)單也沒(méi)那么簡(jiǎn)單，萬(wàn)一用的是委托之類(lèi)也會(huì)麻煩點(diǎn)。

在 chrome 的控制臺(tái)里有個(gè) Event Listeners，這里會(huì)顯示你所選擇元素的事件，如果是原生事件，他會(huì)直接顯示，
你點(diǎn)擊一下事件就會(huì)跳到對(duì)應(yīng)代碼里了，可是 jQuery 綁定的事件卻不是這樣的，你點(diǎn)擊后只會(huì)跳到 jQuery 源碼里，
min后的jQuery源碼密密麻麻的，看著都眼花。

關(guān)于jQuery對(duì)于事件的管理，大牛們也分析的非常透徹了，我就不啰嗦了，因?yàn)椴皇俏覀兘裉煲f(shuō)的重點(diǎn)。
我們要說(shuō)的重點(diǎn)是怎么定位到事件源碼處。因?yàn)閖Query版本眾多，而且重構(gòu)過(guò)多次，所以要分情況來(lái)說(shuō)了。

基本上 1.2.6-1.8 和 1.9 兩種情況，經(jīng)過(guò)測(cè)試，大體上定為下面2個(gè)版本
1.2.6-1.8 用 $.data( elem, "events", undefined, true );
1.9+ 用 $._data( elem, "events" );

PS: 你現(xiàn)在也可以按 F12 打開(kāi)控制臺(tái)看看結(jié)果，當(dāng)然也可以復(fù)制下面的源碼自己測(cè)試。
由于谷歌被墻的厲害，所以把cdn換成百度的了。2014-06-07

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>test</title>
  <script src="http://libs.baidu.com/jquery/1.4.0/jquery.js"></script>
</head>

<body>
  <input type="button" id="testbtn" value="testbtn" />
  <script>
    var version = ["1.2.6", "1.3.0", "1.4.0", "1.5.0", "1.6.0", "1.7.0", "1.8.0", "1.9.0", "1.10.0"],
      elem = $("#testbtn")[0], // 待操作的元素
      url, // jquery 地址
      jq = null, // 保存新的jquery句柄
      jqver, // jqury 版本
      fn; // 函數(shù)句柄

    for (var i = 0; i < version.length; i++) {
      url = "http://libs.baidu.com/jquery/" + version[i] + "/jquery.min.js";

      $.getScript(url, function() {
        jq = $.noConflict(true); // 釋放控制權(quán)
        jqver = jq.fn.jquery; // 當(dāng)前 jquery 版本
        fn = new Function('ver_' + jqver.replace(/\./g, "_"), ''); // 生成類(lèi)似 function (ver_1_9_0) {} 這樣的函數(shù)
        jq(elem).click(fn).click(fn).bind("test", fn); // 普通事件和自定義事件

        console.log(
          jqver,
          jq.data && jq.data(elem, "events", undefined, true),
          jq._data && jq._data(elem, "events")
        );
      });
    }
  </script>
</body>
</html>

如果不出意外，你可以在控制臺(tái)看到這樣的顯示結(jié)果

展開(kāi)后可以看到綁定的函數(shù)參數(shù)里的版本和當(dāng)前版本是對(duì)應(yīng)的。

可以看到
1.2.6-1.4 只支持 $.data( elem, "events", undefined, true );
1.5-1.8 兩者都支持
1.9-1.11 只支持 $._data( elem, "events" );

那么我們可以寫(xiě)個(gè)函數(shù)簡(jiǎn)單的兼容下，然他全兼容即可

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

現(xiàn)在調(diào)用 lookEvents 就可以得到對(duì)應(yīng)的 events 對(duì)象了。

雖然可以看到了我們綁定的自定義事件，但還是不知道他在哪個(gè)文件哪一行啊。

下面我們就來(lái)定位他的具體位置，我們就拿 1.7 的試試。
PS: 下面操作都是在控制臺(tái)完成，我的環(huán)境是 chrome 34

function lookEvents (elem) {
  return $.data ? $.data( elem, "events", undefined, true ) : $._data( elem, "events" );
}
var event = lookEvents($("#testbtn")[0]); // 獲取綁定的事件
event.click[0].handler // 獲取click事件的第一個(gè)事件源碼地址

復(fù)制到控制臺(tái)，按回車(chē)運(yùn)行后，不出意外可以看到下面這個(gè)結(jié)果。

有沒(méi)有看到右下角的 1.html:36 這個(gè)就是源碼所在的文件和對(duì)應(yīng)的行號(hào)了。
你可以直接點(diǎn)擊 1.html:36 跳到對(duì)應(yīng)的代碼處，是不是覺(jué)得很給力啊。

上面方法適用于 1.5+ 版本的 jQuery，對(duì)于 1.2.6-1.4 的版本，稍微有點(diǎn)不同，不過(guò)也非常簡(jiǎn)單。

function lookEvents (elem) { return $.data ? $.data( elem, "events", undefined, true ) : $._data( elem, "events" );}var event = lookEvents($("#testbtn")[0]); // 獲取綁定的事件event.click; // 查看有幾個(gè)click事件，如果要查看其他事件直接輸入 event 然后回車(chē)即可

上面看到的編碼就是對(duì)應(yīng)事件句柄了，比如我這的 1，2 事件(如下圖顯示), 這個(gè)編號(hào)不是按順序的，這個(gè)要注意。
event.click[1] // 獲取click事件的 id是1 的事件源碼地址
不出意外可以看到下面這個(gè)結(jié)果。