JavaScript中的自定义事件举例详解-牛翰网

前言

在 JavaScript 中，CustomEvent 是一种用于创建和触发自定义事件的机制。它允许开发者定义自己的事件类型，并在需要时通过代码触发这些事件。CustomEvent 是 Event 接口的子类，提供了更灵活的事件处理方式。

1. 创建自定义事件

使用 CustomEvent 构造函数可以创建一个自定义事件。构造函数接受两个参数：

事件类型：一个字符串，表示事件的名称（如 "myEvent"）。
事件配置：一个可选对象，用于配置事件的属性。

const event = new CustomEvent('myEvent', {
    detail: { message: 'Hello, world!' }, // 传递的数据
    bubbles: true, // 是否冒泡
    cancelable: true // 是否可以取消
});

事件配置选项

detail：传递的自定义数据，可以在事件监听器中访问。
bubbles：事件是否冒泡（默认 false）。
cancelable：事件是否可以取消（默认 false）。

2. 触发自定义事件

使用 dispatchEvent 方法在目标元素上触发自定义事件。

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

// 创建自定义事件
const event = new CustomEvent('myEvent', {
    detail: { message: 'Hello, world!' }
});

// 触发事件
element.dispatchEvent(event);

3. 监听自定义事件

通过 addEventListener 方法监听自定义事件，并在事件触发时执行回调函数。

element.addEventListener('myEvent', (e) => {
    console.log('自定义事件触发:', e.detail.message);
});

4. 示例：完整流程

以下是一个完整的示例，展示了如何创建、触发和监听自定义事件。

<button id="myButton">点击我</button>
<p id="output"></p>

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

    // 监听自定义事件
    button.addEventListener('myEvent', (e) => {
        output.textContent = `收到消息: ${e.detail.message}`;
    });

    // 点击按钮时触发自定义事件
    button.addEventListener('click', () => {
        const event = new CustomEvent('myEvent', {
            detail: { message: '你好，世界！' }
        });
        button.dispatchEvent(event);
    });
</script>

5. 自定义事件的应用场景

(1) 组件通信

在复杂的 Web 应用中，不同组件之间可能需要通信。自定义事件可以用于实现这种通信，而不需要组件之间直接耦合。

场景

假设有一个页面，包含一个按钮组件和一个显示组件。当按钮被点击时，显示组件需要更新内容。

<!-- 按钮组件 -->
<button id="myButton">点击我</button>

<!-- 显示组件 -->
<div id="display"></div>

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

    // 显示组件
    const display = document.getElementById('display');

    // 监听自定义事件
    display.addEventListener('updateDisplay', (e) => {
        display.textContent = e.detail.message;
    });

    // 点击按钮时触发自定义事件
    button.addEventListener('click', () => {
        const event = new CustomEvent('updateDisplay', {
            detail: { message: '按钮被点击了！' }
        });
        display.dispatchEvent(event);
    });
</script>

(2) 插件扩展

自定义事件可以用于扩展插件或库的功能，允许开发者在特定时机执行自定义逻辑。

场景

假设有一个图片轮播插件，开发者希望在图片切换时执行一些自定义逻辑。

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

            // 触发自定义事件
            const event = new CustomEvent('slideChanged', {
                detail: { currentIndex: this.currentIndex }
            });
            this.element.dispatchEvent(event);
        }
    }

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

    // 监听自定义事件
    carouselElement.addEventListener('slideChanged', (e) => {
        console.log('图片切换了，当前索引:', e.detail.currentIndex);
    });

    // 模拟切换图片
    setInterval(() => carousel.next(), 3000);
</script>

(3) 解耦代码

通过自定义事件，可以将代码解耦为独立的模块，模块之间通过事件通信，而不是直接调用函数。

场景

假设有一个日志模块和一个用户模块，当用户登录时，日志模块需要记录日志。

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

自定义事件可以用于实现简单的状态管理，当状态发生变化时触发事件，通知相关组件更新。

场景

假设有一个购物车应用，当商品数量变化时，需要更新购物车图标上的数量显示。

<button id="addToCart">加入购物车</button>
<span id="cartCount">0</span>

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

    let cartCount = 0;

    // 监听自定义事件
    document.addEventListener('cartUpdated', (e) => {
        cartCountElement.textContent = e.detail.count;
    });

    // 点击按钮时触发自定义事件
    addToCartButton.addEventListener('click', () => {
        cartCount += 1;
        const event = new CustomEvent('cartUpdated', {
            detail: { count: cartCount }
        });
        document.dispatchEvent(event);
    });
</script>

6. 自定义事件的注意事项

(1) 事件命名冲突

自定义事件的名称应避免与原生事件或其他库的事件冲突。建议使用命名空间或前缀。

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

(2) 事件冒泡

如果希望事件冒泡，需要在创建事件时设置 bubbles: true。

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

(3) 事件取消

如果希望事件可以被取消，需要在创建事件时设置 cancelable: true，并在监听器中调用 e.preventDefault()。

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

7. 销毁事件监听器

在 JavaScript 中，CustomEvent 创建的对象本身不需要手动销毁，因为它们是临时对象，通常会在事件触发后被垃圾回收机制自动回收。然而，与自定义事件相关的事件监听器（event listeners）如果不正确清理的话，可能会导致内存泄漏或者重复触发。

(1) 移除事件监听器

使用 removeEventListener 方法移除不再需要的事件监听器。

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

// 定义事件处理函数
const handleEvent = (e) => {
    console.log('事件触发:', e.detail.message);
};

// 添加事件监听器
element.addEventListener('myEvent', handleEvent);

// 触发自定义事件
const event = new CustomEvent('myEvent', {
    detail: { message: 'Hello, world!' }
});
element.dispatchEvent(event);

// 移除事件监听器
element.removeEventListener('myEvent', handleEvent);

从 ES6 开始，可以使用 AbortController 来管理事件监听器，并通过 signal 参数一次性移除多个监听器。

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

const handleEvent = (e) => {
    console.log('事件触发:', e.detail.message);
};

// 添加事件监听器，并传入 signal
element.addEventListener('myEvent', handleEvent, { signal });

// 触发自定义事件
const event = new CustomEvent('myEvent', {
    detail: { message: 'Hello, world!' }
});
element.dispatchEvent(event);

// 移除事件监听器
controller.abort(); // 所有通过 signal 添加的监听器都会被移除

(2) 清理事件监听器的场景

以下是一些需要清理事件监听器的常见场景：

场景 1：组件卸载

在单页应用（SPA）或动态页面中，当组件或 DOM 元素被移除时，需要清理其事件监听器。

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

    handleEvent(e) {
        console.log('事件触发:', e.detail.message);
    }

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

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

// 组件卸载时调用 destroy 方法
component.destroy();

场景 2：动态创建的元素

对于动态创建的元素，如果不再需要，应该移除其事件监听器。

const button = document.createElement('button');
button.textContent = '点击我';

const handleClick = () => {
    console.log('按钮被点击');
};

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

// 移除按钮时清理事件监听器
button.removeEventListener('click', handleClick);
button.remove(); // 从 DOM 中移除按钮

场景 3：全局事件监听器

对于全局事件监听器（如 window 或 document 上的监听器），如果不再需要，也应该移除。

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

window.addEventListener('resize', handleResize);

// 移除全局事件监听器
window.removeEventListener('resize', handleResize);