事件

事件流

方式 传递方向
捕获 document ---> html ---> body ---> 目标对象
冒泡 目标对象 ---> body ---> html ---> document

事件模型

模型 绑定方式 阶段
DOM 0 级 <button onclick=""> 或 button.onclick = function() {}
IE 特有 button.attachEvent() 处理阶段、冒泡阶段
DOM 2 级 button.addEventListener() 捕获阶段、处理阶段、冒泡阶段

事件对象

操作 DOM 事件模型 IE 专有事件模型
获取事件类型 type type
获取事件目标 target srcElement
阻止冒泡 stopPropagation() cancelBubble
阻止默认行为 preventDefault() returnValue

兼容处理

function eventHandler( event ) {
  event = event || window.event;

  const el = event.target || event.srcElement;

  ...
}

事件处理

低版本的 IE 浏览器（IE 9 之前的）中需要用 attachEvent 和 detachEvent 进行事件的添加和删除；其他浏览器中用 addEventListener 和 removeEventListener。

添加事件

if ( el.addEventListener ) {
  el.addEventListener("click", handler, false);
}
else {
  el.attachEvent("onclick", handler);
}

删除事件

if ( el.removeEventListener ) {
  el.removeEventListener("click", handler);
}
else {
  el.detachEvent("onclick", handler);
}

触发事件

try {

}
catch (e) {

}

防抖与节流

防抖（debounce）和节流（throttle）的作用都是防止函数多次调用。区别在于——假设一个用户一直触发这个函数，且每次触发函数的间隔小于 wait，防抖的情况下只会调用一次，而节流的情况会每隔一定时间（参数 wait）调用函数。

防抖的使用场景：

  • 文本输入相关逻辑，如搜索、校验。

节流的使用场景：

  • DOM 元素的拖拽（mousemove）；
  • 射击游戏的 mousedown、keydown 事件（单位时间只能发射一颗子弹）；
  • 计算鼠标移动的距离（mousemove）；
  • Canvas 模拟画板功能（mousemove）；
  • 监听 scroll 事件滚动到页面底部加载更多内容。

results matching ""

    No results matching ""