DOM事件
事件我们经常用到，用起来也比较简单，今天我们主要聊一下DOM事件流、事件的兼容性、事件代理。
DOM事件流
DOM处理事件的流程
事件传递的3个过程
-
capture phase：事件的捕获过程；从DOM树的最顶端，直到捕获到出发这个事件的节点的父元素 -
target phase：事件的触发过程 -
bubble phase：事件的冒泡阶段，将会从当前节点的父节点开始，一直冒泡到window对象
这3个流程由W3C规定，但是在IE的低版本里并没有第一个捕获的过程；
并不是所有事件都有这3个过程，有些事件是没有冒泡的过程，例如页面load事件没有冒泡过程。 事件兼容性
注册事件、取消注册、触发事件、事件对象和事件源、阻止事件传播、取消默认行为等在IE浏览器中和其他浏览器是有区别的，下面我们逐一来看一下
注册事件
事件的注册经常用到，大家都是比较熟悉的，需要注意的是兼容性的问题。
// IE以外// type 事件类型 // listener 事件处理函数//最后一个参数可选的：如果是true那么事件句柄在在捕获节点执行；如果是false则事件句柄在冒泡阶段执行elem.addaEventListener(type,listener [,useCapture])// 实例elem.addEventListener('click',clickhandler,false);function clickhandler(){ // do something} 而IE中是这样的
// IE// type 事件类型// listener 事件处理函数// IE中没有捕获阶段 因此没有第三个参数elem.attachEvent(type,listener);// 实例elem.attachEvent('onclick',handler);//事件名称 含 'on'function handler(){ // do something } 我们可以做一个兼容的方法，还比较容易理解的。
function addEvent(elem,type,listener){ if(elem.addEventListener){ elem.addEventListener(type,listener,false); } if(elem.attachEvent){ elem.attachEvent('on'+type,listener) }} 取消注册
//接受参数和addEventListener一致//IE以外elem.removeEventListener(type,listener [,useCapture]);//IEelem.detachEvent(type,listener)
触发事件
某些情况下，我们需要手动触发事件
//IE以外elem.dispatchEvent(type);//触发button的click事件button.dispatchEvent('click');//IE elem.fireEvent(type);//触发button的click事件button.fireEvent('onclick'); 事件对象和事件源
当调用事件处理函数时候，会隐形的传入一个对象，这个对象就含有了事件的一些状态和信息
function handler(e){ //获取事件对象 // IE的低版本,事件对象不是通过event传入的，而是放在window对象上面 e = event || window.event; //获取事件源 //IE下是 srcElement var target = e.target || e.srcElement; } 取消默认行为
常规的点击链接会打开，但是有时候只是希望处理自定义的业务逻辑而不是打开，这时我们应该取消默认行为。
function eventHandler(e) { e = e || window.event; // 防止默认行为 if (e.preventDefault) { e.preventDefault();//IE以外 } else { e.returnValue = false;//IE //注意：这个地方是无法用return false代替的 } } 阻止事件传播
有时我们需要阻止事件冒泡
function handler(e){ e = e || window.event; if(e.stopPropagation){ e.stopPropagation();//IE以外 }else{ e.cancelBubble = true;//IE }} 事件代理
ul下有多个li，我们想要实现在点击每个li的时候，都触发click事件，如果在每个li上都绑定click事件，工作量将会很大，且要维护多个函数，性能也比较差。这种情况下，我们应该使用事件代理
//在ul上绑定事件，点击li时，通过冒泡传递到ul上，触发click事件ul.addEventListener('click',handler,false);function handler(e){ e = e || window.event; var targetNode = e.target || e.srcElement; //判断点击的target子元素的类型来触发相应的事件 if(targetNode.nodeName.toLowerCase() === 'li'){ // dosomething }} 事件相关的知识点还是比较清晰的，实际使用时，善用事件代理哦！