jQuery中dom元素上綁定的事件詳解
作為技術(shù)狂熱分子的職業(yè)本能，看到一個技術(shù)產(chǎn)品的功能，總會忍不住想知道它是怎么被實現(xiàn)的。比如我每每看到別人網(wǎng)站一個很炫的界面或者很酷的功能，就忍不住打開了瀏覽器的控制臺。。。
好，不扯遠，說說當你想看到網(wǎng)站上某個元素綁定的事件函數(shù)的代碼時應該怎么做吧。
查看原生綁定的事件函數(shù)代碼
所謂原生就是通過addEventListener方法綁定到dom元素上。這個好辦：
審查綁定事件的元素（對著它右鍵->審查元素）在彈出的Elements視圖的控制臺，右側(cè)點擊“Event Listeners”頁簽然后就能看到所有綁定在該元素的事件了，點開后，找到handler，右擊鼠標，選擇“Show Function Definition”菜單。就能跳到綁定到該元素的事件函數(shù)的源碼位置了。有圖有真相：
查看jquery綁定的事件函數(shù)代碼
嗯，我知道，你遇到問題了吧，所有jquery綁定的事件函數(shù)，你通過上面的方式，跳到的都是jquery的代碼，而且永遠是那一個地方?？戳烁鷽]看一樣。所以，寶哥在這里教你針對jquery的查看方式。
還是審查元素點擊“Properties”視圖。選擇第一個，展開找到一個‘jQueryxxxxx(一串數(shù)字)'這樣的屬性，記住它的值（一般是一個數(shù)字）N
然后左側(cè)切到Console視圖，在控制臺里執(zhí)行$.cache[N]，這里的N是前面那個屬性值
然后就會出來綁定在這個元素上的東西了。展開events，里面就有你想要查看的真實函數(shù)了。右擊具體事件下的handle后面的function…，然后選擇“Show Function Definition”就可以看到了。
例子=》http://demo.sudodev.cn/frontend/jqDetect查看jquery2.x版本綁定的事件函數(shù)代碼
好的，我知道，你肯定又遇到問題了。因為當你使用的jquery2.x版本的jquery時，上面的這個方法又不work了，原因是2.x的代碼架構(gòu)變了。其實2.x版本的事件仍然是用的cache機制，但不像1.x版本暴露到外面去了，而是封裝起來，并且存在了閉包對象data_priv中，而且一般使用的是jquery的壓縮版本，這個data_priv名字你也無法查看到。所以在查看過jquery2.x版本的源碼后，寶哥教你如何定位它：
直接進入控制臺，構(gòu)造一個包含jQuery的對象，以便在控制臺里查看jQuery。比如輸入var o={j:$}，這樣做的好處是，你執(zhí)行后能在控制吧里查看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。那執(zhí)行temp1.get($('#clickMe').get(0))（或者temp1.get(document.querySelector('#clickMe'))））就會打出跟上面jquery1.x版本相當?shù)臇|西
后面就跟上面jquery1.x的方式一樣例子=》http://demo.sudodev.cn/frontend/jq2Detect另：
以上默認是在chrome瀏覽器下做的操作，其實在Firefox下也是類似的，相信作為一個技術(shù)人員，你應該能舉一反三的。至于IE嘛，呃…當我沒說哈。:)
更新：
1.為省去查看屬性的麻煩，jquery1.x可以直接在控制臺執(zhí)行$.cache[$('#clickMe').get(0)[$.expando]]輸出元素上綁定的東西，而不是先去查看元素上jQueryxxxxxxx的屬性的值了
2.經(jīng)過一篇查閱和測試。有一個新的目前最省力而且jquery1,jquery2都適用的辦法是，直接在控制臺輸入$._data($('#clickMe').get(0)),即可把綁定在元素的東西都輸出來。但是，從jquery2的源碼的注釋中發(fā)現(xiàn),$._data會在之后的新版本中廢除。所以上面介紹的方法仍然是很有價值的。授人以魚，不如授人以漁嘛，：）
相關文章
這篇文章主要為大家詳細介紹了jQuery實現(xiàn)呼吸輪播圖，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
jQuery實現(xiàn)按鈕的點擊 全選/反選 單選框/復選框 文本框 表單驗證
這篇文章主要介紹了jQuery實現(xiàn)按鈕的點擊 全選/反選 單選框/復選框 文本框 表單驗證的相關資料,需要的朋友可以參考下2015-06-06
超級有用的13個基于jQuery的內(nèi)容滾動插件和教程
這篇文章與大家分享13個超級有用的 jQuery 內(nèi)容滾動插件和教程。您可能經(jīng)常能看到一些網(wǎng)站上特色區(qū)域的內(nèi)容以滾動方式變化，這是一種在有限的網(wǎng)頁空間內(nèi)展示更多內(nèi)容的良好方式，而且能吸引用戶注意力。2011-07-07
本文給大家分享一段jquery代碼實現(xiàn)滑動按鈕開關的效果，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的的朋友參考下2016-12-12
通過XMLHTTPRquest請求不同域上的數(shù)據(jù)，原來js跨域訪問是后臺有個處理路徑“/test”的函數(shù)。下面給大家介紹jQuery跨域問題解決方案，有需要的小伙伴可以參考下2015-08-08
jQuery實現(xiàn)立體式數(shù)字滾動條增加效果
這篇文章主要介紹了jQuery立體式數(shù)字滾動條增加的相關資料,代碼簡單易懂，非常不錯，需要的朋友可以參考下2016-12-12
三分鐘帶你玩轉(zhuǎn)jQuery.noConflict()
這篇文章主要介紹了三分鐘帶你玩轉(zhuǎn)jQuery.noConflict() 的相關資料,需要的朋友可以參考下2016-02-02
本代碼將實現(xiàn)以下樣式及功能：日歷標題背景色、日歷標題字體色、日歷背景色、日歷字體色、假日字體色、背景水印色、是否顯示上月和下月的日期，感興趣的朋友可以了解下哈2013-04-04
這篇文章主要介紹了jQuery中nextUntil()方法用法,實例分析了nextUntil()方法的功能、定義及匹配同輩元素的技巧與注意事項,需要的朋友可以參考下2015-01-01
這篇文章主要介紹了利用瀏覽器全屏api實現(xiàn)js全屏的代碼示例,示例中使用了jquery，把這個庫的地址改成自己的，大家參考使用吧2014-01-01