绑定事件的方法

在JavaScript中，有三种常用的绑定事件的方法：

1.在标签中直接绑定；
2.传统绑定事件：
在JavaScript代码中绑定；//行为、样式和结构相分离
3.现代事件绑定：
绑定事件监听函数。

传统事件绑定
只能绑定一个处理函数，兼容性好

myDiv.事件名=function () {
	//获取event对象，arguments[0]火狐浏览器的方法，window.event谷歌浏览器的方法
    // event对象：记录事件发生时，页面上的所有状态
     var event=arguments[0] || window.event;
}

解除传统事件绑定

myDiv.事件名=null;

现代事件绑定

可以绑定多个处理函数，运行速度快，可以进行事件冒泡和事件捕获

//现代事件绑定的兼容性设置
// 事件的处理函数不能带小括号
if(document.attachEvent){
    myDiv.attachEvent("加on的事件类型",事件的处理函数);//ie现代事件绑定
}else{   
    // 布尔值是控制事件阶段的（true：事件冒泡     false：事件捕获），默认用false
    myDiv.addEventListener("不加on的事件类型",事件的处理函数,布尔值);//DOM浏览器现代事件绑定
}

解除现代事件绑定

myDiv.detachEvent("事件名",时间的处理函数);////ie现代事件取消绑定
myDiv.removeEventListener("事件名",事件处理函数,布尔值);//DOM浏览器现代事件取消绑定*/

attachEvent(）和addEventListener(）的区别
相同点：都可以为元素绑定事件
不同点：
1.事件名不一样
attachEvent(）：事件名有on
addEventListener(）：事件名无on
2.参数个数不一样
attachEvent(）：两个参数
addEventListener(）：三个参数
3.兼容性不一样
attachEvent(）：谷歌，火狐不支持，IE11不支持，IE8支持
addEventListener(）：谷歌，火狐，IE11支持，IE8不支持
4.this不同
attachEvent(）：this是window
addEventListener(）：this是当前绑定事件的对象

综上所述，封装一个兼容所有浏览器的事件绑定方法

	if(element.addEventListener){
        element.addEventListener(type,fn,false);
    }else if(element.attachEvent){
        element.attachEvent("on"+type,fn);
    }else{
    	//不满足现代事件绑定就使用传统事件绑定的方法
        element["on"+type]=fn;
    }