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

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

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

前言

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

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

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

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

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

事件配置選項(xiàng)

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

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

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

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

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

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

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

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

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

4. 示例：完整流程

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

<button id="myButton">點(diǎn)擊我</button>
<p id="output"></p>

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

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

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

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

(1) 組件通信

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

場(chǎng)景

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

<!-- 按鈕組件 -->
<button id="myButton">點(diǎn)擊我</button>

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

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

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

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

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

(2) 插件擴(kuò)展

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

場(chǎng)景

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

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

<script>
    // 模擬一個(gè)簡(jiǎn)單的輪播插件
    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)聽(tīng)自定義事件
    carouselElement.addEventListener('slideChanged', (e) => {
        console.log('圖片切換了，當(dāng)前索引:', e.detail.currentIndex);
    });

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

(3) 解耦代碼

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

場(chǎng)景

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

<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)管理

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

場(chǎng)景

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

<button id="addToCart">加入購(gòu)物車(chē)</button>
<span id="cartCount">0</span>

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

    let cartCount = 0;

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

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

6. 自定義事件的注意事項(xiàng)

(1) 事件命名沖突

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

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

(2) 事件冒泡

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

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

(3) 事件取消

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

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

7. 銷(xiāo)毀事件監(jiān)聽(tīng)器

在 JavaScript 中，CustomEvent 創(chuàng)建的對(duì)象本身不需要手動(dòng)銷(xiāo)毀，因?yàn)樗鼈兪桥R時(shí)對(duì)象，通常會(huì)在事件觸發(fā)后被垃圾回收機(jī)制自動(dòng)回收。然而，與自定義事件相關(guān)的事件監(jiān)聽(tīng)器（event listeners）如果不正確清理的話，可能會(huì)導(dǎo)致內(nèi)存泄漏或者重復(fù)觸發(fā)。

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

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

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

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

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

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

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

從 ES6 開(kāi)始，可以使用 AbortController 來(lái)管理事件監(jiān)聽(tīng)器，并通過(guò) signal 參數(shù)一次性移除多個(gè)監(jiān)聽(tīng)器。

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

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

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

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

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

(2) 清理事件監(jiān)聽(tīng)器的場(chǎng)景

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

場(chǎng)景 1：組件卸載

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

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);

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

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

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

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

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

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

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

場(chǎng)景 3：全局事件監(jiān)聽(tīng)器

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

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

window.addEventListener('resize', handleResize);

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