zhao
JavaScript 中的 `addEventListener` 是 HTML5 中引入的一個方法，用於添加事件監聽器到 DOM 元素上。這個方法是替代舊的 `onclick` 和 `attachEvent` 的更標準的方式。它允許開發者以一種一致且可擴展的方式來處理事件，並且可以更好地支持多個事件的綁定。以下是對 `addEventListener` 方法的深入探討：
`addEventListener` 基礎知識
語法
element.addEventListener(type, listener[, options]);
// type: 表示要綁定的特定類型的事件（例如 click）
// listener: 當事件觸發時執行的函數
// options: (可選) 一個對象包含配置選項，如 capture、once 等
捕獲階段與冒泡階段
在介紹 `addEventListener` 之前，我們需要了解 HTML 事件流的概念，特別是“捕獲”（capture phase）和“冒泡”（bubbling phase）這兩個概念。
- 捕獲：事件從最頂層向下傳播至目標元素的過程。
- 冒泡：事件從目標元素向上傳播至最外層祖先元素的過程。
默認情況下，事件會經歷這兩個階段。但是，通過使用 `addEventListener` 時的第三個參數 `options`，我們可以控制事件的行爲，比如選擇只執行捕獲或冒泡中的一個階段。
阻止事件冒泡
有時我們可能需要在某個元素接收到事件後阻止其繼續向父級傳遞，這可以通過調用 `event.stopPropagation()` 來實現。這樣就可以防止不必要的重複操作或者不希望發生的事件行爲。
function handleClick(e) {
console.log('點擊了子元素'); // 這裏會有輸出
e.stopPropagation(); // 阻止事件冒泡
}
document.querySelector('#parent').addEventListener('click', handleClick);
在上述代碼中，如果用戶點擊的是 `
取消默認行爲
除了阻止事件冒泡之外，你可能還需要阻止事件的默認行爲。你可以通過調用 `event.preventDefault()` 來做到這一點。
function handleSubmit(e) {
e.preventDefault(); // 阻止表單提交
// 在這裏進行 Ajax 請求或其他邏輯處理
}
formElement.addEventListener('submit', handleSubmit);
在這個例子中，即使用戶已經提交了表單，由於調用了 `preventDefault()`，瀏覽器不會自動刷新頁面，而是執行指定的 JavaScript 邏輯。
`EventListenerOptions` 對象
`addEventListener` 的第三個參數 `options` 實際上是一個 [`EventListenerOptions`](https://developer.mozilla.org/zh-TW/docs/Web/API/EventListenerOptions) 對象的引用。這個對象提供了更多的靈活性來定製事件監聽器的行爲。以下是一些常用的屬性：
- `capture`: 如果設置爲 true，則表明事件會在捕獲階段而不是冒泡階段運行。默認爲 false。
- `once`: 如果設置爲 true，則指定該監聽器只會被調用一次。之後它會自動移除自己。
- `passive`: 在大多數移動設備上，設置這個爲 true 可以顯著提高性能，因爲它告訴瀏覽器不要嘗試阻止觸摸滾動，從而避免不必要的重繪和迴流。
請注意，並不是所有的瀏覽器和平臺都支持這些高級特性，因此在實際應用中需要考慮兼容性問題。
`addEventListener` 提供了一種強大而靈活的方法來管理網頁上的事件。理解它的基礎以及如何正確地使用它是每個 Web 開發者的必備技能。通過這篇文章，你應該對 `addEventListener` 有了一定的認識，並且在編寫健壯的前端應用程序時會更有信心。
