DOM事件处理程序

一，事件处理程序

    事件，就是用户或者浏览器执行的某些动作，比如click  mouseover等

事件处理程序就是响应这些事件的函数，事件处理程序的名字都已on开头 比如onclick  onmouseover,为事件指定事件处理程序的方式有好多种

     ①HTML事件处理程序

举个栗子：

   <button class="btn"  οnclick="showMsg()"></button>

     为button按钮添加一个click事件，调用showMsg()这个函数，而这个函数是在一个独立的<script>标签中定义的

②DOM0级事件处理程序

举个栗子：

将一个函数赋值为事件处理程序

var btn=document.getElementById("btn");
btn.οnclick=function(){
  alert(this.id);
}

③ DOM 2级事件处理程序

DOM2级事件处理程序有两个方法用来指定和删除事件处理程序 addEventListener()和removeEventListener()

所有的DOM节点都包含这两个方法，包括三个参数，要处理的事件名，事件处理程序函数，和一个布尔值（true代表在捕获阶段调用事件处理程序，false表示在冒泡 阶段调用事件处理程序）

举个栗子：

var btn=document.getElementById("btn");
btn.addEventListener("click",function(){
   alert("hello");

},false);

与其他时间处理程序不同，DOM2级事件处理程序可以为这个按钮添加两个事件处理程序

	<button id="btn">点击</button>
		
		<script>
			var btn=document.getElementById("btn");
			btn.addEventListener("click",function(){
				alert("hello");
			},false);
			
			btn.addEventListener("click",function(){
				alert("world");
			},false);
		</script>

   需要注意的时，使用addEventListener()添加的时间处理程序必须使用removeEventListener()方法来移除，其中参数必须相同，并且第二个参数不能是匿名函数

function worl(){
				alert("world");
			}
			btn.addEventListener("click",worl(),false);
			btn.removeEventListener("click",worl,false);

错误示范：

	btn.addEventListener("click",function(){
				alert("world");
			},false);
			btn.removeEventListener("click",function(){
				alert("world");
			},false);

上面这样的做法是没有用的，第二个参数不能是一个匿名函数。

③IE事件处理程序

ie8及其以下版本只支持事件冒泡；因此IE实现了与DOM中类似的两个方法attachEvent()和detachEvent(),，不同的是，这两个方法只有两个参数，因为IE8及以下只支持事件冒泡