之前總是單純的記得事件冒泡和事件捕獲相反,一個(gè)從下至上溺蕉,另一個(gè)從上至下,但是卻沒(méi)有弄明白他們的執(zhí)行順序悼做,導(dǎo)致昨晚筆試CVTE出了類似這么一道題不會(huì)做疯特。
對(duì)于DOM和DOM2級(jí)事件這兩個(gè)區(qū)別就不詳細(xì)解釋了,網(wǎng)上大把資料肛走。
這里僅針對(duì)該題目進(jìn)行事件捕獲和事件冒泡順序進(jìn)行理解漓雅。
首先要明白DOM2級(jí)事件規(guī)定的事件流包含3個(gè)階段,事件捕獲階段朽色、處于目標(biāo)階段邻吞、事件冒泡階段。
下面貼題目代碼(僅核心部分)進(jìn)行詳細(xì)解釋葫男,首先
addEventListener方法有三個(gè)參數(shù)抱冷,分別是事件監(jiān)聽(tīng)類型,事件執(zhí)行函數(shù)和是否進(jìn)行事件捕獲梢褐,默認(rèn)值為false旺遮,即不進(jìn)行事件捕獲(那自然就是事件冒泡了)赵讯。
問(wèn)題來(lái)了,點(diǎn)擊a1元素耿眉,控制臺(tái)如何輸出边翼,我們來(lái)按照DOM2級(jí)事件規(guī)定的事件流進(jìn)行分析一下即可得出答案
<body><div id="dog">? ? ? dog
? ? ? <div id="a1">? ? ? ? a1
? ? ? </div></div><script>? ? ? window.onload =function() {
? ? ? ? let dog = document.getElementById('dog')
? ? ? ? let a1 = document.getElementById('a1')
? ? ? ? a1.addEventListener('click', () => console.log('a1'), true)// a1新增一個(gè)事件捕獲
? ? ? ? a1.addEventListener('click', () => console.log('a1 12'), false)// a1新增一個(gè)事件冒泡
? ? ? ? dog.addEventListener('click', () => console.log('dog12'), false)// dog新增一個(gè)事件冒泡
? ? ? ? dog.addEventListener('click', () => console.log('dog'), true)// dog新增一個(gè)事件捕獲
? ? ? }
? ? </script></body>
這里貼一下流程圖,大家肯定能理解了
沒(méi)錯(cuò)鸣剪,最后控制臺(tái)輸出如下
组底,
先執(zhí)行捕獲再執(zhí)行冒泡