事件监听与委托

在 JavaScript 中，**事件监听与委托**是高效处理动态元素和批量元素事件的核心技术，通过减少事件处理器数量、利用事件冒泡机制提升性能。以下是技术详解和示例：一、基础事件监听
1.直接绑定事件
javascript
const button = document.getElementById("myButton");
button.addEventListener("click", function(event) {
  console.log("按钮被点击", event.target);
});

2. **事件触发三个阶段
捕获阶段（从 `window` 到目标元素）
目标阶段（事件到达目标元素）
冒泡阶段（从目标元素冒泡到 `window`）

通过 `addEventListener` 的第三个参数控制阶段：

javascript
element.addEventListener("click", handler, true); // 捕获阶段
element.addEventListener("click", handler, false); // 冒泡阶段（默认）

二、事件委托（Event Delegation）
1. 核心原理
利用事件冒泡：将事件处理器绑定到父元素，通过 `event.target` 识别实际触发事件的子元素。
动态元素支持：自动处理后续添加的子元素，无需重新绑定。

2. 经典场景
动态生成的列表项（如 AJAX 加载的数据）
大量同类元素（如表格中的删除按钮）
多层嵌套结构（如树形菜单）

三、事件委托实现
1. 基础委托示例
html
<ul id="parentList">
  <li>选项1</li>
  <li>选项2</li>
  <li>选项3</li>
</ul>

<script>
  document.getElementById("parentList").addEventListener("click", function(event) {
    // 检查触发事件的元素是否是 <li>
    if (event.target.tagName === "LI") {
      console.log("点击的选项:", event.target.textContent);
    }
  });
</script>

 2. 动态元素支持

javascript
 后续动态添加的 <li> 也能响应事件
const newLi = document.createElement("li");
newLi.textContent = "选项4";
document.getElementById("parentList").appendChild(newLi);

四、高级技巧
1. 精准匹配目标元素
当子元素内部有嵌套时，可能需要逐层查找：
javascript
parent.addEventListener("click", function(event) {
  let target = event.target;
  // 向上查找最近的 .btn 元素
  while (target !== parent) {
    if (target.classList.contains("btn")) {
      console.log("点击按钮:", target);
      break;
    }
    target = target.parentNode;