JS事件---DOM2级事件处理：addEventListener()、removeEventListener()、attachEvent()

事件处理有HTML事件处理、DOM0级事件处理、DOM2级事件处理。

HTML事件处理将事件看做标签的一个属性，与HTML混写，代码多时不容易管理。

DOM0级事件处理脚本方式添加事件，实现了HTML和JS的分离，但是它存在缺陷，例如：要为一个按钮添加点击事件，但只能为点击事件添加一个函数，不能同时添加多个函数，如果同时添加多个函数，则最后的函数将覆盖前面的函数。

DOM2级事件处理实现了HTML和JS的分离,又能够为事件添加多个事件句柄。下面举例说明：

btn3.addEventListener('click',function1); btn3.addEventListener('click',function2);

上面的代码中，btn3是通过getElementById获取的input对象，其中，click是input的点击（onclick()）事件，function1表示点击时调用function1函数。

同理，第二句代码表示btn3在点击时同时调用函数function2。通过ele.addEventListener()方法同时给btn3的onclick()事件添加了两个函数。

DOM2级事件处理中也包括删除事件句柄，具体用法和ele.addEventListener()方法相同，如下

btn3.removeEventListener('click',function1);//表示删除oncilck事件的function1函数

DOM2级事件处理存在兼容性问题，IE8及其以下需要使用IE事件处理程序attachEvent/detachEvent

btn3.attachEvent('onclick',function2)//注意此时写onclick需要加上on。

为解决兼容性问题，可以使用if...else...语句实现

if (btn3.addEventListener) { btn3.addEventListener('click',myFun2) } else if(btn3.attachEvent) { btn3.attachEvent('onclick',myFun2)//注意这里是 onclick }else { btn1.onclick=myFun2() }