《javascript高级程序设计》之事件

一、事件处理程序

响应某个事件的函数叫做事件处理程序（或事件侦听器），为事件指定处理程序的方式有下面几种。

1、html特性

<input type="button" value="click me" onclick="alert(event.type)"/>

这样指定事件处理程序具有一些独到之处。
(1)、首先会创建一个封装着元素属性值的函数。这个函数中又一个局部变量event，也就是事件对象。（这个函数，你是看不见的，是在系统执行的时候动态自动创建的。）
(2)、关于这个动态创建的函数，另一个有意思的地方就是它扩展作用域的方式：

function(){
    with(document){
        with(this){
            ...//直接访问元素的属性值，比如name，value等
        }
    }
}

因此，事件处理程序要访问自己的属性就不需要this指明了，直接访问就好。如果当前元素是一个表单元素，则作用域中还会包含表单元素（form），也就是说，你也可以直接访问form里的其它元素属性，比如username.value，username是另一个表单元素的name值。
这样指定事件处理程序缺点：(1)、存在一个时差问题，比如，事件处理程序里调用了一个方法，但这个方法在这个元素渲染出来时还没有加载进来，那这个时候触发事件就会出错。
(2)、这样扩展事件处理程序的作用域链在不同浏览器中会导致不同结果。
(3)、html和javascript的紧密耦合，如果要修改事件处理程序会很麻烦。

2、DOM 0 级事件处理程序

通过javascript获得要操作对象的引用，用js把一个函数赋值给一个事件处理程序属性，比如onclick。

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

这样指定的事件处理程序的this是指向元素本身的，因此可以this访问元素的任何属性和方法。以这种方式添加的事件处理程序会在事件流的冒泡阶段被捕获。如果要删除事件处理程序，只需要将这个属性（onclick）的值设为null。

3、DOM 2 级事件处理程序

“DOM2级事件”定义了两个方法：addEventListener() ，removeEventListener() 。所有的DOM节点都包含这两个方法。

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

第三个参数是一个布尔值，如果是true，表示在捕获阶段调用事件处理程序；false，是在冒泡阶段。
这样指定的事件处理程序也是在其依附的元素的作用域中运行。使用DOM2级方法添加事件处理程序的主要好处是可以添加多个事件处理程序。

4、IE事件处理程序

IE实现了与DOM中类似的两个方法：attachEvent()和detachEvent()。这两个方法接收相同的两个参数：事件处理程序名称与事件处理程序函数。注意：事件处理名称和addEventListener有区别，addEventListener是“ click ”，attachEvent是“ onclick ”。IE早期只支持事件冒泡，所以它的事件处理程序都被添加到冒泡阶段。
IE的attachEvent与其它方法的主要区别是事件处理程序的作用域。其它方法的作用域都是其所属元素；使用attachEvent的作用域是全局作用域，即：this等于window。
与DOM2级方法的区别是：事件处理程序不是以添加他们的顺序执行，而是以相反的顺序被触发。DOM2级是以添加他们的顺序执行的。

5、以上所以事件处理程序的总结

无论指定事件处理程序的方法是哪种，浏览器都会将一个event对象传入到事件处理程序中。

var btn=document.getElementById("myBtn");
btn.onclick=function(e){
    alert(e.type);      //"click"
}
btn.addEventListener("click", function(e){
    alert(e.type);
}, false);
<input type="button" value="click me" onclick="alert(event.type)"  />