JavaScript事件冒泡和捕獲如何工作

小樊
83
2024-11-01 23:39:08
欄目: 編程語言

JavaScript 事件冒泡（Event Bubbling）和事件捕獲（Event Capturing）是描述事件如何在 DOM（文檔對(duì)象模型）樹中傳播的兩種機(jī)制

  1. 事件捕獲： 事件捕獲是從根節(jié)點(diǎn)（通常是 document 對(duì)象）開始，逐級(jí)向下捕獲子元素上的事件。當(dāng)事件觸發(fā)時(shí)，首先執(zhí)行最外層的捕獲事件處理程序，然后逐層向內(nèi)進(jìn)行，直到到達(dá)目標(biāo)元素。事件捕獲階段可以通過 addEventListener 方法的第三個(gè)參數(shù)（capture）來設(shè)置，將其設(shè)置為 true 即可啟用捕獲模式。

示例：

document.addEventListener('click', function(event) {
  console.log('捕獲階段');
}, true);

element.addEventListener('click', function(event) {
  console.log('目標(biāo)元素');
}, false);
  1. 事件冒泡： 事件冒泡是從目標(biāo)元素開始，逐級(jí)向上傳播到根節(jié)點(diǎn)。當(dāng)事件觸發(fā)時(shí)，首先執(zhí)行目標(biāo)元素的事件處理程序，然后逐層向外進(jìn)行，直到到達(dá)根節(jié)點(diǎn)。事件冒泡階段可以通過 addEventListener 方法的第三個(gè)參數(shù)（capture）來設(shè)置，將其設(shè)置為 false 或省略該參數(shù)（默認(rèn)為 false）即可啟用冒泡模式。

示例：

element.addEventListener('click', function(event) {
  console.log('目標(biāo)元素');
}, false);

document.addEventListener('click', function(event) {
  console.log('冒泡階段');
}, false);

總結(jié)：事件冒泡和事件捕獲是描述事件在 DOM 樹中傳播順序的兩種機(jī)制。事件捕獲從根節(jié)點(diǎn)開始，逐級(jí)向下捕獲子元素上的事件；而事件冒泡從目標(biāo)元素開始，逐級(jí)向上傳播到根節(jié)點(diǎn)。通過設(shè)置 addEventListener 方法的第三個(gè)參數(shù)，可以選擇啟用捕獲模式或冒泡模式。

0 踩