事件处理详解
前言
本文大概整理下绑定事件的几种方式，兼容IE8- 的方式（如果需要的话），事件委托，阻止传播，取消默认行为，event对象等。
之前做的多是手机端页面，监听事件也一直是 addEventListener ，现代浏览器基本都支持addEventListener ，除了万恶的IE8及更低版本IE。虽说不用太管IE8了（个人愚见），但是还是有必要整理下之前兼容性的处理方式
HTML事件处理
在HTML标签中直接给属性设置处理程序。HTML中加入了JS代码，因为需要行为、样式、结构分离，这种方式现在已经淘汰，就不深入探究了。
1 <button onclick="alert('HTML事件处理！')">点我</button>
DOM0级事件处理
通过元素对象的事件属性来绑定处理程序。先看栗子
<a href="http://www.baidu.com" class="a1">快点击我！</a>
document.querySelector('.a1').onclick = function(){ //绑定事件
alert('DOM0绑定--a');
}
先获取到元素a，在给元素的点击事件属性onclick绑定处理程序。
这种方式的特点：
1、简单易用，兼容性良好，基本所有浏览器都支持
2、只能绑定一个处理程序，重复绑定会覆盖。如果给a的onclick属性再绑定一个处理程序，那么现在的这个就会被覆盖掉
3、只会在冒泡阶段触发
取消绑定也非常简单，直接设为null就可以了。
document.querySelector('.a1').onclick = null; //取消绑定
DOM2级事件处理
通过事件方法来绑定和解绑处理程序。同样看个栗子
<a href="http://www.baidu.com" class="a2">点击我！</a>
document.querySelector('.a2').addEventListener('click', function(e){ //绑定事件1
alert('DOM2绑定--a2 -- 1')
}, false)
document.querySelector('.a2').addEventListener('click', function(e){ //绑定事件2
alert('DOM2绑定--a2 -- 2')
}, false)
addEventListener(eventName,listener,useCapture) 方式可以为事件绑定处理程序，第一个参数为事件类型（不带on）；第二个参数是处理程序；第三个参数可指定哪个阶段触发，false对应冒泡阶段、true对象捕获阶段（默认false），部分低版本浏览器要求这个参数不能为空，所以最好还是带上。
这种方式的特点：
1、可为同一个事件绑定多个处理程序，会依次触发。多次绑定同一个处理程序，只会生效一次
2、可指定触发的阶段，捕获阶段或者冒泡阶段
3、兼容IE8 - 之外的其他浏览器
解绑的方式为：Element.removeEventListener(eventName,listener,useCapture);和绑定的用法一致
IE8- 有一套自己的事件处理方法
绑定：Element.attachEvent(eventNameWithOn,listener)
解绑：Element.detachEvent(eventNameWithOn,listener)
document.querySelector('.a2').attachEvent('onclick', function(e){
alert('DOM2绑定--a2 -- 2')
})
特点：
1、事件类型带on (eg：onclick)
2、只能在冒泡阶段触发
3、IE10 - IE5都支持该方法
兼容性处理方式
两种方式的差别在事件类型和第三个参数，所以可以做一些处理，封装兼容性处理的方式
//通用方式 //绑定 function addEvent(targetElement,eventName,listener,useCapture){ if(targetElement.addEventListener){ targetElement.addEventListener(eventName,listener,useCapture); }else if(targetElement.attachEvent){ targetElement.attachEvent('on' + eventName,listener); }else { targetElement['on' + eventName] = listener; } } //解绑 function removeEvent(targetElement,eventName,listener,useCapture){ if(targetElement.addEventListener){ targetElement.removeEventListener(eventName,listener,useCapture); }else if(targetElement.attachEvent){ targetElement.detachEvent('on' + eventName,listener); }else { targetElement['on' + eventName] = null; } }
测试一下使用，在IE8及其他浏览器都可以正常使用。
addEvent(document.querySelector('.a2'),'click',test,false)
function test(e){
alert('addEvent then removeEvent!');
removeEvent(document.querySelector('.a2'),'click',test,false); //取消绑定
}
Event对象
不同的方式获取event对象的方式也不同
attachEvent绑定： 通过 window.event获取event对象
其他方式（DOM0和addEventListener）：处理函数传参直接获取
function test(e){ //兼容性的方式 e = e || window.event; //event对象 }
attachEvent绑定的方式，处理程序内部this指向window。想要获取元素对象 可以通过 window.event.srcElement
其他方式的this指向触发元素 。 同样的也可以通过 event.target获取
e = e || window.event; //event对象 var target = e.target || e.srcElement; //触发对象
阻止传播和取消默认行为
通过event对象的方式取消默认行为：
event.preventDefault() //其他浏览器
event.returnValue = false //IE8-
DOM0级绑定的 还可以直接 return false 来取消默认行为，所有浏览器都支持
event对象阻止传播：
event.stopPropagation() //其他浏览器
event.cancelBubble = true //IE8 -
一般可以这样写
e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true; //阻止传播 e.preventDefault ? e.preventDefault() : e.returnValue = false; //取消默认行为
事件委托
如果多个元素的处理程序类同，如果每个都绑定一次会很繁琐和低效，这时可以利用冒泡的原理（他们都会冒泡到父元素）直接在父元素上绑定事件。即为事件委托
<section class="item item-3">
<button class="btn1">点击我1！</button><button class="btn1">点击我2！</button><button class="btn1">点击我3！</button>
</section>
addEvent(document.querySelector('.item-3'),'click',function(e){
e = e || window.event; //event对象
var target = e.target || e.srcElement; //触发对象
if(target.nodeName === 'BUTTON'){
alert(target.innerText);
}
})
本例中，想要实现点击按钮输出按钮文字。如果给三个按钮分别绑定事件会不会太傻。所以直接绑定了父元素，事件触发时，判断触发对象是否是button标签，如果是，则输出文字。
