前端开发中，事件系统几乎是每次面试必考的基础。
本文总结了面试中最常被问到的10大事件知识点，并配上案例，帮你快速掌握核心！
1. 📍 事件冒泡（Event Bubbling）
定义： 事件会从最具体的元素开始，一层层向上传递到祖先元素。
🔹 案例：
<div id="parent">
<button id="child">Click Me</button>
</div>
<script>
parent.addEventListener('click', () => console.log('Parent clicked'));
child.addEventListener('click', () => console.log('Child clicked'));
</script>
点击按钮时控制台输出：
Child clicked
Parent clicked
2. 📍 事件捕获（Event Capturing）
定义： 捕获阶段是从外到内触发事件。
🔹 案例（开启捕获阶段监听）：
parent.addEventListener('click', () => console.log('Parent capture'), true);
3. 📍 阻止冒泡（stopPropagation）
定义： 让事件不再继续向上传递。
🔹 案例：
child.addEventListener('click', (e) => {
e.stopPropagation();
console.log('Child clicked, no bubble');
});
4. 📍 阻止默认行为（preventDefault）
定义： 阻止元素的默认行为，如跳转、提交表单等。
🔹 案例：
<a href="https://example.com" id="link">Click Here</a>
<script>
link.addEventListener('click', (e) => {
e.preventDefault();
console.log('Default link behavior prevented');
});
</script>
5. 📍 事件委托（Event Delegation）
定义： 利用事件冒泡，将子元素的事件交由父元素处理。
🔹 案例（ul监听li点击）：
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
</ul>
<script>
list.addEventListener('click', (e) => {
if (e.target.tagName === 'LI') {
console.log('Clicked:', e.target.innerText);
}
});
</script>
✅ 适合动态渲染的元素或大量子元素的场景！
6. 📍 合成事件（Synthetic Event）
定义： React/Vue内部封装的事件对象，屏蔽不同浏览器差异。
🔹 案例（React中）：
<button onClick={(e) => {
console.log(e.nativeEvent); // 原生事件对象
}}>
Click Me
</button>
7. 📍 事件对象（Event Object）
定义：
event包含当前事件的全部信息。
🔹 常用属性：
event.target：实际触发事件的元素event.currentTarget：绑定事件的元素event.type：事件类型，如 'click'
8. 📍 自定义事件（CustomEvent）
定义： 手动创建并触发一个自定义事件。
🔹 案例：
const myEvent = new CustomEvent('sayHello', { detail: { name: '车厘小团子' } });
child.addEventListener('sayHello', (e) => {
console.log('Hello', e.detail.name);
});
child.dispatchEvent(myEvent);
9. 📍 解绑事件（removeEventListener）
定义： 移除已绑定的事件监听器。
🔹 注意事项：
- 函数引用必须一致，才能成功解绑！
🔹 案例：
function handleClick() {
console.log('Clicked!');
}
child.addEventListener('click', handleClick);
// 移除
child.removeEventListener('click', handleClick);
10. 📍 passive:true（提升滚动性能）
定义： 告诉浏览器事件监听器不会调用
preventDefault()，从而优化滚动性能。
🔹 案例：
document.addEventListener('scroll', (e) => {
console.log('Scrolling...');
}, { passive: true });
🎯 面试经典问题总结
- 什么是事件冒泡与捕获？区别？
- 如何阻止冒泡？如何阻止默认？
- 为什么使用事件委托？有什么优势？
- 合成事件与原生事件有什么不同？
- 如何创建并使用自定义事件？
- 滚动监听时为什么要加 passive:true？
📢 写在最后
掌握事件机制，是成为前端高手的必经之路！
无论是面试官问题，还是高性能项目优化，事件相关的知识点都是必不可少的！
🏆 如果这篇总结对你有帮助，欢迎点个赞👍、收藏🌟、关注我🔔，后续会持续分享更多前端进阶内容！
