javaScript事件（二）事件处理程序

javaScript事件（二）事件处理程序

1、事件

2、事件流

以上内容见：javaScript事件（一）事件流

3、事件处理程序

前面提到，事件是用户或浏览器自身执行的某种动做，如click,load和mouseover都是事件的名字。响应某个事件的函数就叫事件处理程序（也叫事件处理函数、事件句柄）。事件处理程序的名字以"on"开头，所以click事件的事件处理程序就是onclick,load事件的事件处理程序就是onload。

为事件指定事件处理程序的方法主要有3种。

一、html事件处理程序

首先，这种方法已通过时了。由于动做(javascript代码)和内容(html代码)紧密耦合。可是写个小demo的时候仍是可使用的。

这种方式也有两种方法，都很简单：

第一种：直接在html中定义事件处理程序及包含的动做。

<input type="button" value="click me!" onclick="alert('clicked!')"/>

第二种：html中定义事件处理程序，执行的动做则调用其余地方定义的脚本。

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

note:

1）经过event变量能够直接访问事件自己，好比onclick="alert(event.type)"会弹出click事件。

2）this值等于事件的目标元素，这里目标元素是input。好比 onclick="alert(this.value)"能够获得input元素的value值。

二、DOM0级事件处理程序

这种方法简单并且跨浏览器，可是只能为一个元素添加一个事件处理函数。

由于这种方法为元素添加多个事件处理函数，则后面的会覆盖前面的。

添加事件处理程序：

<input id="myBtn" type="button" value="click me!"/><script>
    var myBtn=document.getElementById("myBtn");
    myBtn.onclick=function(){
        alert("clicked!");
    }</script>

删除事件处理程序：

    myBtn.onclick=null;

三、DOM2级事件处理程序

DOM2级事件处理程序能够为一个元素添加多个事件处理程序。其定义了两个方法用于添加和删除事件处理程序：addEventListener()和removeEventListener()。

这两个方法都须要3个参数：事件名，事件处理函数，布尔值。

这个布尔值为true,在捕获阶段处理事件，为false，在冒泡阶段处理事件，默认为false。

添加事件处理程序：如今为按钮添加两个事件处理函数，一个弹出“hello”,一个弹出“world”。

<input id="myBtn" type="button" value="click me!"/><script>
    var myBtn=document.getElementById("myBtn");
    myBtn.addEventListener("click",function(){
        alert("hello");
    },false);
    myBtn.addEventListener("click",function(){
        alert("world");
    },false);</script>

删除事件处理程序：经过addEventListener添加的事件处理程序必须经过removeEventListener删除，且参数一致。

note:经过addEventListener添加的匿名函数将没法删除。下面这段代码将不起做用！

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

看似该removeEventListener与上面的addEventListener参数一致，实则第二个参数中匿名函数是彻底不一样的。

因此为了能删除事件处理程序，代码能够这样写：

<input id="myBtn" type="button" value="click me!"/><script>
    var myBtn=document.getElementById("myBtn");    var handler=function(){
        alert("hello");
    }
    myBtn.addEventListener("click",handler,false);
    myBtn.removeEventListener("click",handler,false);</script>

4、IE事件处理程序

IE8及如下版本浏览器实现了与DOM中相似的两个方法：attachEvent()和detachEvent()。

这两个方法都须要两个参数：事件处理程序名称和事件处理程序函数。

note:

IE11只支持addEventListener！

IE9，IE10对attachEvent和addEventListener都支持！

TE8及如下版本只支持attachEvent！

能够拿下面代码在IE各个版本浏览器中进行测试。

<input id="myBtn" type="button" value="click me!"/><script>
    var myBtn=document.getElementById("myBtn");    var handlerIE=function(){
        alert("helloIE");
    }    var handlerDOM= function () {
        alert("helloDOM");
    }
    myBtn.addEventListener("click",handlerDOM,false);
    myBtn.attachEvent("onclick",handlerIE);</script>

添加事件处理程序：如今为按钮添加两个事件处理函数，一个弹出“hello”,一个弹出“world”。

<script>
    var myBtn=document.getElementById("myBtn");
    myBtn.attachEvent("onclick",function(){
        alert("hello");
    });
    myBtn.attachEvent("onclick",function(){
        alert("world");
    });</script>

note:这里运行效果值得注意一下：

IE8如下浏览器中先弹出“world”，再弹出“hello”。和DOM中事件触发顺序相反。

IE9及以上浏览器先弹出“hello”，再弹出“world”。和DOM中事件触发顺序相同了。

可见IE浏览器慢慢也走上正轨了。。。

删除事件处理程序:经过attachEvent添加的事件处理程序必须经过detachEvent方法删除，且参数一致。

和DOM事件同样，添加的匿名函数将没法删除。

因此为了能删除事件处理程序，代码能够这样写：

<input id="myBtn" type="button" value="click me!"/><script>
    var myBtn=document.getElementById("myBtn");    var handler= function () {
        alert("hello");
    }
    myBtn.attachEvent("onclick",handler);
    myBtn.detachEvent("onclick",handler);</script>

note:IE事件处理程序中还有一个地方须要注意：做用域。

使用attachEvent()方法，事件处理程序会在全局做用域中运行，所以this等于window。

而dom2或dom0级的方法做用域都是在元素内部，this值为目标元素。

下面例子会弹出true。

<input id="myBtn" type="button" value="click me!"/><script>
    var myBtn=document.getElementById("myBtn");
    myBtn.attachEvent("onclick",function(){
        alert(this===window);
    });</script>

在编写跨浏览器的代码时，需牢记这点。

5、事件对象

这部份内容见javaScript事件（三）事件对象

6、事件对象的公共成员

这部份内容见javaScript事件（四）event的公共成员（属性和方法）

7、鼠标事件

这部份内容见javaScript事件（五）事件类型之鼠标事件