知识库

Appearance

事件 ​

来源：js/基础/6事件.html

速查导航 ​

事件注册方式 ​

onclick 属性（点语法） ​

同一个元素多次赋值 onclick，后面的会覆盖前面的，只会执行最后一个。

点击「按钮 (onclick)」：第一次点击弹出"事件-1"，之后再点击只会弹出"事件-2"

addEventListener ​

同一个元素可以绑定多个同类型事件，按绑定顺序依次执行。

点击「按钮1 (addEventListener)」：会依次弹出"事件-1"和"事件-2"

行内绑定 ​

直接在 HTML 元素上写 onclick="handleClick()"，本质也是属性绑定。

点击「按钮2 (行内绑定)」：输出 handleClick 日志

addEventListener 参数 ​

参数说明
event（必需）事件名，支持所有 DOM 事件
function（必需）事件触发时执行的函数
useCapture（可选）true 捕获阶段执行，false 冒泡阶段执行，默认 false

事件捕获与冒泡 ​

  • 事件捕获：点击元素后从外到内，一层一层向下传递
  • 事件冒泡：到达目标后，由内向外，一层一层传递
  • 事件委托：利用事件冒泡，在父元素统一处理逻辑

在捕获阶段触发，只需事件绑定时传递 true：

js
btn3.addEventListener('click', fn, true);  // 捕获
btn3.addEventListener('click', fn, false); // 冒泡（默认）

事件代理（事件委托） ​

  • 原理：利用事件冒泡机制，在父元素上监听事件，通过 e.target 判断实际触发元素
  • 优点：减少事件绑定数量，动态添加的子元素也能响应
js
const list = document.getElementById('color-list')
list.addEventListener('click', function(e) {
  if (e.target.nodeName.toLowerCase() === 'li') {
    alert(e.target.innerHTML)
  }
})

setTimeout 实现 setInterval ​

使用 setTimeout 实现 setInterval 的根本原因：

  • setTimeout 不管上次异步任务是否完成，都会将当前任务推入队列（一次调用一次执行）
  • setInterval 会在任务推入异步队列时判断上次异步任务是否被执行
  • 这导致 setInterval 在做定时轮询时，出现耗时操作会导致异步任务不按期待的时间间隔执行
  • setTimeout 保证调用的时间间隔是一致的，setInterval 的设定间隔时间包括了执行回调的时间

自定义 mySetinterval ​

stop() 清除定时器，reboot() 重新启动。