JaveScript事件处理程序

事件就是用户或者浏览器自身执行的某种动作，而响应某个事件的函数就叫做事件处理程序。为事件指定处理程序的方式有好几种：

第一种 HTML事件处理程序

①在HTML代码中指定：

 <input type="button" value="点击我" onclick="alert('点击事件发生。')" />

②调用在页面其他地方定义的脚本：

<script type="text/javascript">
function showMessage(){

    alert("调用其他地方定义的脚本。")

    }

</script>
   <input type="button" value="点击我" onclick="showMessage()" />

第二种：DOM0级事件处理程序
通过js指定事件处理程序的传统方式，就是将一个函数赋值给一个事件处理程序属性，首先必须取得一个要操作的对象的引用。

<input type="button"  id="mybtn" value="点击我" />

<script type="text/javascript">

var btn=document.getElementById("mybtn");
btn.onclick=function(){

    alert("dom0级事件处理程序");
    }
</script>

这个事件函数必须写在< input >元素后，否则会出现 Uncaught TypeError: Cannot set property ‘onclick’ of null 错误。因为在加载过程中，js是获取不到id为mybtn的元素的。

删除事件方法：

btn.onclick=null;

第三种：DOM2级事件处理程序
定义个两个方法，用于处理指定和删除事件处理程序的操作：addEventListener()和removeEventtListener().
接受三个参数：要处理的事件名，作为事件处理程序的函数，布尔值（若为true,表示在捕获阶段调用事件处理程序，否则表示在冒泡阶段处理事件处理程序）。

<input type="button"  id="mybtn" value="点击我" />

<script type="text/javascript">

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

    alert("DOM2事件处理程序")
    },false)
</script>

通过addEventListener()添加的事件处理程序只能使用removeEventListener()来移除。移除时传入的参数与添加时相同，这意味着通过addEventListener()添加的匿名函数将无法移除。

<script type="text/javascript">

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

    alert("DOM2事件处理程序")
    },false)

btn.removeEventListener("click",function(){//没有效果

    alert("DOM2事件处理程序")
    },false)    
</script>

虽然调用removeElementListener()时看似传入了相同的参数，但实际上第二个参数与传入addElementListener()中的哪一个是完全不同的函数。那么如何使用呢？

<script type="text/javascript">
    var btn=document.getElementById("mybtn");
    var handler=function(){

        alert("DOM2事件处理程序")
        };
    btn.addEventListener("click",handler,false);
    btn.removeEventListener("click",handler,false);//y有效
</script>

重写后有效因为这两个方法使用了相同的函数。

第四种：IE事件处理程序(新版本IE浏览器貌似不支持)
与DOM2类似，给了两种方法：attachEvent()和datachEvent(),接受两个参数：事件处理程序名称和事件处理程序函数。

var btn=document.getElementById("mybtn");
btn.attachEvent("onclick",function(){
    alert("IE事件处理程序")
    })
btn.detachEvent("onclick",function(){
    alert("IE事件处理程序")
    })

注意：attachEvent()的第一个参数是“onclick”而DOM2的addEventListener()中是“click”。

在IE中使用attachEvent()与使用DOM0级方法主要区别在于事件处理程序的作用域。DOM0级事件处理程序会在其所属元素的作用域内运行，在IE中，事件处理程序会在全局作用域下运行，this等于window。