JS基础之事件概念篇

JS与HTML的交互是通过事件来实现的。通过侦听器来预定事件，以便事件发生时执行相应的代码。这些侦听器用于为事件处理程序属性赋值处理函数、可以是addEventListener，也可以是attachEvent，后边将详细讲述。

事件流

首先需要了解一下事件流，所谓事件流就是页面接收事件的顺序。DOM2规定了事件流有三个阶段，捕获阶段、处于目标极端和事件冒泡阶段。也就是说较为不具体的节点先收到事件（例如document），一层一层往下传播事件，直到到达目标元素。我们可以根据需要在捕获阶段拦截事件，但是一般情况下我们依旧在冒泡阶段处理事件。需要注意的是IE的事件冒泡是说事件从目标元素开始一层一层网上传播事件，直到遇到document。

事件处理程序

接收到了事件，我们要对它做出相应的处理，这就用到了事件处理程序，其实就是一个函数。
事件处理程序可以是直接以标签onclick属性值存在的一段代码，我们称之为HTML事件处理程序，这种事件处理程序在执行的时候会扩大作用域，可以访问document和自身的成员，如果目标元素是表单，还能访问父元素form中的其他元素。其扩展作用域方法为：

function(){
    with(document){
        with(this){
            //元素属性
        }
    }
}

DOM先后提出了DOM0和DOM2级的事件处理程序，DOM0级是通过JavaScript指定事件处理程序的传统方式，即给事件处理程序属性赋值函数。DOM0级的事件处理程序被认为是元素的方法，因而在元素的作用域中执行。

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

DOM2级的事件处理程序指定了两个方法：addEventListener和removeEventListener，他们接收3个参数，分别是事件名、作为事件处理程序的函数，一个布尔值，这个布尔值为true时指定了在捕获事件阶段调用事件处理程序，一般情况下为false，即在事件冒泡阶段调用事件处理程序。
前边说到了IE的事件流是事件冒泡，那么第三个参数就不需要了，在IE事件处理程序中指定了类似的两个方法：attachEvent和detachEvent。DOM2级事件和IE事件都可以为目标元素添加多个事件处理程序，而DOM0级则只能指定一个事件处理程序。另外DOM2级事件和IE事件对事件的执行顺序是不一样的，DOM2是按照事件的添加顺序来触发处理程序，而IE则是先触发后添加的事件侦听器，即与DOM2相反。
另外值得提一下的是IE的attachEvent与DOM0、DOM2级方法的事件处理程序的作用域不一样，前者会在全局作用域中执行，而后者在当前元素的作用域内执行。

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

因而在自己编写跨浏览器的事件处理程序时要注意一下IE的作用域的问题，以及DOM0只能支持一个时间处理程序。