javascript中查看元素事件函數的一些技巧

摘要： 在分析一些網頁的時候，常常會發現點擊某個按鈕會觸發某個動做，當頁面比較複雜，包含的js文件又多，這時候要找到這段觸發函數的代碼寫在哪裏就比較困難。好比，在某個html頁面中，發現以下一個按鈕，點擊後會使得頁面元素有變化。

在分析一些網頁的時候，常常會發現點擊某個按鈕會觸發某個動做，當頁面比較複雜，包含的js文件又多，這時候要找到這段觸發函數的代碼寫在哪裏就比較困難。好比，在某個html頁面中，發現以下一個按鈕，點擊後會使得頁面元素有變化。可是並未看到onclick事件，那說明該事件多是經過javascript中的addEventListener方法綁定的（IE不支持該方法，使用的是attachEvent，不理解爲微軟何非要和W3C標準對着幹）。例以下面的代碼：

1 2 3 4 5 6 7

<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綁定的，使用這種方法就會有點問題，好比，仍是上面的代碼，可是綁定方式以下：

1 2 3

$(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的控制檯裏輸入以下代碼：

1	$._data($("#btn1")[0], 'events');

注意，該方法的參數是DOM對象，不是jquery對象。所以須要加一個[0]來轉成DOM對象。具體以下圖：

咱們在handler這個節點下，終於看到了該元素所綁定的事件了。

事實上，這個方法，能夠寫在js代碼中，而且handler的值其實就是一個function，好比在代碼中以下的寫法：

1 2 3

var p = $._data($('#btn1')[0], 'events').click[0].handler; alert(typeof (p)); p();

能夠看到彈出的類型就是p的類型就是function，而且能夠直接調用p。

經過上面所說的方法，在分析複雜頁面的時候，很容易找到事件的源頭，跟蹤代碼，提升效率。