JavaScript篇：自定义事件：让你的代码学会'打小报告'

大家好，我是江城开朗的豌豆，一名拥有6年以上前端开发经验的工程师。我精通HTML、CSS、JavaScript等基础前端技术，并深入掌握Vue、React、Uniapp、Flutter等主流框架，能够高效解决各类前端开发问题。在我的技术栈中，除了常见的前端开发技术，我还擅长3D开发，熟练使用Three.js进行3D图形绘制，并在虚拟现实与数字孪生技术上积累了丰富的经验，特别是在虚幻引擎开发方面，有着深入的理解和实践。

我一直认为技术的不断探索和实践是进步的源泉，近年来，我深入研究大数据算法的应用与发展，尤其在数据可视化和交互体验方面，取得了显著的成果。我也注重与团队的合作，能够有效地推动项目的进展和优化开发流程。现在，我担任全栈工程师，拥有CSDN博客专家认证及阿里云专家博主称号，希望通过分享我的技术心得与经验，帮助更多人提升自己的技术水平，成为更优秀的开发者。

技术qq交流群：906392632

大家好，我是小杨，一个在前端界摸爬滚打6年的老油条。今天我要和大家聊聊怎么让代码组件之间"说悄悄话"------没错，就是自定义事件！

一、为什么需要自定义事件？

想象一下这个场景：

javascript 复制代码

// 传统写法：直接调用
function updateUser() {
    updateProfile();
    updateAvatar();
    updateSettings();
    // 我加了新功能还得回来改这里！
}

// 事件驱动写法
document.dispatchEvent(new CustomEvent('userUpdated'));

小杨解说：自定义事件就像办公室里的广播系统，谁想听就自己接，不用挨个通知！

二、基础用法：创建和监听

1. 创建自定义事件

javascript 复制代码

// 简单版
const event = new Event('myEvent');

// 高级版（可以带数据）
const event = new CustomEvent('myEvent', {
    detail: {
        name: '我',
        age: 18
    }
});

2. 监听事件

javascript 复制代码

document.addEventListener('myEvent', function(e) {
    console.log(`收到事件！数据：${e.detail.name} ${e.detail.age}`);
});

三、实战案例：购物车系统

javascript 复制代码

// 商品组件
class Product {
    addToCart() {
        document.dispatchEvent(new CustomEvent('cartAdd', {
            detail: { id: 123, name: '前端秘籍' }
        }));
    }
}

// 购物车组件
document.addEventListener('cartAdd', function(e) {
    console.log(`把 ${e.detail.name} 加入购物车`);
});

// 用户组件
document.addEventListener('cartAdd', function() {
    console.log('更新用户购物车数量');
});

小杨踩坑记：曾经没加detail导致数据传丢，debug到怀疑人生！

四、高级技巧

1. 事件命名空间

javascript 复制代码

// 避免冲突
document.dispatchEvent(new CustomEvent('me:cartAdd'));

2. 事件冒泡控制

javascript 复制代码

const event = new CustomEvent('bubbleEvent', {
    bubbles: true,  // 允许冒泡
    cancelable: true // 允许取消
});

3. 移除监听

javascript 复制代码

function handleEvent() {
    console.log('我只执行一次！');
    document.removeEventListener('oneTimeEvent', handleEvent);
}
document.addEventListener('oneTimeEvent', handleEvent);

五、Vue/React中的自定义事件

1. Vue版

javascript 复制代码

// 子组件
this.$emit('me-event', { data: 123 });

// 父组件
<Child @me-event="handleEvent" />

2. React版

javascript 复制代码

// 父组件
<Child onMeEvent={handleEvent} />

// 子组件
props.onMeEvent({ data: 123 });

六、性能优化

避免滥用：太多事件会让代码变成"广播体操"
及时销毁：SPA记得在组件卸载时移除监听
事件池：高频事件考虑复用事件对象

七、与原生事件的区别

特性	自定义事件	原生事件
触发方式	手动dispatch	浏览器自动触发
事件类型	任意自定义名称	click/keydown等
数据传递	通过detail	有限的事件对象

八、总结

自定义事件是解耦神器
适合组件通信、插件开发等场景
记得给事件起个清晰的名字
移除不需要的监听防止内存泄漏

思考题：

javascript 复制代码

const event = new CustomEvent('meetup', {
    detail: { time: new Date() }
});

document.addEventListener('meetup', function(e) {
    console.log(e.detail.time.toLocaleString());
});

setTimeout(() => {
    document.dispatchEvent(event);
}, 1000);
// 1秒后事件触发时，输出的时间是创建时还是触发时的时间？

欢迎在评论区讨论你的答案！下期我会分享更多前端设计模式的实战技巧。