一、核心前提：確保監聽與移除的回調函數是同一引用

// 監聽時用匿名函數
window.addEventListener('scroll', () => { console.log('滾動了'); });
// 移除時無法找到相同引用的函數，監聽仍存在
window.removeEventListener('scroll', () => { console.log('滾動了'); });

// 定義具名函數（確保引用唯一）
function handleScroll() {
  console.log('滾動了');
}
// 監聽
window.addEventListener('scroll', handleScroll);
// 移除（引用與監聽時一致）
window.removeEventListener('scroll', handleScroll);

二、框架場景：Vue/React 組件中如何移除監聽

1. Vue 3 組件（組合式 API）

<template>
  <div>監聽滾動的組件</div>
</template>

<script setup>
import { onMounted, onUnmounted } from 'vue';

// 定義具名回調函數（在setup中聲明，確保整個組件生命周期內引用唯一）
function handleScroll() {
  console.log('頁面滾動了');
}

// 組件掛載時添加監聽
onMounted(() => {
  window.addEventListener('scroll', handleScroll);
});

// 組件卸載時移除監聽（關鍵步驟）
onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll);
});
</script>

2. Vue 2 組件（選項式 API）

<template>
  <div>監聽滾動的組件</div>
</template>

<script>
export default {
  methods: {
    // 回調函數定義在methods中，引用唯一
    handleScroll() {
      console.log('頁面滾動了');
    }
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll);
  },
  beforeDestroy() {
    // 組件銷毀前移除監聽
    window.removeEventListener('scroll', this.handleScroll);
  }
};
</script>

3. React 組件（類組件）

class ScrollComponent extends React.Component {
  // 定義具名回調函數
  handleScroll = () => {
    console.log('頁面滾動了');
  };

  componentDidMount() {
    window.addEventListener('scroll', this.handleScroll);
  }

  componentWillUnmount() {
    // 組件卸載前移除監聽
    window.removeEventListener('scroll', this.handleScroll);
  }

  render() {
    return <div>監聽滾動的組件</div>;
  }
}

4. React 組件（函數組件 + hooks）

import { useEffect, useCallback } from 'react';

const ScrollComponent = () => {
  // 用useCallback緩存回調函數，避免每次渲染重新創建（確保引用唯一）
  const handleScroll = useCallback(() => {
    console.log('頁面滾動了');
  }, []); // 依賴為空數組，函數只創建一次

  useEffect(() => {
    // 添加監聽
    window.addEventListener('scroll', handleScroll);
    
    // 返回清理函數，在組件卸載或依賴變化時執行
    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, [handleScroll]); // 依賴handleScroll，確保函數變化時重新監聽

  return <div>監聽滾動的組件</div>;
};

三、原生 JS 場景：非框架環境下的組件 / 模塊卸載

// 定義一個彈窗模塊
const Popup = {
  // 初始化：創建DOM并添加監聽
  init() {
    this.dom = document.createElement('div');
    this.dom.textContent = '彈窗內容';
    document.body.appendChild(this.dom);
    // 綁定點擊關閉事件
    this.dom.addEventListener('click', this.handleClose);
  },
  // 回調函數（用箭頭函數綁定this，或在構造時綁定）
  handleClose: function() {
    Popup.destroy();
  },
  // 銷毀：移除DOM和監聽
  destroy() {
    // 先移除事件監聽（關鍵）
    this.dom.removeEventListener('click', this.handleClose);
    // 再移除DOM
    document.body.removeChild(this.dom);
    // 清空引用
    this.dom = null;
  }
};

// 使用彈窗
Popup.init();
// 關閉彈窗時執行銷毀（會自動移除監聽）
// Popup.destroy();

四、常見問題與避坑指南

1. 回調函數引用變化導致移除失敗
   • 問題：若回調函數在每次渲染時重新創建（如 React 中未用useCallback的函數、Vue 中在onMounted內定義的函數），會導致removeEventListener找不到相同引用。
   • 解決：用框架提供的緩存方法（如useCallback、methods）確保函數引用穩定。
2. 遺漏 “非 window/document” 的事件監聽
   • 問題：除了window、document，對自定義 DOM 元素（如div、button）的監聽也需移除，尤其動態創建的元素。
   • 解決：在元素被移除前，先移除其上的所有監聽（如 Vue 的v-if銷毀元素前，在onUnmounted中處理）。
3. 事件監聽的 “捕獲 / 冒泡” 階段不匹配
   • 問題：addEventListener的第三個參數（useCapture）若為true（捕獲階段），移除時也需傳入true，否則無法匹配。
   • 解決：移除時嚴格保持useCapture參數與監聽時一致：
     javascript

     運行

     // 監聽時使用捕獲階段
     window.addEventListener('click', handleClick, true);
     // 移除時也必須傳入true
     window.removeEventListener('click', handleClick, true);
     

總結：正確移除事件監聽的 3 個關鍵步驟

1. 定義穩定引用的回調函數：用具名函數、框架緩存方法（useCallback、methods）確保監聽與移除時引用一致。
2. 在組件卸載生命周期中移除：Vue 的onUnmounted、React 的componentWillUnmount/useEffect清理函數、原生 JS 的destroy方法，是佳時機。
3. 覆蓋所有監聽對象：包括window、document、自定義 DOM 元素，避免遺漏任何一處監聽。