使用AddEventListener和RemoveEventListener在JavaScript中處理事件

addEventListener 用於添加事件監聽器，支持多次綁定不衝突；02. removeEventListener 用於移除監聽器，需與添加時參數一致，尤其是不能使用匿名函數；03. 使用options.once 可實現一次性監聽；04. 組件卸載時應清理監聽器以避免內存洩漏；05. 可根據狀態動態綁定或解綁事件監聽器。

在JavaScript 中， addEventListener和removeEventListener是處理事件的標準方式。它們讓你可以靈活地綁定和解綁事件監聽器，而不必擔心重複綁定或者覆蓋已有監聽器。

基本用法：如何添加一個事件監聽器

使用addEventListener可以給DOM 元素添加事件監聽器。它的基本語法是：

 element.addEventListener(event, handler, options);

• event是要監聽的事件類型，比如'click' 、 'keydown' 。
• handler是當事件觸發時執行的函數。
• options是可選參數，控制捕獲/冒泡階段以及是否只執行一次等。

例如：

 const button = document.getElementById('myButton');
button.addEventListener('click', function() {
  console.log('按鈕被點擊了');
});

這樣寫的好處是，你可以多次調用addEventListener給同一個元素添加多個監聽器，不會互相干擾。

移除監聽器：為什麼要用removeEventListener

如果你希望某個事件監聽器只在特定條件下生效，就需要在合適的時候移除它。這時候就要用到removeEventListener ：

 element.removeEventListener(event, handler, options);

注意：必須傳入與添加時相同的參數，尤其是handler函數不能是匿名函數，否則無法正確移除。

錯誤示例（無法移除）：

 button.addEventListener('click', function() {
  console.log('無效移除');
});
button.removeEventListener('click', function() {
  console.log('無效移除');
}); // 不會起作用，因為這是兩個不同的函數引用

正確做法：

 function handleClick() {
  console.log('點擊了按鈕');
}

button.addEventListener('click', handleClick);
button.removeEventListener('click', handleClick); // 正確移除

使用場景與最佳實踐

場景一：一次性事件監聽

有時候你只想讓監聽器執行一次，之後自動解除綁定。可以通過options.once參數實現：

 button.addEventListener('click', function() {
  console.log('只會觸發一次');
}, { once: true });

這樣就不需要手動調用removeEventListener 。

場景二：組件卸載時清理監聽器

在現代前端框架中（如React、Vue），組件卸載時應該清除所有事件監聽器，避免內存洩漏。

例如，在React 的useEffect 中：

 useEffect(() => {
  const handleResize = () => {
    console.log('窗口大小變化');
  };

  window.addEventListener('resize', handleResize);

  return () => {
    window.removeEventListener('resize', handleResize);
  };
}, []);

這種寫法確保組件卸載時及時清理資源。

場景三：動態綁定和解綁

有些時候你需要根據狀態來決定是否啟用某個事件監聽器。比如：

 let isEnabled = true;

function toggleHandler() {
  if (isEnabled) {
    button.addEventListener('click', doSomething);
  } else {
    button.removeEventListener('click', doSomething);
  }
}

這種方式適用於交互邏輯頻繁切換的場景。

基本上就這些。合理使用addEventListener和removeEventListener ，能讓你的代碼更可控、更容易維護。

以上是使用AddEventListener和RemoveEventListener在JavaScript中處理事件的詳細內容。更多資訊請關注PHP中文網其他相關文章！