网页设计中的事件处理程序（HTML事件处理、DOM0级事件处理、DOM2级事件处理、IE事件处理）

**

网页设计中不同类型的事件处理程序

**

1.HTML 事件处理程序：

• 先看例子(添加事件处理程序)：

  
  <script type="text/javascript">
  	function show(){
  		alert("Hello world!");
  	}
  </script>
  
  <div id="box" onclick = "show()"></div>
  
  

• 注（ 优点 ）：事件处理程序中的代码在执行时，有权访问全局作用域中的任何代码；HTML事件处理程序更方便访问自身的属性值，例如：

  <!--弹出id值-->
  <div id="box" onclick = "alert(this.id)"></div>
  

• 缺点：HTML与JavaScript代码紧密耦合，不利于代码的可复用性，修改起来耗时、耗力，一旦修改任何一处，另外一处也必将改动；（该事件处理程序现在已经很少有人在用，可以说是被摒弃啦！）

2.DOM0 级事件处理程序：

• 先看例子(添加事件处理程序)：

  	var btn = document.getElementById("btn");
  	btn.onclick = function(){
  	//	要执行的代码块;
  		alert(this.id);
  	}
  

• 移除事件处理程序：

  	btn.onclick = null；          // 设置它的值为空即可；
  

• 优点 ：
  1.操作简单，容易理解；
  2.具有跨浏览器的优势，它为所有现代浏览器支持；

• 缺点：只可以添加一个事件处理程序，添加多个二级事件处理程序请看DOM2 级事件处理程序和IE事件处理程序；

3.DOM2级 事件处理程序（可以包含多个事件，按顺序执行）：

• 先看例子(添加事件处理程序)：

  	var btn = document.getElementById("btn");
  	
  	btn.addEventListener("click",function(){
  	//	要执行的代码块；
  		alert(this.id);
  	}，false );
  
  	btn.addEventListener("click",function(){
  	//	要执行的代码块；
  		alert("Hello world!");
  	}，false );
  	………
  

  使用方法：
  1.先获得元素的引用；
  2.调用：addEventListener ( 事件名，函数（匿名函数、外部函数），布尔值);布尔值一般为false,它表示的意义是在冒泡阶段注册事件处理程序，如不是特别需要，不建议在捕获阶段注册事件处理程序（传入的参数为true）；

• 也可以这样使用二级事件处理程序：

  	var btn = document.getElementById("btn");
  	
  	function show(){
  		//	要执行的代码块；
  		alert(this.id);
  	}
  	
  	btn.addEventListener("click"，show，false);
  

• 移除DOM2 级事件处理程序,只能通过removeEventListener()来移除，removeEventListener(）里面的参数必须和addEventListener()里面的参数保持一致；

  	btn.removeEventListener("click"，show，false);
  

4.IE事件处理程序（可以包含多个事件，不按顺序执行）：

• 使用方法：
  1.先获得元素的引用；
  2.调用：addEventListener ( 事件名，函数（匿名函数、外部函数）)；

• 先看例子(添加事件处理程序):

  	var btn = document.getElementById("btn");
  	
  	btn.attachEvent("onclick",function(){
  	//	要执行的代码块；
  		alert(this.id);
  	} );
  
  	btn.attachEvent("onclick",function(){
  	//	要执行的代码块；
  		alert("Hello world!");
  	} );
  	………
  

• 移除事件处理程序：

     	var btn = document.getElementById("btn");
     	
     	btn.detachEvent("onclick",function(){
     	//	要执行的代码块；
     		alert(this.id);
     	});
     
     	btn.detachEvent("onclick",function(){
     	//	要执行的代码块；
     		alert("Hello world!");
     	});
     	………
  

• 注：

  1.IE事件处理程序的执行顺序和DOM2级事件相反，从后面开始执行；
  2.IE事件名需要 + “on”，和DOM0 级一样；
  3.IE事件处理程序只需要两个参数，其余和DOM2级事件大同小异；
  4.IE事件处理程序只能依靠detachEvent()；来移除，参数前后必须一致；