什麼是事件冒泡事件捕獲

事件冒泡和事件擷取是指在HTML DOM中處理事件時，事件傳播的兩種不同方式。詳細介紹：1.事件冒泡是指當一個元素觸發了某個事件，該事件將從最內層的元素開始傳播到最外層的元素。也就是說，事件首先在觸發元素上觸發，然後逐級向上冒泡，直到達到根元素；2、事件捕獲則是相反的過程，事件從根元素開始，逐級向下捕獲，直到達到觸發事件的元素。

本教學作業系統：windows10系統、Dell G3電腦。

事件冒泡和事件擷取是指在HTML DOM中處理事件時，事件傳播的兩種不同方式。

事件冒泡（Event Bubbling）是指當一個元素觸發了某個事件，該事件將從最內層的元素開始傳播到最外層的元素。也就是說，事件首先在觸發元素上觸發，然後逐級向上冒泡，直到達到根元素。

事件捕獲（Event Capturing）則是相反的過程，事件從根元素開始，逐級向下捕獲，直到達到觸發事件的元素。

在HTML DOM中，預設情況下，事件會依照事件冒泡的方式傳播。也就是說，事件首先在觸發元素上觸發，然後逐級向上冒泡，直到達到根元素。

可以透過addEventListener方法來明確指定事件的傳播方式。 addEventListener方法可以接受三個參數，分別是要監聽的事件類型、事件處理函數、一個布林值，用來指定事件的傳播方式。當傳入的布林值為true時，表示使用事件擷取；當傳入的布林值為false或省略時，表示使用事件冒泡。

例如，以下程式碼示範了事件擷取和事件冒泡的差異：

<div id="outer">
  <div id="inner">
    <button id="button">点击</button>
  </div>
</div>
<script>
var outer = document.getElementById(&#39;outer&#39;);
var inner = document.getElementById(&#39;inner&#39;);
var button = document.getElementById(&#39;button&#39;);
outer.addEventListener(&#39;click&#39;, function() {
  console.log(&#39;事件冒泡 - 外层元素&#39;);
}, false);
inner.addEventListener(&#39;click&#39;, function() {
  console.log(&#39;事件冒泡 - 内层元素&#39;);
}, false);
button.addEventListener(&#39;click&#39;, function() {
  console.log(&#39;事件冒泡 - 按钮&#39;);
}, false);
outer.addEventListener(&#39;click&#39;, function() {
  console.log(&#39;事件捕获 - 外层元素&#39;);
}, true);
inner.addEventListener(&#39;click&#39;, function() {
  console.log(&#39;事件捕获 - 内层元素&#39;);
}, true);
button.addEventListener(&#39;click&#39;, function() {
  console.log(&#39;事件捕获 - 按钮&#39;);
}, true);
</script>

執行上述程式碼後，當點擊按鈕時，會依序觸發事件擷取階段和事件冒泡階段的事件處理函數，並在控制台輸出對應的資訊。

以上是什麼是事件冒泡事件捕獲的詳細內容。更多資訊請關注PHP中文網其他相關文章！