JS 事件处理程序

事件就是用户与浏览器自身执行的某种动作，如click、load、mouseover，均为事件的字；响应某个事件的函数叫做事件处理程序，其名字以“on”开头。

一、HTML事件处理程序
在HTML中定义的事件处理程序可以包含要执行的具体动作，也可以调用在页面其他地方定义的脚本

<input type="button" value="click me" onclick="showMessage()">
<script>
    function showMessage(){
        alert("Hello world!");
    }
</script>

缺点：

存在时差问题。因为用户可能会在HTML元素一出现在页面上就触发相应的事件，但当时的事件处理程序有可能尚不具备执行条件；
其作用域链在不同浏览器中会导致不同的结果。

二、DOM0级事件处理程序
1.在元素的作用域中运行；程序中的this引用当前元素
例：单击这个按钮显示的是元素的ID，这个ID是通过this.id取得的

var btn=document.getElementById("myBtn");
    btn.onclick=function(){
        alert(this.id);  //myBtn
    }

说明：在事件处理程序中通过this访问元素的任何属性和方法，以这种方式添加的事件处理程序会在事件流（从页面中接收事件的顺序）的冒泡阶段被处理

2.删除DOM0级方法指定的事件处理程序
将其属性的值设置为null

btn.onclick=null;  //删除事件处理程序

设置之后，再单击按钮将不会有任何动作发生

三、DOM2级事件处理程序
1.用于处理指定和删除事件处理程序的操作：addEventListener()和removeEventListener()
它们接受3个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值
最后的布尔值参数若是true，表示在捕获阶段调用事件处理程序；若是false，表示在冒泡阶段调用事件处理程序

例：在按钮上为click事件添加事件处理程序

var btn=document.getElementById("myBtn");
    btn.addEventListener("click",function(){
        alert(this.id);
    },false);

与DOM0级方法一样，这里添加的事件处理程序也是在依附的元素的作用域中运行
注：事件前不加on

2.优点：可添加多个事件处理程序
例：为按钮添加两个事件处理程序

var btn=document.getElementById("myBtn");
    btn.addEventListener("click",function(){
        alert(this.id);
    },false);
    btn.addEventListener("click",function(){
        alert("Hello world!");
    },false);

说明：事件会按照添加它们的顺序触发

3.移除：removeEventListener()
条件：提供相同的参数
注：若要移除事件句柄，addEventListener()的执行函数必须使用外部函数

例：移除为按钮添加的事件

var btn=document.getElementById("myBtn");
var handler=function(){
     alert(this.id);
}
btn.addEventListener("click",handler,false);
btn.removeEventListener("click",handler,false);

说明：addEventListener()和removeEventListener()中使用了相同的函数

4.将事件处理程序添加到事件流的冒泡阶段，这样可以最大限度地兼容各种浏览器

四、IE事件处理程序
1.IE实现了与DOM中类似的两个方法：attachEvent()和detachEvent()
接受相同的两个参数：事件处理程序名称与事件处理程序函数
通过attachEvent()添加的事件处理程序都会被添加到冒泡阶段

例：用attachEvent()为按钮添加一个事件处理程序

var btn=document.getElementById("myBtn");
    btn.attachEvent("onclick",function(){
        alert("click");
    });

注：attachEvent()的第一个参数是"onclick"

2.在全局作用域中运行，this等于window

var btn=document.getElementById("myBtn");
    btn.attachEvent("onclick",function(){
        alert(this===window);  //true
    });

3.可为一个元素添加多个事件处理程序

var btn=document.getElementById("myBtn");
    btn.attachEvent("onclick",function(){
        alert("click");
    });
    btn.attachEvent("onclick",function(){
        alert("Hello world!");
    });

说明：在IE9以下，事件以相反的顺序被触发；在IE9+，事件以其添加的顺序执行

4.移除：detachEvent()
条件：提供相同的参数
注：若要移除事件，detachEvent()的执行函数必须使用外部函数

例：移除为按钮添加的事件

var btn=document.getElementById("myBtn");
var handler=function(){
    alert("Hello world!");
}
btn.attachEvent("onclick",handler);
btn.detachEvent("onclick",handler);

说明：attachEvent()和detachEvent()中使用了相同的函数

五、跨浏览器的事件处理程序
要保证处理事件的代码能在大多数浏览器下一致地运行，只需关注冒泡阶段

例：创建一个EventUtil对象，用来处理浏览器间的差异

var EventUtil={
        addHandler:function(element,type,handler){
            if(element.addEventListener){
                element.addEventListener(type,handler,false);
            }
            else if(element.attachEvent){
                element.attachEvent("on"+type,handler);
            }
            else{
                element["on"+type]=handler;
            }
        },
        removeHandler:function(element,type,handler){
            if(element.removeEventListener){
                element.removeEventListener(type,handler,false);
            }
            else if(element.detachEvent){
                element.detachEvent("on"+type,handler);
            }
            else{
                element["on"+type]=null;
            }
        }
}

说明：

addHandler()：职责是视情况分别使用DOM0级、DOM2级或IE来添加事件；
removeHandler()：接受相同的参数，职责是移除之前添加的事件处理程序

猜你喜欢