前言
在前端开发中，点击、输入、滚动、提交表单，这些都属于事件。
而 JavaScript 中的事件机制，也是必须掌握的基础内容。
本文主要讲：
- 什么是事件
- 事件绑定
- 事件冒泡
- 事件捕获
- 阻止冒泡
- 阻止默认行为
- 事件委托
一、什么是事件？
事件就是浏览器或用户触发的某种行为，比如：
-
点击
click -
输入
input -
提交
submit -
鼠标移入
mouseover
二、事件绑定
1）HTML 行内绑定
<button onclick="handleClick()">点击</button>
不推荐，维护性差。
2）DOM 属性绑定
button.onclick = function () {
console.log('点击了');
};
3）addEventListener
button.addEventListener('click', function () {
console.log('点击了');
});
更推荐，功能更强。
三、事件冒泡
事件冒泡指的是：
事件从目标元素开始，逐级向父元素传播。
<div id="parent">
<button id="child">按钮</button>
</div>
parent.addEventListener('click', () => {
console.log('parent');
});
child.addEventListener('click', () => {
console.log('child');
});
点击按钮时输出：
child
parent
四、事件捕获
事件捕获和冒泡相反，是从外到内传播。
parent.addEventListener('click', () => {
console.log('parent');
}, true);
child.addEventListener('click', () => {
console.log('child');
}, true);
这里会先执行父元素，再执行子元素。
五、阻止冒泡
child.addEventListener('click', (e) => {
e.stopPropagation();
console.log('child');
});
这样点击子元素时，事件不会继续冒泡到父元素。
六、阻止默认行为
link.addEventListener('click', (e) => {
e.preventDefault();
});
比如点击链接时阻止跳转。
七、事件委托
事件委托指的是：
把子元素的事件交给父元素统一处理。
ul.addEventListener('click', (e) => {
if (e.target.tagName === 'LI') {
console.log('点击了 li');
}
});
优点：
- 减少事件绑定数量
- 适合动态添加的元素
八、总结
事件机制中最重要的几个点：
- 事件绑定
- 事件冒泡
- 事件捕获
- 阻止冒泡
- 阻止默认行为
- 事件委托
