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

好，不扯遠，說說當你想看到網站上某個元素繫結的事件函式的程式碼時應該怎麼做吧。

檢視原生繫結的事件函式程式碼

所謂原生就是通過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”就可以看到了。
  

檢視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的方式一樣

另：

以上預設是在chrome瀏覽器下做的操作，其實在Firefox下也是類似的，相信作為一個技術人員，你應該能舉一反三的。至於IE嘛，呃…當我沒說哈。:)

更新：

1.為省去檢視屬性的麻煩，jquery1.x可以直接在控制檯執行$.cache[$('#clickMe').get(0)[$.expando]]輸出元素上繫結的東西，而不是先去檢視元素上jQueryxxxxxxx的屬性的值了

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