DOM元素的事件捕獲和冒泡

2021-09-01 01:24:34 字數 944 閱讀 2799

[b]事件:

當html頁面上發生乙個事件時,每個層次上的dom元素都有機會處理這個事件。

以下面的html**為例:

how are you!

該頁面在瀏覽器上呈現的效果如下圖(html頁面呈現的效果):

如果單擊了頁面中的a(錨)元素,那麼,和元素全都應該得到響應這次單擊的機會。因為這

3個元素同時都處於使用者滑鼠的指標之下。

允許多個元素響應單擊事件的一種策略叫做事件捕獲。在事件捕獲的過程中,事件首先會交給最外層的元素,接著再交給更具體的元素。

在這個例子中,意味著單擊事件首先會傳遞給,然後是,最後是.如圖:事件捕獲。

另外一種相反的策略叫做事件冒泡。即當事件發生時,會首先送給最具體的元素,在這個元素獲得相應機會之後,

事件會向上冒泡到更一般的元素。在這個例子中,會首先處理事件,然後按照順序依次是和.

如圖:事件冒泡。

dom標準規定應該同時使用這兩個策略:首先,事件要從一般到具體進行捕獲,然後,事件再通過冒泡返回dom

樹的頂層。

注:事件捕獲和事件冒泡是"瀏覽器大戰"時期分別由netscape和微軟提出的兩種相反的事件傳播模型。

停止事件傳播:

事件物件提供了乙個stoppropagation()的方法,該方法可以完全阻止事件的冒泡。

當使用者單擊錨元素連線時,瀏覽器會載入乙個新頁面,它是單擊錨元素的預設操作。類似地,當使用者

在編輯完表單後按下回車鍵時,會觸發表單的submit事件,在此事件發生後,表單提交才會真正發生。

如果我們不希望執行這種預設操作,那麼在事件物件上呼叫preventdefault()方法,則可以在觸發預設

操作之前終止事件。

如果想同時停止事件傳播和預設操作,可以在事件處理程式中返回false,這是對在事件物件上同時呼叫

stoppropagation()和preventdefault()的一種簡寫方式。[/b]

事件冒泡和事件捕獲

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

事件捕獲和事件冒泡

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

事件冒泡和事件捕獲

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