JavaScript 核心基础事件处理：绑定方式与事件冒泡

事件处理是交互逻辑的核心，需掌握不同绑定方式的区别，以及事件冒泡的原理与控制。

1. 事件绑定的 2 种方式：覆盖 vs 多播

方式 1：onclick 直接绑定（会覆盖）

特点：同一元素多次绑定同一事件，后绑定的会覆盖前绑定的，最终只有最后一个事件生效。
示例：

var btn = document.querySelector(“#btn”);
// 第一个事件：被覆盖，不生效
btn.onclick = function() {
alert(“第一个点击事件”);
};
// 第二个事件：覆盖第一个，最终生效
btn.onclick = function() {
alert(“第二个点击事件”);
};

方式 2：addEventListener 绑定（多播，不覆盖）

特点：同一元素多次绑定同一事件，所有事件按绑定顺序依次执行，不会覆盖（称为“多播事件委托”）。
示例：

var btn = document.querySelector(“#btn”);
// 第一个事件：正常执行
btn.addEventListener(“click”, function() {
alert(“第一个点击事件”);
});
// 第二个事件：在第一个之后执行
btn.addEventListener(“click”, function() {
alert(“第二个点击事件”);
});

2. 事件冒泡：从子元素到父元素的事件传播

原理

当元素触发事件（如点击）时，事件会从“最内层子元素”向“最外层父元素”逐级传播，这一过程称为“事件冒泡”。
示例场景：div 包裹 form，form 包裹按钮，三者均绑定点击事件：

<div id=”parent”>
<form id=”child”>
<button id=”btn”>点击</button>
</form>
</div>

<script>
window.onload = function() {
// 按钮点击事件（最内层）
document.querySelector(“#btn”).addEventListener(“click”, function() {
alert(“按钮事件”);
});
// form 点击事件（中间层）
document.querySelector(“#child”).addEventListener(“click”, function() {
alert(“form 事件”);
});
// div 点击事件（最外层）
document.querySelector(“#parent”).addEventListener(“click”, function() {
alert(“div 事件”);
});
};
</script>

执行顺序：点击按钮后，依次弹出“按钮事件”→“form 事件”→“div 事件”（从内到外传播）。

阻止事件冒泡

若需避免父元素事件触发，可通过事件对象的 stopPropagation() 方法阻止冒泡：

document.querySelector(“#btn”).addEventListener(“click”, function(e) {
alert(“按钮事件”);
e.stopPropagation(); // 阻止事件向上传播，父元素事件不再执行
});