作為技術(shù)狂熱分子的職業(yè)本能，看到一個(gè)技術(shù)產(chǎn)品的功能，總會(huì)忍不住想知道它是怎么被實(shí)現(xiàn)的。比如我每每看到別人網(wǎng)站一個(gè)很炫的界面或者很酷的功能，就忍不住打開了瀏覽器的控制臺(tái)。。。

好，不扯遠(yuǎn)，說說當(dāng)你想看到網(wǎng)站上某個(gè)元素綁定的事件函數(shù)的代碼時(shí)應(yīng)該怎么做吧。

查看原生綁定的事件函數(shù)代碼

所謂原生就是通過addEventListener方法綁定到dom元素上。這個(gè)好辦：

審查綁定事件的元素（對(duì)著它右鍵->審查元素）在彈出的Elements視圖的控制臺(tái)，右側(cè)點(diǎn)擊“Event Listeners”頁簽然后就能看到所有綁定在該元素的事件了，點(diǎn)開后，找到handler，右擊鼠標(biāo)，選擇“Show Function Definition”菜單。就能跳到綁定到該元素的事件函數(shù)的源碼位置了。有圖有真相：

查看jquery綁定的事件函數(shù)代碼

嗯，我知道，你遇到問題了吧，所有jquery綁定的事件函數(shù)，你通過上面的方式，跳到的都是jquery的代碼，而且永遠(yuǎn)是那一個(gè)地方。看了跟沒看一樣。所以，寶哥在這里教你針對(duì)jquery的查看方式。

還是審查元素點(diǎn)擊“Properties”視圖。選擇第一個(gè)，展開找到一個(gè)‘jQueryxxxxx(一串?dāng)?shù)字)'這樣的屬性，記住它的值（一般是一個(gè)數(shù)字）N

然后左側(cè)切到Console視圖，在控制臺(tái)里執(zhí)行$.cache[N]，這里的N是前面那個(gè)屬性值

然后就會(huì)出來綁定在這個(gè)元素上的東西了。展開events，里面就有你想要查看的真實(shí)函數(shù)了。右擊具體事件下的handle后面的function…，然后選擇“Show Function Definition”就可以看到了。

例子=》http://demo.sudodev.cn/frontend/jqDetect查看jquery2.x版本綁定的事件函數(shù)代碼

好的，我知道，你肯定又遇到問題了。因?yàn)楫?dāng)你使用的jquery2.x版本的jquery時(shí)，上面的這個(gè)方法又不work了，原因是2.x的代碼架構(gòu)變了。其實(shí)2.x版本的事件仍然是用的cache機(jī)制，但不像1.x版本暴露到外面去了，而是封裝起來，并且存在了閉包對(duì)象data_priv中，而且一般使用的是jquery的壓縮版本，這個(gè)data_priv名字你也無法查看到。所以在查看過jquery2.x版本的源碼后，寶哥教你如何定位它：

直接進(jìn)入控制臺(tái)，構(gòu)造一個(gè)包含jQuery的對(duì)象，以便在控制臺(tái)里查看jQuery。比如輸入var o={j:$}，這樣做的好處是，你執(zhí)行后能在控制吧里查看jQuery的所有屬性

然后在控制臺(tái)展開jQuery（這里是j）對(duì)象，找到_queueHooks這個(gè)方法，看到它的代碼大概是“return L.get(a,c)||L.access…”這種，記住這個(gè)L也可能是不是L）

展開任意一個(gè)j下面首層的對(duì)象，比如就是上面的_queueHooks，找到展開，再展開下面的Closure,找到前面的那個(gè)“L”對(duì)句，對(duì)著它后面的字母右鍵，選擇“Store as Global Variable”

然后控制臺(tái)里就打出一個(gè)tempX的對(duì)象，它就那個(gè)裝著cache的東東。假設(shè)它叫temp1。那個(gè)temp1有個(gè)get方法可以直接獲取它的cache對(duì)象。假如你要查看綁定事件的對(duì)象的id叫clickMe。那執(zhí)行temp1.get($('#clickMe').get(0))（或者temp1.get(document.querySelector('#clickMe'))））就會(huì)打出跟上面jquery1.x版本相當(dāng)?shù)臇|西

后面就跟上面jquery1.x的方式一樣例子=》http://demo.sudodev.cn/frontend/jq2Detect另：

以上默認(rèn)是在chrome瀏覽器下做的操作，其實(shí)在Firefox下也是類似的，相信作為一個(gè)技術(shù)人員，你應(yīng)該能舉一反三的。至于IE嘛，呃…當(dāng)我沒說哈。:)

更新：

1.為省去查看屬性的麻煩，jquery1.x可以直接在控制臺(tái)執(zhí)行$.cache[$('#clickMe').get(0)[$.expando]]輸出元素上綁定的東西，而不是先去查看元素上jQueryxxxxxxx的屬性的值了

2.經(jīng)過一篇查閱和測(cè)試。有一個(gè)新的目前最省力而且jquery1,jquery2都適用的辦法是，直接在控制臺(tái)輸入$._data($('#clickMe').get(0)),即可把綁定在元素的東西都輸出來。但是，從jquery2的源碼的注釋中發(fā)現(xiàn),$._data會(huì)在之后的新版本中廢除。所以上面介紹的方法仍然是很有價(jià)值的。授人以魚，不如授人以漁嘛，：）

最新評(píng)論