JavaScript中的自定義事件舉例詳解

更新時間：2025年04月10日 10:40:37 作者：liangshanbo1215

在JavaScript中自定義事件的用法是前端開發(fā)中一個較為高級的話題,它允許開發(fā)者創(chuàng)建和觸發(fā)自己的事件,從而達到更好的模塊化和代碼解耦,這篇文章主要介紹了JavaScript中自定義事件的相關(guān)資料,需要的朋友可以參考下

前言

在 JavaScript 中，CustomEvent 是一種用于創(chuàng)建和觸發(fā)自定義事件的機制。它允許開發(fā)者定義自己的事件類型，并在需要時通過代碼觸發(fā)這些事件。CustomEvent 是 Event 接口的子類，提供了更靈活的事件處理方式。

1. 創(chuàng)建自定義事件

使用 CustomEvent 構(gòu)造函數(shù)可以創(chuàng)建一個自定義事件。構(gòu)造函數(shù)接受兩個參數(shù)：

事件類型：一個字符串，表示事件的名稱（如 "myEvent"）。
事件配置：一個可選對象，用于配置事件的屬性。

const event = new CustomEvent('myEvent', {
    detail: { message: 'Hello, world!' }, // 傳遞的數(shù)據(jù)
    bubbles: true, // 是否冒泡
    cancelable: true // 是否可以取消
});

事件配置選項

detail：傳遞的自定義數(shù)據(jù)，可以在事件監(jiān)聽器中訪問。
bubbles：事件是否冒泡（默認 false）。
cancelable：事件是否可以取消（默認 false）。

2. 觸發(fā)自定義事件

使用 dispatchEvent 方法在目標元素上觸發(fā)自定義事件。

const element = document.getElementById('myElement');

// 創(chuàng)建自定義事件
const event = new CustomEvent('myEvent', {
    detail: { message: 'Hello, world!' }
});

// 觸發(fā)事件
element.dispatchEvent(event);

3. 監(jiān)聽自定義事件

通過 addEventListener 方法監(jiān)聽自定義事件，并在事件觸發(fā)時執(zhí)行回調(diào)函數(shù)。

element.addEventListener('myEvent', (e) => {
    console.log('自定義事件觸發(fā):', e.detail.message);
});

4. 示例：完整流程

以下是一個完整的示例，展示了如何創(chuàng)建、觸發(fā)和監(jiān)聽自定義事件。

<button id="myButton">點擊我</button>
<p id="output"></p>

<script>
    const button = document.getElementById('myButton');
    const output = document.getElementById('output');

    // 監(jiān)聽自定義事件
    button.addEventListener('myEvent', (e) => {
        output.textContent = `收到消息: ${e.detail.message}`;
    });

    // 點擊按鈕時觸發(fā)自定義事件
    button.addEventListener('click', () => {
        const event = new CustomEvent('myEvent', {
            detail: { message: '你好，世界！' }
        });
        button.dispatchEvent(event);
    });
</script>

5. 自定義事件的應(yīng)用場景

(1) 組件通信

在復(fù)雜的 Web 應(yīng)用中，不同組件之間可能需要通信。自定義事件可以用于實現(xiàn)這種通信，而不需要組件之間直接耦合。

場景

假設(shè)有一個頁面，包含一個按鈕組件和一個顯示組件。當(dāng)按鈕被點擊時，顯示組件需要更新內(nèi)容。

<!-- 按鈕組件 -->
<button id="myButton">點擊我</button>

<!-- 顯示組件 -->
<div id="display"></div>

<script>
    // 按鈕組件
    const button = document.getElementById('myButton');

    // 顯示組件
    const display = document.getElementById('display');

    // 監(jiān)聽自定義事件
    display.addEventListener('updateDisplay', (e) => {
        display.textContent = e.detail.message;
    });

    // 點擊按鈕時觸發(fā)自定義事件
    button.addEventListener('click', () => {
        const event = new CustomEvent('updateDisplay', {
            detail: { message: '按鈕被點擊了！' }
        });
        display.dispatchEvent(event);
    });
</script>

(2) 插件擴展

自定義事件可以用于擴展插件或庫的功能，允許開發(fā)者在特定時機執(zhí)行自定義邏輯。

場景

假設(shè)有一個圖片輪播插件，開發(fā)者希望在圖片切換時執(zhí)行一些自定義邏輯。

<div id="carousel"></div>

<script>
    // 模擬一個簡單的輪播插件
    class Carousel {
        constructor(element) {
            this.element = element;
            this.currentIndex = 0;
            this.images = ['image1.jpg', 'image2.jpg', 'image3.jpg'];
            this.render();
        }

        render() {
            this.element.innerHTML = `<img src="${this.images[this.currentIndex]}" alt="Carousel Image">`;
        }

        next() {
            this.currentIndex = (this.currentIndex + 1) % this.images.length;
            this.render();

            // 觸發(fā)自定義事件
            const event = new CustomEvent('slideChanged', {
                detail: { currentIndex: this.currentIndex }
            });
            this.element.dispatchEvent(event);
        }
    }

    // 初始化輪播插件
    const carouselElement = document.getElementById('carousel');
    const carousel = new Carousel(carouselElement);

    // 監(jiān)聽自定義事件
    carouselElement.addEventListener('slideChanged', (e) => {
        console.log('圖片切換了，當(dāng)前索引:', e.detail.currentIndex);
    });

    // 模擬切換圖片
    setInterval(() => carousel.next(), 3000);
</script>

(3) 解耦代碼

通過自定義事件，可以將代碼解耦為獨立的模塊，模塊之間通過事件通信，而不是直接調(diào)用函數(shù)。

場景

假設(shè)有一個日志模塊和一個用戶模塊，當(dāng)用戶登錄時，日志模塊需要記錄日志。

<button id="loginButton">登錄</button>

<script>
    // 用戶模塊
    const loginButton = document.getElementById('loginButton');
    loginButton.addEventListener('click', () => {
        console.log('用戶登錄成功');
        const event = new CustomEvent('userLoggedIn', {
            detail: { username: 'Alice' }
        });
        document.dispatchEvent(event);
    });

    // 日志模塊
    document.addEventListener('userLoggedIn', (e) => {
        console.log(`日志：用戶 ${e.detail.username} 登錄了`);
    });
</script>

(4) 狀態(tài)管理

自定義事件可以用于實現(xiàn)簡單的狀態(tài)管理，當(dāng)狀態(tài)發(fā)生變化時觸發(fā)事件，通知相關(guān)組件更新。

場景

假設(shè)有一個購物車應(yīng)用，當(dāng)商品數(shù)量變化時，需要更新購物車圖標上的數(shù)量顯示。

<button id="addToCart">加入購物車</button>
<span id="cartCount">0</span>

<script>
    const addToCartButton = document.getElementById('addToCart');
    const cartCountElement = document.getElementById('cartCount');

    let cartCount = 0;

    // 監(jiān)聽自定義事件
    document.addEventListener('cartUpdated', (e) => {
        cartCountElement.textContent = e.detail.count;
    });

    // 點擊按鈕時觸發(fā)自定義事件
    addToCartButton.addEventListener('click', () => {
        cartCount += 1;
        const event = new CustomEvent('cartUpdated', {
            detail: { count: cartCount }
        });
        document.dispatchEvent(event);
    });
</script>

6. 自定義事件的注意事項

(1) 事件命名沖突

自定義事件的名稱應(yīng)避免與原生事件或其他庫的事件沖突。建議使用命名空間或前綴。

const event = new CustomEvent('myLibrary:myEvent');

(2) 事件冒泡

如果希望事件冒泡，需要在創(chuàng)建事件時設(shè)置 bubbles: true。

const event = new CustomEvent('myEvent', { bubbles: true });

(3) 事件取消

如果希望事件可以被取消，需要在創(chuàng)建事件時設(shè)置 cancelable: true，并在監(jiān)聽器中調(diào)用 e.preventDefault()。

element.addEventListener('myEvent', (e) => {
    if (someCondition) {
        e.preventDefault(); // 取消事件
    }
});

7. 銷毀事件監(jiān)聽器

在 JavaScript 中，CustomEvent 創(chuàng)建的對象本身不需要手動銷毀，因為它們是臨時對象，通常會在事件觸發(fā)后被垃圾回收機制自動回收。然而，與自定義事件相關(guān)的事件監(jiān)聽器（event listeners）如果不正確清理的話，可能會導(dǎo)致內(nèi)存泄漏或者重復(fù)觸發(fā)。

(1) 移除事件監(jiān)聽器

使用 removeEventListener 方法移除不再需要的事件監(jiān)聽器。

const element = document.getElementById('myElement');

// 定義事件處理函數(shù)
const handleEvent = (e) => {
    console.log('事件觸發(fā):', e.detail.message);
};

// 添加事件監(jiān)聽器
element.addEventListener('myEvent', handleEvent);

// 觸發(fā)自定義事件
const event = new CustomEvent('myEvent', {
    detail: { message: 'Hello, world!' }
});
element.dispatchEvent(event);

// 移除事件監(jiān)聽器
element.removeEventListener('myEvent', handleEvent);

從 ES6 開始，可以使用 AbortController 來管理事件監(jiān)聽器，并通過 signal 參數(shù)一次性移除多個監(jiān)聽器。

const controller = new AbortController();
const { signal } = controller;

const handleEvent = (e) => {
    console.log('事件觸發(fā):', e.detail.message);
};

// 添加事件監(jiān)聽器，并傳入 signal
element.addEventListener('myEvent', handleEvent, { signal });

// 觸發(fā)自定義事件
const event = new CustomEvent('myEvent', {
    detail: { message: 'Hello, world!' }
});
element.dispatchEvent(event);

// 移除事件監(jiān)聽器
controller.abort(); // 所有通過 signal 添加的監(jiān)聽器都會被移除

(2) 清理事件監(jiān)聽器的場景

以下是一些需要清理事件監(jiān)聽器的常見場景：

場景 1：組件卸載

在單頁應(yīng)用（SPA）或動態(tài)頁面中，當(dāng)組件或 DOM 元素被移除時，需要清理其事件監(jiān)聽器。

class MyComponent {
    constructor(element) {
        this.element = element;
        this.handleEvent = this.handleEvent.bind(this);
        this.element.addEventListener('myEvent', this.handleEvent);
    }

    handleEvent(e) {
        console.log('事件觸發(fā):', e.detail.message);
    }

    destroy() {
        this.element.removeEventListener('myEvent', this.handleEvent);
        this.element = null; // 清除引用
    }
}

const element = document.getElementById('myElement');
const component = new MyComponent(element);

// 組件卸載時調(diào)用 destroy 方法
component.destroy();

場景 2：動態(tài)創(chuàng)建的元素

對于動態(tài)創(chuàng)建的元素，如果不再需要，應(yīng)該移除其事件監(jiān)聽器。

const button = document.createElement('button');
button.textContent = '點擊我';

const handleClick = () => {
    console.log('按鈕被點擊');
};

button.addEventListener('click', handleClick);
document.body.appendChild(button);

// 移除按鈕時清理事件監(jiān)聽器
button.removeEventListener('click', handleClick);
button.remove(); // 從 DOM 中移除按鈕

場景 3：全局事件監(jiān)聽器

對于全局事件監(jiān)聽器（如 window 或 document 上的監(jiān)聽器），如果不再需要，也應(yīng)該移除。

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

window.addEventListener('resize', handleResize);

// 移除全局事件監(jiān)聽器
window.removeEventListener('resize', handleResize);