事件的核心結束,詳解捕獲,冒泡

2021-08-25 07:12:49 字數 1514 閱讀 4817

flex事件的傳播路徑

如果最內層的按鈕發出事件,那麼事件傳播路徑就是

事件的傳播依次經歷「捕獲」,「目標」,「冒泡」,「目標」四個階段

捕獲和目標(從外到內)

目標和冒泡(觸發事件捕獲者來捕捉事件,同時沿著路徑繼續向上傳播)

btn1最新捕捉到事件,隨即響應,事件好不等待,繼續向外層冒泡。依次嚮往傳播事件。

事件流呈現v字形,事件物件沿著傳播路徑先由外向內傳播,然後再由內向外傳播。無論捕捉還是冒泡,兩個階段中都能通過「目標」捕捉到事件物件,最常用的是在冒泡階段對事件捕捉。

注意:1、 如果在捕捉/目標階段捕捉事件,那麼冒泡、目標階段將無效,不能捕捉事件;反之依然

2、 如果想捕捉兩階段的同一事件,則可以變相通過定義多個事件捕捉者來實現

發出事件:

事件發起者.dispatchevent(事件物件)

通過此方法把事件物件傳播出去

button1.dispatchevent(myevent);

事件捕捉者.addeventlistener(事件名稱,響應函式);

事件捕捉者監聽某事件是否傳遞到此,捕捉到該事件後,把事件作為引數給響應者處理

panel.addeventlistener(event1.event_name,handdle);

事件傳播過程中當前經過的物件:

事件物件.currenttarger.id

事件在傳播路徑上傳播,被乙個捕捉著捕捉到,id就是該捕捉者的id

在捕捉/目標階段捕捉事件,需要設定addeventlistener的第三個引數為true,預設為false

panel.addeventlistener(event1. event_name,handle,true);

在冒泡階段捕捉事件,需要在定義事件的時候,顯式地設定基類的建構函式的第二個引數為true,這樣該事件就會向外層冒泡.

super(par_eventname,true);

同時,addeventlistener函式的第三個參為false。

panel.addeventlistener(event1. event_name,handle,false);

在冒泡和捕捉階段都捕捉事件

需要在定義事件時,顯式地設定基類的建構函式的第二個引數為true,這樣該事件就會向外層冒泡.

super(par_eventname,true);

同時編寫兩個同一事件的監聽函式addeventlistener,其中usecapture即第三個引數為true,另乙個為false,響應函式可以相同,也可以不同。

panel.addeventlistener(event1. event_name,handle,true);

panel.addeventlistener(event1. event_name,handle,false);

或panel.addeventlistener(event1. event_name,handle1,true);

panel.addeventlistener(event1. event_name,handle2,false);

事件的捕獲和冒泡

obj1 obj2 world 事件的處理分冒泡 和捕獲 冒泡是從內往外,捕獲是從外往內 正常的onclick 是冒泡 addeventlistener 要看第三個引數,如果是true則是捕獲機制,如果是false則是冒泡機制,如果過時onclick和false同事的話,在chrom誰先宣告誰先觸發...

JS的事件冒泡和事件捕獲

先上結論 他們是描述事件觸發時序問題的術語。事件捕獲指的是從document到觸發事件的那個節點,即自上而下的去觸發事件。相反的,事件冒泡是自下而上的去觸發事件。繫結事件方法的第三個引數,就是控制事件觸發順序是否為事件捕獲。true,事件捕獲 false,事件冒泡。預設false,即事件冒泡。jqu...

JS的事件冒泡事件和事件捕獲分析

首先來說一下兩者的定義 1 冒泡型事件 事件按照從最特定的事件目標到最不特定的事件目標 document物件 的順序觸發。ie 5.5 div body document ie 6.0 div body html document mozilla 1.0 div body html document...