事件

事件流

事件模型

事件对象

兼容处理

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 事件滚动到页面底部加载更多内容。