查看html元素綁定的事件與方法的利器

     WEB標準提倡結構、表現和行爲相 分離，如今愈來愈多采用這種表現和行爲的方式，但它也爲咱們開發調試帶來一些問題，網頁載入一堆JavaScript，，咱們很難搞清楚最後在哪些元素的哪一個動做綁定了事件，尤爲是JavaScript加載事件的方式五花八門，能夠透過jQuery、element.click = function() { }、element.addEventListener()…，很難由單一處找出全部事件。而理不清事件前因後果，要追蹤某個點擊動做背後的行爲就變得有些困難，直到咱們遇到如下兩種利器。

       chrome開發者工具有查看HTML元素綁定事件的功能，以下圖所示：

       

      但這種方式查看事件的方法仍是有點困難，直到遇到它chrome的插件 Chrome Web Store - Visual Event

      Visual Event的運做原理，在於其熟知主要JavaScript庫(例如: jQuery、YUI、ExtJS)事件機制，可深刻其中擷取事件，並將其標註在對象元素上。目前支持的JS庫包括:

DOM 0 events
jQuery 1.2+
YUI 2
MooTools 1.2+
Prototype 1.6+
Glow

在啓用Visual Event後，有綁定事件元素將被標上藍色區塊，滑鼠停留時會顯示事件的細節。以下圖所示：

   

  歡迎掃描此二維碼關注web館公衆號
  做者：web館
  出處：http://www.cnblogs.com/xiaoyao2011/
  歡迎任何形式的轉載，但請務必註明出處。