閱讀本文需要理解事件流動(dòng)機(jī)制蕉世，可以查閱之前的DOM Event：事件流動(dòng)（Event Flow）。
我們知道一個(gè)事件被瀏覽器捕獲后會(huì)元素間流動(dòng)陌兑，像這樣：
document 1 7
v ^
body 2 6
v ^
div 3 5
v ^
button 4
事件會(huì)依次在這些元素間觸發(fā)。
但我們有沒(méi)有可能在中間阻止事件的繼續(xù)傳遞呢量九？答案是有的霹肝，Event接口提供了兩個(gè)阻止事件流動(dòng)相關(guān)的API：
-
stopPropagation估蹄，終止事件在元素間的傳遞，但同一元素上的監(jiān)聽(tīng)能繼續(xù)觸發(fā) -
stopImmediatePropagation沫换，終止事件
stopPropagation
該方法停止事件在元素間傳遞臭蚁，但同一元素上的監(jiān)聽(tīng)能繼續(xù)觸發(fā)。例如：
// button上監(jiān)聽(tīng)并調(diào)用stopPropagation
buttonElement.addEventListener('click', (event) => {
console.log('1');
event.stopPropagation();
});
// button上繼續(xù)監(jiān)聽(tīng)苗沧，不會(huì)被上面的stopPropagation影響
buttonElement.addEventListener('click', (event) => {
console.log('2');
});
// div上監(jiān)聽(tīng)刊棕，事件已不能傳到這里
divElement.addEventListener('click', (event) => {
console.log('3');
});
上面這段代碼的輸出是：
1
2
stopImmediatePropagation
該方法會(huì)直接終止事件。事件不但不能在元素間傳遞待逞，就算在同一元素上的后續(xù)監(jiān)聽(tīng)都會(huì)被取消：
// button上監(jiān)聽(tīng)并調(diào)用stopImmediatePropagation
buttonElement.addEventListener('click', (event) => {
console.log('1');
event.stopImmediatePropagation();
});
// button上繼續(xù)監(jiān)聽(tīng)，因stopImmediatePropagation的調(diào)用不會(huì)被執(zhí)行
buttonElement.addEventListener('click', (event) => {
console.log('2');
});
// div上監(jiān)聽(tīng)网严，事件已不能傳到這里
divElement.addEventListener('click', (event) => {
console.log('3');
});
上面這段代碼的輸出是：
1
注意识樱，上述兩個(gè)事件只是停止了事件流動(dòng)，而沒(méi)有“阻止瀏覽器默認(rèn)行為”（prevent default browser events）震束；若你想阻止元素的默認(rèn)行為怜庸，你依然需要額外調(diào)用preventDefault。
