1. 程式人生 > >capture JS中的事件冒泡(Bubble)和事件捕獲(capture)以及如何阻止事件的冒泡

capture JS中的事件冒泡(Bubble)和事件捕獲(capture)以及如何阻止事件的冒泡

JS中的事件冒泡(Bubble)和事件捕獲(capture)以及如何阻止事件的冒泡


對“捕獲”和“冒泡”這兩個概念,通常我們對冒泡瞭解和使用的會更多一些,因為在我們使用的所有瀏覽器中,都支援事件冒泡 ,即事件由子元素向祖先元素傳播的,
就像氣泡從水底向水面上浮一樣。而在像firefox,chrome,safari這類所謂的標準瀏覽器中,事件傳播通常是有三個階段的:事件捕獲階段,事 件目標階段,事件冒泡階段,這三者的
執行的順序是先捕獲在冒泡。
事件冒泡:事 件冒泡指的是當前的目標元素觸發事件的發生,事件在一次向祖先元素傳播,在祖先元素上觸發相同型別的事件。當子元素都有同一事件處理程式時,
利用事件的冒 泡可以減少程式碼的冗餘度。通過給元素物件繫結事件的方法addEventlistener()第三個引數決定事件的執行階段是在冒泡階段還是捕獲階段,
當 第三個引數為false時,為冒泡階段,通常省略該引數是預設的是冒泡,如果為true則是捕獲階段。為了相容IE8以及IE8之前版本瀏覽器可以通過 attachEvent()方法給元素添
加事件不過他沒有第三個引數。下面的例子是沒有阻止事件冒泡時的程式碼,最終會看到,當點選了ele2時,事件會向 上冒泡依次輸出ele2,ele,ele0,這個就是由於事件的冒泡引
起的。

事件捕獲:
事 件捕獲過程與事件的冒泡階段是一個相反的階段,即事件由祖先元素向子元素傳播,和一個石子兒從水面向水底下沉一樣,
要說明的是在 IE,opera瀏覽器中,是不存在這個階段的。在上述的程式碼中給事件監聽程式新增第三個引數false,當點選元素ele2時會看到不一樣的效果,輸出 結果中將會最先輸出ele0,而不是ele2,這就是事件的捕獲。

阻止事件的冒泡:

   有時候事件的冒泡回會導致程式的執行順序和自己想象的情形不一樣,這時候就需要對事件的冒泡進行阻止。阻止事件的冒泡的方法與事件處理程式的新增方式有關:

1. 在除IE以外其他的瀏覽器中通過e.stopPropagation()方式阻止事件的冒泡。在 支援該方法的瀏覽器中還有一個方法stopimmediatePropagation(),該方法不僅會組織事件向祖元素的冒泡,同時也會阻止同一個節點 上同一事件的其他的事件處理程式的執行,該方法比前者阻止的更徹底。

2.在IE瀏覽器中通過e.cancleBubble=true,阻止事件冒泡。