js中事件的冒泡,委派和傳播

2021-10-09 06:17:47 字數 595 閱讀 3248

事件冒泡(bubble):

事件冒泡是指時間向上傳播,當後代元素的事件被觸發時,其祖先元素的相同事件也會被觸發,一般情況下,冒泡都是有益的,但如果不想要它冒泡,就可以使用event.cancelbubble = true;來進行取消冒泡。

事件的委派:

事件的委派是指事件統一繫結給元素的共同的祖先元素,當後代元素上的事件被觸發時,會一直冒泡到祖先元素,從而通過祖先元素的響應函式來處理事件。事件的委派利用了事件的冒泡,可以通過事件的委派來減少事件的繫結。(具體應用可參考我的文章:js實現增加和刪除功能的改進)。

事件的傳播:

事件傳播,網景公司認為由內向外傳播,事件觸發時先觸發當前元素,再觸發祖先元素

微軟認為由外向內傳播,先觸發祖先元素,在是當前元素,事件應該在冒泡階段執行

w3c將事件傳播分為了三個階段,

1捕獲階段,從最外層的祖先元素向目標元素進行事件的捕獲,但預設此時不會觸發事件

2目標階段,事件捕獲到目標元素,捕獲結束開始在目標元素上觸發事件

3冒泡階段,事件從目標元素向他的祖先元素傳遞,依次觸發祖先元素上的事件

如果希望捕獲階段執行,則將addeventlistener()第三個引數改為true;

js學習(四) 事件的傳播(事件的捕獲和冒泡)

事件的傳播流程 事件的傳播 關於事件的傳播,網景公司和微軟公司有不同的理解。微軟公司認為事件應該是由內向外傳播,也就是當事件觸發時,應該先觸發當前元素上的事件,然後再向當前元素的祖先元素上傳播,也就是說事件的執行應該在冒泡階段執行。網景公司認為事件應該是由外向內傳播,也就是當前事件觸發時,應該先觸發...

js中的事件冒泡

事件冒泡和阻止事件冒泡 事件冒泡的原理 從實際操作的元素 事件 向上級父元素一級一級執行下去,直到達到document window,冒泡過程結束。例如 假設我有乙個 div 盒子,裡面巢狀了1個子元素 p,我要給子元素 p 繫結了onclick事件,如果父元素也繫結了這個相同的事件,當觸發子元素 ...

JS的事件冒泡和事件捕獲

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