为啥要用addEventListener？
分析一下html代码
window.onload = function(){
var box = document.getElementById("box");
box.onclick = function(){
console.log("我是box1");
}
box.onclick = function(){
box.style.fontSize = "18px";
console.log("我是box2");
}
}
运行结果：“我是box2”
原因就是很简单，第二个onclick事件把第一个onclick事件给覆盖了。虽然大部分时候，我们用on可以解决，但是如果要有增加多个相同的事情，on肯定就实现不了。对此就引入今天的主角---addEventListener，多次绑定同一个时间，切不会覆盖。
修改一下上面代码
window.onload = function(){
var box = document.getElementById("box");
box.addEventListener("click",function(){
console.log("我是box1");
})
box.addEventListener("click",function(){
console.log("我是box2");
})
}
运行结果：我是box1
我是box2
addEventListener总共有三个参数，第一个参数填写的是事件名称，记得不需要加on，第二个参数是函数方法，第三个参数是捕获或者冒泡的时候处理，第三个参数在大部分情况下都不需要填写，默认为false。（true--捕获，false--冒泡）
第三个参数
分别给body和box添加点击事件
box.addEventListener("click",function(){
console.log("box");
}) //冒泡
child.addEventListener("click",function(){
console.log("child");
})
执行的结果：
child
box
默认情况事件是按照事件冒泡的执行顺序进行的。
若参数为true
box.addEventListener("click",function(){
console.log("box");
},true) //捕获
child.addEventListener("click",function(){
console.log("child");
})
执行的结果：
box
child
移除事件
一般的onclick事件通过
box.onclick =null;
赋予为空值，就能正常移除事件了。
addEcentListener需要使用的是removeEventListener
box.addEventListener("click",function(){
console.log("box");
})
box.removeEventListener("click",function(){
console.log("box");
})
注意：removeEventListener参数与addEcentListener必须是一致。
addEcentListener不支持IE6，IE7，IE8
所以到了IE，我们就用attachEvent方法
<a id="xc">点击</a>
<script type="text/javascript">
function handler(e){
e=e||window.event;
var _this=e.srcElement||e.target;
alert(_this.innerHTML);
}
var object=document.getElementById('xc');
object.attachEvent('onclick',handler);
</script>
