JS事件~

DOM事件流

事件流包括三个阶段

• 捕获阶段
• 目标阶段
• 冒泡阶段
  事件一开始从文档的根节点流向目标对象（捕获阶段），然后在目标对象上被触发（目标阶段），之后再回溯到文档的根节点（冒泡阶段）

所有的事件都会经过捕获阶段和目标阶段，但有些事件会跳过冒泡阶段，比如，让元素获得输入焦点的focus事件已经失去输入焦点的blur事件就都不会冒泡

事件处理程序

HTML事件处理程序

结构和行为相耦合，不易维护
DOM 0级事件处理程序

btn.onclick = function(){
  ...
}

这种方式会在事件流的冒泡阶段被处理，删除事件 btn.onclick = null

DOM 2级事件处理程序
dom.addEventListenter() / dom.removeEventListener()
接收3个参数：要处理的事件名， 函数， 布尔值
可以为同一个元素添加多个同类型事件
按照顺序触发
IE事件处理程序
attachEvent() 和 detachEvent()
接收2个参数， 事件名（要加‘on’），函数
IE8及之前的版本
只支持事件冒泡
可添加多个处理程序，但触发顺序是反着来的
最大的区别是：作用域是 全局，this.id指的是 window的id

// 兼容性写法
function addEvent(type, el, fn){
  if(window.addEventListener){
    el.addEventListenter(type,fn,false)
  }else if(window.attachEvent){
    el.attachEvent('on'+type, fn)
  }
}
// 结合惰性函数的兼容性写法
 var addEvent = function (type, el, fn){
  if(window.addEventListener){
    addEvent = function(type, el, fn){
      el.addEventListenter(type,fn,false)
    }
  }else if(window.attachEvent){
    addEvent = function(type, el, fn){
       el.attachEvent('on'+type, fn)
    }
  }
}

DOM 事件对象（event）

• currentTarget 事件遍历DOM时，标识事件的当前目标元素
• target 标识事件起源的元素
• preventDefault 阻止默认事件
• stopPropagation 阻止捕获或冒泡阶段中当前事件的进一步传播
• stopImmediatePropagation 阻止当前节点上所有的回调函数
• type 事件类型

在事件处理程序内部，对象this始终等于currentTarget,而target则指事件起源的元素，
如果直接将事件处理程序指定给目标元素，则this,currentTarget，target三者相同

兼容浏览器的事件对象

• event event || window.event
• target evnet.target || evnet.srcElement
• preventDefault evnet.preventDefault() || event.returnValue = true
• stopPropagation event.stopPropagation() || event.cancelBubble = true

事件类型

• UI load, unload, error,select, resize, scroll...
• input blur, focus, change
• 鼠标 click,mousedown/up,mouseenter/leave,mousemove...
• 键盘 keydown/up,keypress...
• 触摸 touchstart,touchend,touchmove...
• 手势 gesturestart, gestureend,gesturechange...
• 设备 orientationchange(检测设备屏幕旋转)， deviceorientation(检测设备方向变化)。。。

内存和性能

事件委托/代理事件监听
事件委托（事件代理） 利用了事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件，也就是说。可以为某个父类元素指定一个事件处理程序，不必为所有的子类元素都添加事件处理程序，通过event.target来判读是否是要触发的子类元素

只要指定一个事件处理程序，让父类做事件代理，节省了内存和性能
新增的子元素也能动态的绑定事件

移除事件处理程序

• 当移除绑定事件处理程序的元素时，也需要手动的移除事件处理程序

btn.onclick = null
body.removeChild(btn)

• 当页面卸载时，也会导致“空事件处理程序”
  通过onunload事件 移除所有事件处理程序

一些常用操作

load 事件
load事件指在所有的资源被加载完成时触发

img.onload = function(){}
img只要设置了src属性就会开始下载
script.onload = function(){}
script只有设置了src属性并添加到文档后，才会开始下载js文件
onbeforeunload事件（H5事件）
离开一个页面的之前
页面添加onbeforeunload事件，会导致浏览器不对页面进行缓存
resize
屏幕resize，使用函数防抖
"获取鼠标在网页中的坐标"

e.clientX/target.clientY
// 水平滚动条偏移
document.documentElement.scrollLeft ||  // 火狐，IE9及以下滚动条是html的
document.body.scrollLeft  ||//chrome 滚动条是 body
window.pageXOffset  // IE10及以上

// 页面上的位置
e.pageX ||
e.clientX+ 水平滚动条偏移值

---

参考文章：https://juejin.im/post/5c092ad36fb9a049bc4c754e