本文實例分析了javascript事件捕獲機制。分享給大家供大家參考,具體如下:
1.什麼是事件冒泡?
在排序算法中,我們學過冒泡排序法,所謂冒泡就是讓底層的東西浮出水面,對於事件冒泡也同樣是如此,
下面我們來看一個例子來說明什麼是事件冒泡。
<div> <button>測試</button> </div> <script> $("div").bind("click",function(){alert("div")}); $("button").bind("click",function(){alert("button"}); </script>
當支持事件冒泡時,當我們點擊"測試”按鈕時,首先會執行的是alert("button"),固名思意:
事件按照從最特定的事件目標到最不特定的事件目標(document對象)的順序觸發。
當div,button,html根元素都有事件時,事件執行的順序為:
button->div->html
2.什麼是事件捕獲?
我們再來看事件捕獲,相對於事件捕獲,處理時間的順序與事件冒泡截然相反,同樣:
<div> <button>測試</button> </div> <script> $("div").bind("click",function(){alert("div")}); $("button").bind("click",function(){alert("button"}); </script>
執行這段代碼,首先會alert("div"),其次會alert("button")。我們明確事件捕獲的概念:
事件從最不精確的對象(document 對象)開始觸發,然後到最精確。
同樣的如果button,div,html元素上都有綁定事件,那麼事件的實行順序為:
html->div->button
3.各個版本的浏覽器對事件的處理機制?
(1)在DOM中,即支持事件冒泡,也支持事件捕獲,在W3C的標准中,認為任何事件都是從事件捕獲出發,找到最終的結點,此後再進行冒泡,會到根結點。
DOM中支持事件綁定的函數為:
addEventListener("事件名",函數,userCapture);
對於userCapture參數,默認為false,支持事件冒泡。
若在userCapture參數,為true時,支持事件捕獲。
(2)對於很多浏覽器,都支持addEventListener方法,但是IE不支持!
(3) IE中的事件處理機制,IE中只支持事件冒泡,IE中有一個獨有的事件綁定方法
attachEvent方法,此方法有兩個參數:
attachEvent("事件名","函數名")
4.如何阻止事件的傳播?
無論是事件冒泡還是事件捕獲都是可以阻止的。
(1)首先在W3C中阻止事件的傳播方法為:stopPropagation(),在IE中,通過設置
cancelBubble=true;
(2) 如何阻止事件的默認行為?在W3C標准中,使用preventDefault方法,在IE中通過設置
window.event.returnValue = false;
PS:關於javascript常用事件及相關說明還可參考本站在線工具:
javascript事件與功能說明大全:
http://tools.jb51.net/table/javascript_event
更多關於JavaScript相關內容感興趣的讀者可查看本站專題:《JavaScript事件相關操作與技巧大全》、《JavaScript時間與日期操作技巧總結》、《JavaScript切換特效與技巧總結》、《JavaScript查找算法技巧總結》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。