如何快速找到jQuery對某個事件的處理代碼？

如下圖，找用jq對.flip的click事件處理代碼，但在瀏覽器里，listener卻是個dispatch，如何不看源碼(這裡還比較簡單，可以通過看源碼找到，對於複雜頁面卻不行)快速找到這個對flip點擊處理的代碼？

如何才能快速找到

$(".flip").click(function(){
$(".panel").fadeToggle(1000);
});


？

圖裡的頁面：

&
&
&
&
&
&
& &jQuery 效果 - 淡入淡出&
&

&
&
&效果演示& &

---

用jQuery的dataAPI

$("selector").data("events")


就可以列出指定元素所綁定的所有事件.比如這個頁面

http://www.w3school.com.cn/tiy/loadtext.asp?f=jquery_event_click

用chrome的控制台, 通過

$("button").data("events")


會返回一個對象, 這個對象裡面就是各種事件的映射關係:

比如你要點擊事件, 找到 click, 對應的是一個事件的數組, 如果你一次點擊只綁定一個, 就直接找第0個元素, 沒跑了, 然後在handler哪裡, 右擊他, 選擇 Show function definition, 就可以快速找到綁定的事件定義的代碼了.

chrome還會高亮一下~~

實際上firefox中的firebug插件也是可以這麼搞的, 只不過顯示的文案不太一樣而已...

新版本的jQuery則需要使用$._data這個工具方法來查看了, 用法還是差不多.

$._data($("button")[0], "events")


---

推薦這個神器，用chrome安裝即可

---

chrome似乎不那麼好用。

用firefox，裝最新版，裝nightly版。試試看。

---

推薦閱讀：