js事件冒泡和事件捕捉

2022-08-11 07:51:10 字數 1015 閱讀 1488

結論:他們是描述事件觸發時序問題的術語。事件捕獲指的是從document到觸發事件的那個節點,即自上而下的去觸發事件。相反的,事件冒泡是自下而上的去觸發事件。繫結事件方法的第三個引數,就是控制事件觸發順序是否為事件捕獲。true,事件捕獲;false,事件冒泡。預設false,即事件冒泡。jquery的e.stoppropagation會阻止冒泡,意思就是到我為止,我的爹和祖宗的事件就不要觸發了。

這是html結構

<

div

id="parent"

>

<

div

id="child"

class

="child"

>

div>

div>

現在我們給它們繫結上事件

document.getelementbyid("parent").addeventlistener("click",function(e))

document.getelementbyid("child").addeventlistener("click",function(e))

結果:

child事件被觸發,child

parent事件被觸發,parent

結論:先child,然後parent。事件的觸發順序自內向外,這就是事件冒泡。

現在改變第三個引數的值為true

document.getelementbyid("parent").addeventlistener("click",function(e),true)

document.getelementbyid("child").addeventlistener("click",function(e),true)

結果:

parent事件被觸發,parent

child事件被觸發,child

結論:先parent,然後child。事件觸發順序變更為自外向內,這就是事件捕獲。

事件冒泡和事件捕捉

事件流 ie的事件流 冒泡 dom標準事件流 先捕獲在冒泡,從document開始 瀏覽器的捕獲從window開始 事件冒泡 事件冒泡是自下而上的去觸發事件。事件捕捉 自上而下的去觸發事件。繫結事件方法的第三個引數,可控制事件觸發順序是否為事件捕獲。true,事件捕獲 false,事件冒泡。預設fa...

深入理解事件冒泡和事件捕捉

前幾天做到阿里的前端面試題,其中的一道選擇題考查的知識點就是事件的傳播,當時做題的時候不確定答案所以決定總結下這方面的知識點。首先事件傳播分為三個階段 第一階段 發生在目標處理程式呼叫之前,稱為捕獲階段 第二階段 目標物件本身的事件處理程式呼叫 第三階段 發生在目標處理程式呼叫之後,稱為冒泡階段 回...

js事件冒泡和事件委託

js事件冒泡 js所謂的事件冒泡就是子級元素的某個事件被觸發,它的上級元素的該事件也被遞迴執行 html js ul data type citypick on click function ul data type citypick on click li function 當li的點選事件被觸發...