查看jquery綁定的事件函數

做爲技術狂熱分子的職業本能，看到一個技術產品的功能，總會忍不住想知道它是怎麼被實現的。好比我往往看到別人網站一個很炫的界面或者很酷的功能，就忍不住打開了瀏覽器的控制檯。。。

好，不扯遠，說說當你想看到網站上某個元素綁定的事件函數的代碼時應該怎麼作吧。

查看原生綁定的事件函數代碼

所謂原生就是經過addEventListener方法綁定到dom元素上。這個好辦：

• 審查綁定事件的元素（對着它右鍵->審查元素）
• 在彈出的Elements視圖的控制檯，右側點擊「Event Listeners」頁籤
• 而後就能看到全部綁定在該元素的事件了，點開後，找到handler，右擊鼠標，選擇「Show Function Definition」菜單。就能跳到綁定到該元素的事件函數的源碼位置了。有圖有真相：

查看jquery綁定的事件函數代碼

嗯，我知道，你遇到問題了吧，全部jquery綁定的事件函數，你經過上面的方式，跳到的都是jquery的代碼，並且永遠是那一個地方。看了跟沒看同樣。因此，寶哥在這裏教你針對jquery的查看方式。

• 仍是審查元素
• 點擊「Properties」視圖。選擇第一個，展開
• 找到一個‘jQueryxxxxx(一串數字)’這樣的屬性，記住它的值（通常是一個數字）N
• 而後左側切到Console視圖，在控制檯裏執行$.cache[N]，這裏的N是前面那個屬性值
• 而後就會出來綁定在這個元素上的東西了。展開events，裏面就有你想要查看的真實函數了。
• 右擊具體事件下的handle後面的function…，而後選擇「Show Function Definition」就能夠看到了。
• 例子=》http://demo.sudodev.cn/frontend/jqDetect

查看jquery2.x版本綁定的事件函數代碼

好的，我知道，你確定又遇到問題了。由於當你使用的jquery2.x版本的jquery時，上面的這個方法又不work了，緣由是2.x的代碼架構變了。其實2.x版本的事件仍然是用的cache機制，但不像1.x版本暴露到外面去了，而是封裝起來，而且存在了閉包對象data_priv中，並且通常使用的是jquery的壓縮版本，這個data_priv名字你也沒法查看到。因此在查看過jquery2.x版本的源碼後，寶哥教你如何定位它：

• 直接進入控制檯，構造一個包含jQuery的對象，以便在控制檯裏查看jQuery。好比輸入var o={j:$}，這樣作的好處是，你執行後能在控制吧裏查看jQuery的全部屬性
• 而後在控制檯展開jQuery（這裏是j）對象，找到_queueHooks這個方法，看到它的代碼大概是「return L.get(a,c)||L.access…」這種，記住這個L也多是不是L）
• 展開任意一個j下面首層的對象，好比就是上面的_queueHooks，找到展開，再展開下面的Closure,找到前面的那個「L」對句，對着它後面的字母右鍵，選擇「Store as Global Variable」
• 而後控制檯裏就打出一個tempX的對象，它就那個裝着cache的東東。假設它叫temp1。
• 那個temp1有個get方法能夠直接獲取它的cache對象。假如你要查看綁定事件的對象的id叫clickMe。那執行temp1.get($('#clickMe').get(0))（或者temp1.get(document.querySelector('#clickMe'))））就會打出跟上面jquery1.x版本至關的東西
• 後面就跟上面jquery1.x的方式同樣
• 例子=》http://demo.sudodev.cn/frontend/jq2Detect

另：

以上默認是在chrome瀏覽器下作的操做，其實在Firefox下也是相似的，相信做爲一個技術人員，你應該能觸類旁通的。至於IE嘛，呃…當我沒說哈。:)

更新：

1.爲省去查看屬性的麻煩，jquery1.x能夠直接在控制檯執行$.cache[$('#clickMe').get(0)[$.expando]]輸出元素上綁定的東西，而不是先去查看元素上jQueryxxxxxxx的屬性的值了

2.通過一篇查閱和測試。有一個新的目前最省力並且jquery1,jquery2都適用的辦法是，直接在控制檯輸入$._data($('#clickMe').get(0)),便可把綁定在元素的東西都輸出來。可是，從jquery2的源碼的註釋中發現,$._data會在以後的新版本中廢除。因此上面介紹的方法仍然是頗有價值的。授人以魚，不如授人以漁嘛，：）

本條目發佈於2014 年 7 月 9 日。屬於javascript分類，被貼了 寶哥教你 標籤。

 

 

原文地址:http://sudodev.cn/articles/340.html#comments