版權聲明： 本文由 一隻部落格 發表于 bloghome部落格
文章連結： https://www.bloghome.com.cn/user/cnn237111
在分析一些網頁的時候，經常會發現點選某個按鈕會觸發某個動作，當頁面比較複雜，包含的js檔案又多，這時候要找到這段觸發函數的代碼寫在哪裡就比較困難。比如，在某個html頁面中，發現如下一個按鈕，點選後會使得頁面元素有變化。但是并未看到onclick事件，那說明該事件可能是通過javascript中的addEventListener方法綁定的（IE不支援該方法，使用的是attachEvent，不了解為微軟何非要和W3C标準對着幹）。例如下面的代碼：
<input type="button" value="輸入" id="btn1" name="n_btn1"/><label id="lbl"></label><br />
<script type="text/javascript">
document.getElementById("btn1").addEventListener("click",
function () {
alert("OK");
});
</script> 要看到btn1綁定的事件，可以通過chrome的事件監聽實作。如下截圖：
此外，可以通過指令，檢視綁定的方法，在Chrome中的指令行方法，getEventListeners(object)獲得，如下：
注意：getEventListeners方法是谷歌提供的供調試的指令行，并不是标準的javascript函數，隻可以在chrome中的控制台中運作，與之類似的指令行還有很多，可以參考：
https://developer.chrome.com/devtools/docs/commandline-api（需×××）。
此外，在控制台的listener中，隻能顯示函數的第一行，如果你寫的函數是多行的，那就需要把指令打全了：
getEventListeners(document.getElementById("btn1")).click[0].listener
console會把函數的全部都列印出來。
如果該段代碼使用jquery綁定的，使用這種方法就會有點問題，比如，還是上面的代碼，但是綁定方式如下：
$(function () {
$("#btn1").click(function () { alert('OK2') });
}); 通過jquery的click方法綁定了一個方法，結果發現listenerBody指向到了jquery的代碼上去了，如下圖：
這也正說明了，Jquery對于事件的綁定重新的定義了一套方法，是以此處看到的是Jquery的代碼。
幸運的是，在jquery中，我們可以使用jQuery._data(element, "events")方法,關于這個方法的文檔很少，官方文檔在這裡http://blog.jquery.com/2011/11/08/building-a-slimmer-jquery/，提及到該方法時一個内部方法，記錄了所有元素的事件。Stackoverflow上有一個文章介紹了這個方法和Jquery.data的差別，位址http://stackoverflow.com/questions/7788353/whats-the-difference-between-jquery-data-and-jquery-data-underscore-data。
此處，我們隻需要知道這個方法可以用來實作我們的目的——檢視元素所綁定的事件。我們隻需在chrome的控制台裡輸入如下代碼：
$._data($("#btn1")[0], 'events'); 注意，該方法的參數是DOM對象，不是jquery對象。是以需要加一個[0]來轉成DOM對象。具體如下圖：
我們在handler這個節點下，終于看到了該元素所綁定的事件了。
事實上，這個方法，可以寫在js代碼中，并且handler的值其實就是一個function，比如在代碼中如下的寫法：
var p = $._data($('#btn1')[0], 'events').click[0].handler;
alert(typeof (p));
p();