認識事件冒泡和事件捕獲

一.事件冒泡就是多個元素同時響應了同乙個事件，前提是這些元素都繫結了這乙個事件。這只是我的定義，感覺好理解些。

稱它為冒泡，是因為事件會按照dom元素的層次結構依次執行，就像水泡一樣不斷浮向頂端。所以稱之為事件冒泡。

這個圖便於理解,我用箭頭來代替冒泡：

二.事件捕獲與事件冒泡觸發順序相反，事件捕獲從外層元素傳到內層元素的。body—〉div—〉span。

jquery不支援事件捕獲，不是所有的瀏覽器支援事件捕獲。

三.通過demo來認識事件冒泡

@

div元素
span元素

四.解決事件冒泡

先認識下事件物件，在上面程式中新增乙個引數event，點選span元素時，事件物件就會被建立，這個事件物件只有事件函式才能訪問，事件函式處理完後

事件物件會銷毀。

事件物件具有自己的屬性

jquery中stoppropagation()方法可以停止事件冒泡

$(function

() );
});

五.阻止預設行為

網頁中的元素都有自己的預設行為，例如點選a標籤，會跳頁，點選submit按鈕會提交表單等。

事件物件提供了preventdefault()方法。可以阻止預設行為。

preventdefault()和stoppropagation()都可以用return false來代替。

六.事件物件的幾個屬性

event.target　　　　　　　　  獲取觸發事件的元素

event.pagex/event.pagey　　獲得游標相當於頁面的x座標和y座標

event.which　　　　　　　　   獲取滑鼠的左，中，右鍵；鍵盤的按鍵

event.metakey　　　　　　　 不同的瀏覽器對鍵盤ctrl鍵解釋不同，jquery對其進行封裝成了metakey()方法獲取鍵盤事件中的ctrl鍵

event.originalevent　　　　　  指向原生的事件物件

注：這幾個屬性沒有例項測試。

事件冒泡和事件捕獲

事件冒泡 事件物件沿dom樹向上傳播 事件捕獲 事件物件沿dom樹向下傳播 addeventlistener click function flase 引數預設為false 代表事件冒泡，引數為true代表事件捕獲 attachevent onclick function detachevent 沒...

事件捕獲和事件冒泡

如果乙個節點和它的乙個父節點都繫結了相同事件型別的 當事件觸發時哪個 會先執行?儘管網景和微軟的處理方式不一致,也不要太過擔心。netscape 4 支援事件捕捉 capturing 從頂層的父節點開始觸發事件,從外到內傳播。微軟則支援事件冒泡 bubbling 從最內層的節點開始觸發事件,逐級冒泡...

事件冒泡和事件捕獲

在js中，繫結的事件預設的執行時間是在冒泡階段執行，而非在捕獲階段 重要 這也是為什麼當父類和子類都繫結了某個事件，會先呼叫子類繫結的事件，後呼叫父類的事件。直接看下面例項 當點選id3元素時候，執行結果是 id2，id3，id1 解析 因為obj2與obj3繫結的方法在捕獲階段執行，obj1的事件...