17370845950

JavaScript事件是用户或浏览器触发的通信机制，通过addEventListener绑定可避免覆盖、支持多监听和精确移除；需善用event对象属性（如target、preventDefault）、事件委托及语义化API（如key而非keyCode）。

JavaScript 事件是用户操作或浏览器自身触发的信号，比如点击、键盘输入、页面加载完成。它本身不是“东西”，而是一种通信机制——让代码能“听到”并响应这些信号。

事件监听器用 addEventListener 而不是 onclick 属性

直接写 element.onclick = handler 看似简单，但会覆盖之前绑定的同类型事件；addEventListener 支持多次添加、可选捕获阶段、还能用 removeEventListener 精确移除。

常见错误：用字符串形式的内联事件（如 ），这会让逻辑和结构混在一起，调试困难，也无法传参或复用。

• 推荐写法：

  button.addEventListener('click', function() {
    console.log('被点了');
  });

• 支持一次绑定多个事件：

  input.addEventListener('input', handleInput);
  input.addEventListener('blur', handleBlur);

• 注意：如果用箭头函数绑定，this 不再指向触发元素，需改用 event.target

事件对象 event 是关键入口

回调函数里拿到的 event 参数，不只是“发生了什么”，还包含触发源、坐标、按键码、是否默认行为被阻止等信息。

典型误用：忽略 event.preventDefault() 导致表单提交刷新页面，或右键菜单弹出；或者没用 event.stopPropagation() 造成事件冒泡干扰父级逻辑。

• event.target 是真正触发事件的元素（可能嵌套很深）
• event.currentTarget 是当前绑定监听器的元素（即 this）
• 表单输入类事件（input、change）优先监听 input，它比 change 更及时
• 键盘事件中，event.key 比 event.keyCode 更语义化且兼容性更好（后者已废弃）

事件委托靠 event.target 和选择器判断

给动态添加的元素（比如 AJAX 加载的新列表项）逐个绑事件不现实，也容易内存泄漏。事件委托利用冒泡，在父容器统一监听，再根据 event.target 判断是否匹配目标。

常见陷阱：用 event.srcElement（IE 旧属性，现代环境应统一用 event.target）；或没做 nodeType 检查，把文本节点当成了按钮。

• 示例：为所有 class 为 delete-btn 的按钮委托删除逻辑

  list.addEventListener('click', function(event) {
    if (event.target.classList.contains('delete-btn')) {
      const item = event.target.closest('.list-item');
      item.remove();
    }
  });

• 注意：委托不适用于不冒泡的事件（如 focus、blur），得用 focusin/focusout

事件处理真正的复杂点不在语法，而在时机判断和边界控制——比如防抖节流要不要加、异步操作中事件是否还在有效上下文、移动端 touch 和 click 的兼容处理。这些细节往往要等线上报错才暴露。