js事件处理的3种方式的分析

web前端包含3个技术：html、css、js。 html和css的结合是通过style、class、id以及html标签。而js是通过事件来切入html和css的。而浏览器的时间处理有3种方式：

方式一：html事件处理

直接将事件函数写在html标签里面如下，如果click事件函数复杂的话直接把函数写在外部onclick直接调用函数名

<input type="button" id="btn" name="btn" onclick="alert('click me!')"/>
<input type="button" id="btn" name="btn" onclick="btnClick"/>
function btnClick(){
　　alert("click me!");
}

方式二：DOM0级事件处理

DOM0级事件处理的规则是：每个DOM元素都有自己的事件处理属性，该属性可以赋值一个函数。DOM元素在js代码里面就是一个js对象，所以事件是被赋值的也因此事件可以被覆盖甚至被设为null。

var btnDOM = document.getElementById("btn");
btnDOM.onclick = function(){
    alert("click me!");  
}
btnDOM.onclick = null;//点击事件即被取消
btnDOM.onclick = function(){//此函数会将覆盖第一个函数
　　 alert("click me ---!");
}

方式三：DOM2事件处理和IE事件处理

事件流：从页面接收事件的顺序

事件冒泡和事件捕获：两种解决事件流问题的方案

微软结合事件冒泡设计了一个事件系统即IE事件处理方式：

var btnDOM = document.getElementById("btn");
btnDOM.attachEvent("onclick",function(){
         alert("Click Me!");
});
//在js的匿名函数里，两个匿名函数哪怕代码完全一样，js都会在内部使用不同变量存储
var ftn = function(){
         alert("Click Me,too!");
};
btnDOM.attachEvent("onclick",ftn);
btnDOM.detachEvent("onclick",ftn);

DOM2事件处理，每次事件触发时都会把所有元素遍历两遍，IE只有冒泡所以IE是需要遍历一次。

//DOM2事件处理里添加事件使用的是addEventListener，它接收三个参数比ie事件处理多一个，前两个的意思和ie事件处理方法的两个参数一样，唯一的区别就是第一个参数里要去掉on这个前缀，第三个参数是个布尔值，如果它的取值是true，那么事件就按照捕获方式处理，取值为false，事件就是按照冒泡处理

var btnDOM = document.getElementById("btn");
btnDOM.addEventListener("click",function(){
         alert("Click Me!");
},false);

var ftn = function(){
         alert("Click Me,too!");
};

btnDOM.addEventListener("click",ftn,true);
btnDOM.addEventListener("click",ftn,false);
btnDOM.removeEventListener("click",ftn,false);

事件代理：减少遍历次数和内存消耗

高效的时间添加方式，给目前页面不存在的dom添加事件

使用父级的事件代理，事件流循环遍历的次数少了