事件绑定

事件绑定：又称（事件委托、事件代理），就是另外一种绑定事件的方法，而且可以绑定多个事件。主要是为了解决：同一类型的事件，后者会覆盖前者的问题；例如：

var redDiv = document.getElementById('redDiv');

redDiv.onclick = function(){

console.log(1);

}

redDiv.onclick = function(){

console.log(2);

}

上述代码只会打印"2"，就是因为都是onclick事件，前者被后者覆盖了。所以我们要采用下面的事件绑定：

事件绑定的写法：

// 元素.addEventListener("不含on的事件名",function(){},false);//固定格式

我们先随意写一个函数：

function f1(ev){

var obj = window.event || ev;//解决兼容问题

console.log(obj.offsetX);

}

//非IE下绑定事件：

redDiv.addEventListener("click",f1,false);

redDiv.addEventListener("click",function(){

console.log(2);

},false);

可以看到：上面调用了两次redDiv.addEventListener事件，但是打印的结果既有"obj.offsetX",也有“2”，两者并不冲突，这就是事件绑定的好处。

清除事件,注意：清除的时候，函数要和绑定的时候的函数名一样

redDiv.removeEventListener("click",f1,false);

IE与非IE浏览器绑定和解除事件的写法不同，一定要注意！！！

// IE下绑定事件的方法

redDiv.attachEvent("onclick",f1);

// IE下解除绑定事件的方法

redDiv.detachEvent("onclick",f1);

//兼容的写法

if(redDiv.addEventListener){

redDiv.addEventListener("click",f1,false);

}else if(redDiv.attachEvent){

redDiv.attachEvent("onclick",f1);

}else{

redDiv.οnclick=f1;//这是为了兼容写法出问题的时候仍能有点击事件

}

/**************************************

addEvent(redDiv,"click",f1);

addEvent(redDiv,"mouseover",function(){

console.log("鼠标移入了");                            //这段代码就是调用了下方的函数。

});

chuEvent(redDiv,"click",f1);

****************************************/

//封装函数，用来解决兼容写法，方便随时调用

①绑定事件--兼容写法

function addEvent(element,type,fn){

if(element.addEventListener){

element.addEventListener(type,fn,false);

}else if(element.attachEvent){

element.attachEvent("on"+type,fn);

}else{

element["on"+type]=fn;

}

}

②清除事件--兼容写法

function chuEvent(element,type,fn){

if(element.removeEventListener){

element.removeEventListener(type,fn,false);

}else if(element.detachEvent){

element.detachEvent("on"+type,fn);

}else{

element["on"+type]=null;

}

}