首頁  >  文章  >  web前端  >  使用html元素綁定的事件方法的利器分享

使用html元素綁定的事件方法的利器分享

高洛峰
高洛峰原創
2017-03-20 16:51:131355瀏覽

     WEB標準提倡結構、表現和行為相 分離,現在越來越多採用這種表現和行為的方式,但它也為我們開發調試帶來一些問題,網頁載入一堆JavaScript,,我們很難搞清楚最後在哪些元素的哪個動作綁定了事件,尤其是JavaScript加載事件的方式五花八門,可以透過jQuery、element.click = function() { }、element.addEventListener()…,很難在單一處找出所有事件。而理不清事件來龍去脈,要追蹤某個點擊動作背後的行為就變得有些困難,直到我們遇到以下兩種利器。

       chrome開發者工具有檢視HTML元素綁定事件的功能,如下圖所示:

使用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

##在啟用後,有元素將被標上藍色區塊,鼠標停留時會顯示事件的細節。如下圖所示:


使用html元素綁定的事件方法的利器分享


#   

#

以上是使用html元素綁定的事件方法的利器分享的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn