JavaScript 事件冒泡與捕獲能干嘛用

在 JavaScript 中，事件冒泡和事件捕獲是兩種事件傳播的機制。它們的主要作用是幫助開發(fā)者確定事件發(fā)生的順序，以及在不同層級的元素上對事件進行響應(yīng)和處理。

事件冒泡（Event Bubbling）：

事件冒泡是指事件從觸發(fā)元素開始，逐級向上傳播到最外層的父元素，直到被監(jiān)聽或終止。在冒泡過程中，事件處理程序會按照它們在代碼中出現(xiàn)的順序依次執(zhí)行。這使得開發(fā)者可以在父元素上監(jiān)聽子元素的事件，而無需在每個子元素上單獨添加事件監(jiān)聽器。

例如，當(dāng)用戶點擊一個按鈕時，按鈕會觸發(fā)一個點擊事件。如果該按鈕位于一個表單內(nèi)，且表單也有點擊事件監(jiān)聽器，那么表單的監(jiān)聽器會在按鈕的監(jiān)聽器之前執(zhí)行，因為事件是從按鈕冒泡到表單的。

事件捕獲（Event Capturing）：

事件捕獲則是從最外層的父元素開始，逐級向下捕獲事件，直到到達觸發(fā)元素。在捕獲過程中，事件處理程序也會按照它們在代碼中出現(xiàn)的順序依次執(zhí)行。這使得開發(fā)者可以在父元素上監(jiān)聽子元素的事件，且在事件到達子元素之前就能進行響應(yīng)。

需要注意的是，事件捕獲和事件冒泡并不是所有瀏覽器都支持的功能。較舊的瀏覽器可能只支持其中一種機制，而現(xiàn)代瀏覽器通常兩者都支持。為了確保兼容性，開發(fā)者可以使用 addEventListener 方法的第三個參數(shù)來指定事件處理程序是在事件捕獲階段還是事件冒泡階段執(zhí)行。如果第三個參數(shù)為 true，則處理程序在捕獲階段執(zhí)行；如果為 false 或省略，則處理程序在冒泡階段執(zhí)行。

總的來說，事件冒泡和事件捕獲為開發(fā)者提供了靈活的方式來處理事件，無論是在父元素還是在子元素上，都可以根據(jù)需要在不同的事件傳播階段添加事件監(jiān)聽器。