事件绑定的方法

事件绑定方法

在JavaScript中，绑定事件的方法主要有两种：

1，传统绑定
2，现代绑定
传统事件绑定

// 写在标签后和使用节点.onclick属性=方法名，都叫做传统绑定
// 按钮节点的点击事件 的处理程序是getText （注意：不要加括号）

优点

1.兼容性好，非常简单和稳定，可以确保它在你使用的不同浏览器中运作一致
2.处理事件时，this关键字引用的是当前元素

缺点：

1.只能绑定一个处理函数（在遇到相同类型的事件时，只会去处理第一个事件，而忽略后续的事件。）
2 .不利于行为和结构相分离，耦合度太高，不建议在项目中使用。
3.传统方法只会在事件冒泡中运行，而非捕获和冒泡

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

解除传统事件绑定

	myDiv.事件名=null;

现代事件绑定
//处理事件时，this关键字引用的是当前元素
// 事件的处理函数不能带小括号

优点

1.可以绑定多个处理函数
2.运行速度快，可以进行事件冒泡和事件捕获
3.将行为与结构分离开了

缺点：

1.兼容性差（IE和DOM的绑定有差别）

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

解除现代事件绑定

	myDiv.detachEvent("事件名"该事件下的处理函数); //ie现代事件取消绑定
	myDiv.removeEventListener("事件名",该事件下的某个处理函数,布尔值); //DOM浏览器现代事件取消绑定*/
	//例如： div1.removeEventListener("click",a,false)

在现代绑定中*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;
    }

---

Joker_C : 凭一口气，点一盏灯，念念不忘，必有回响！