DOM事件处理程序

一，事件处理程序

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

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

     ①HTML事件处理程序

举个栗子：

   <button class="btn"  onclick="showMsg()"></button>

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

②DOM0级事件处理程序

举个栗子：

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

var btn=document.getElementById("btn");btn.onclick=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及以下只支持事件冒泡