事件侦听

@Event AddEventListener

.为元素添加/注册事件监听器，允许注册多个

.支持事件捕获、冒泡阶段处理，更容易管理事件

.符合结构 - 样式 - 逻辑分离的开发原则

addEventListener

el.addEventListener(event-type, event-handle, capture)

.事件注册

.需要提供三个参数：

1. event-type - 不需要带 on，如click、mouseover

2. event-handle - 当事件发生时调用的函数，也叫响应；可以使用形参 e 获取事件对象，访问事件的详细信息

3. capture - 事件处理的时机，默认是冒泡 false；如果为 true，则是捕获；实际开发中，更关注冒泡

removeEventListener

el.removeEventListener(event-type, event-handle, capture)

.移除之前注册的事件

.性能考虑，有事件注册就应该有事件清除

.正常起见，必须传入与注册中完全相同的函数引用；怎么注册就怎么清除

1. 避免调试干扰：如果你在开发阶段频繁刷新或测试页面跳转逻辑，保留未解绑的监听器可能会导致行为异常，例如旧监听器被意外触发

2. 防止某些特殊情况下的内存泄漏：在一些老旧浏览器或复杂 SPA 架构中，如果组件/模块没有正确销毁，监听器未解绑可能导致内存无法释放

3. 编码规范 & 可维护性：主动解除绑定是一种良好的编程习惯，有助于代码可读性和资源管理意识

[] 绑定多个事件侦听器

//具名函数
wrap.addEventListener('click', fn)

//匿名函数；无法清除
wrap.addEventListener('click', (e) => {
  console.log('wrap', e.target);
})
      
function fn(e) {
  console.log('wrap fn', e.target);
}

//在另外一个元素的点击事件中，移除 wrap 的事件侦听器，只有 fn 可以被移除；另外一个事件继续生效
card.addEventListener('click', (e) => {
  console.log('card', e.target);
  wrap.removeEventListener('click', fn)
})

.部分事件如：blur / focus / submit / change / reset / select / mouseleave / mouseenter 没有冒泡

.事件处理函数尽量不要采用匿名函数的方式，否则无法清除

.适用于函数表达式

.使用开发者工具 → 事件侦听器，查看事件的添加和移除

.使用 beforeunload 比 unload 更合适；unload 的兼容性和执行稳定性较差（部分浏览器限制 JS 执行）

事件传参

.不能直接使用，否则会被立即执行

.需要使用匿名函数，在匿名函数里执行封装的带参函数

[] 封装表单域的获取焦点和失去焦点函数

function setBg(color) {
  console.log('hi');
  console.log(ta);
  ta.style.background = color;
}

.获取元素并侦听事件，发现函数被立即执行了其中的log，但是元素并没有按照设想改变颜色；继续交互同样不会执行

ta.addEventListener('focus', setBg('#f40'));
ta.addEventListener('blur', setBg('#ccc'));

.将封装的带参函数，放在匿名函数中执行。问题解决

ta.addEventListener('focus', function () {
  setBg('#f40')
});
ta.addEventListener('blur', function () {
  setBg('#ccc')
});

.也可以使用箭头函数，同时获取事件对象e

ta.addEventListener('focus', (e) => {
  console.log(e);
  setBg('#f40')
});
ta.addEventListener('blur', (e) => {
  console.log(e);
  setBg('#ccc')
});