javascript 事件处理

【写在前面】近期一直在看js的基础，毕竟jquery尽管好用，总归是用着别人写的，仅仅会用api不如搞清楚实现的原理。

等把js基础巩固好了一定要去读jquery的源代码。

事件流

事件流描写叙述的是从页面中接收事件的顺序。js中有两种事件流，冒泡流和捕获流。两种流的名称都非常形象。在由节点构成的一颗html树上面，冒泡流指事件開始时候由最详细的元素最先接收，然后逐级传播到最不详细的节点，比方在例如以下文档中：

<!doctype html>

<html>

<head></head>

<body>

    <div></div>

</body>

</html>

当单击div时，事件首先在div上响应。然后传到body元素上，然后传到html元素上，最后传到document对象。

捕获流正好相反，最先响应的是document对象。然后沿dom树依次向下，到html，到body，最后到实际目标，也就是div。

老版浏览器并不支持捕获流，冒泡流也非常符合我们对事件传播的理解，因此我们很多其它使用的是冒泡流。

事件处理的几种方法

在js的事件处理中定义了非常多种事件，事件名称是指详细的某种动作，比方click、load、mouseover等都是事件的名称。

而响应某个事件的函数叫事件处理程序，事件处理程序的名字是以on开头的，因此click事件的事件处理程序就是onclick，load事件的事件处理程序就是onload。

标签内绑定

通过设置标签的属性能够为节点十分方便地绑定事件。如：

<input type="button" value="button" onclick="alert('button按下')">

也能够调用其它地方定义的脚本：

<script>

    function showMessage(){

        alert("button按下");

    }

</script>

...

<input type="button" value="button" onclick="showMessage()">

使用直接绑定有两个特别的地方，其一是会创建一个封装元素属性的函数。这个函数中有一个局部变量event。也就是事件对象：

<!--输出'click'-->

<input type="button" value="button" onclick="showMessage(event.type)">

事件产生时，event对象自己主动传递到showMessage函数中，通过这个对象我们能够訪问到事件对象的非常多属性。另外在事件处理程序内部，this指代事件的目标元素，比方

<!--输出'button'-->

<input type="button" value="button" onclick="showMessage(this.value)">

另外当当前元素是一个表单元素时，则作用域中还会包括表单元素的入口，也就是说在事件处理程序中能够訪问其它表单元素。比如

<form>

    <input type="text" name="username"/>

    <input type="button" value="button" onclick="alert(username.value)">

</form>

这样能够直接输出username中的值。

然而通过这样的方式加入的事件处理尽管直观方便，但有非常多坏处：

（1）由于页面载入顺序是从上往下，假设绑定的脚本写在html以下，可能用户点击元素的时候脚本还未运行，造成用户点半天没反应，如：

<input type="button" value="button" onclick="showMessage()">

...

...//非常多内容

...

<script>

    function showMessage(){

        //...

    }

</script>

（2）html和js代码紧密结合，比方showMessage这种方法，假设界面内非常多元素都通过这样的方式绑定了这种方法。那么假设某一刻想给这个函数换一个名字时，你须要同一时候修改非常多处地方，相当麻烦。

DOM0级处理程序

另外一种方式是在js中为元素绑定事件，通过在js中获取元素。然后给其指定事件：

var btn = document.getElementById("button");

btn.onclick = function(){

    alert(this.id);

}

通过DOM0级方法指定的程序被觉得是元素的方法，所以上述代码运行后，按下元素弹出的将是button的id，能够通过this获取该元素全部的属性和方法。

须要删除通过DOM0级方法指定的事件处理程序，仅仅需将该属性值设为null就可以：

btn.onclick = null;

须要注意的是通过这样的方式不能为元素加入反复事件，多次为onclick赋值仅仅有最后一个是有效的，比方

btn.onclick = function(){

    alert("first");

}

btn.onclick = function(){

    alert("second");

}

最后单击button的时候仅仅会输出second。

DOM2级处理程序

IE9、Firefox、chrome、safari和opera支持DOM2级事件处理程序

“DOM2级事件”定义了两个方法，用于指定和删除事件处理程序的操作：addEventListener()和removeEventListener()。全部DOM节点都有这种方法，并接收3个參数：事件名、事件处理函数和一个布尔值。这个布尔值代表了是使用捕获还是冒泡。true代表在捕获阶段处理。false代表在冒泡阶段处理。不填默认是false。

var btn = document.getElementById("button");

btn.addEventListener("click", function(){

    //...

}, false);

和DOM0级事件处理不同。通过这样的方法绑定的事件处理能够多次加入，比方

var btn = document.getElementById("button");

btn.addEventListener("click", function(){

    alert("first");

}, false);

btn.addEventListener("click", function(){

    alert(this.id);

}, false);

并且在函数内this相同指代目标元素，点击button后会先输出first。再输出该btn的id。

通过addEventListener加入的事件仅仅能通过removeEventListener移除，并且參数必须一样（三个參数一模一样），这代表使用匿名函数绑定的事件是无法移除的，最好将事件处理函数单独定义。

btn.addEventListener("click", function(){

    alert("first");

}, false);

btn.removeEventListener("click", function(){

    alert("first");

}, false); //没有效果

btn.addEventListener("click", showMessage, false);

btn.removeEventListener("click", showMessage, false); //移除成功

IE事件处理程序

IE中单独实现了与DOM2级事件处理中类似的两个方法：attachEvent和detachEvent()。

这两个方法接收两个參数：事件处理程序名称和事件处理函数。由于IE8及更早版本号仅仅支持事件冒泡，所以通过这样的方式加入的事件处理程序都会被加入在事件冒泡阶段。

var btn = document.getElementById("button");

btn.attachEvent("onclick", function(){ //注意是onclick

    alert("first");

});

IE事件处理同之前的其它方式有两个差别，第一，IE的事件处理程序会在全局环境下运行。

这代表在当中使用this会等于window。

var btn = document.getElementById("button");

btn.attachEvent("onclick", function(){

    alert(this === window);  //true

});

第二。多次加入的事件处理函数按加入的相反顺序运行，比方

var btn = document.getElementById("button");

btn.attachEvent("onclick", function(){

    alert("first");

});

btn.attachEvent("onclick", function(){

    alert("second");

});

当按下button时。将先输出second，然后才输出first。

要移除事件的方式同DOM2级类似，调用detachEvent然后传如相同參数就可以。

编写跨浏览器的事件处理程序

上面提到IE和其它浏览器在处理事件上还是存在一些差异的，能够编写一个EventUtil对象，来将加入事件和移除事件封装起来。

实现方式是先推断是否支持DOM2级处理。假设不支持採用IE方法。假设都不支持最后採用DOM0级方法。

var EventUtil = {

    //加入事件

    addHandler: function(element, type, handler){

        if(element.addEventListener){

            //支持DOM2级

            element.addEventListener(type, element, handler);

        }else if(element.attachEvent){

            //IE事件处理，注意on前缀

            element.attachEvent("on" + type, handler);

        }else{

            //DOM0级

            element["on" + type] = handler;

        }

    },

    //移除事件

    removeHandler: function(){

        if(element.removeEventListener){

            //支持DOM2级

            element.removeEventListener(type, element, handler);

        }else if(element.detachEvent){

            //IE事件处理，注意on前缀

            element.detachEvent("on" + type, handler);

        }else{

            //DOM0级

            element["on" + type] = null;

        }

    }

}