JavaScript（6）——事件1.0

---恢复内容开始---

事件

好不容易回到正轨，好好学习，天天向上。今天写的是事件，感觉内容蛮多的，所以分了两篇写，主要写了事件流、事件处理程序、事件对象。恩，明天还会再有一篇，哈哈哈。我努力的！我要去做老师布置的作业了，不然没有平时分，很惨的。

事件就是文档或浏览器窗口发生的一些特定的交互瞬间。

【事件流】

事件流描述的是从页面中接收事件的顺序。IE的事件流就就是事件冒泡流，而Nestcape开发团队的事件流是事件捕获流。

事件冒泡

IE的事件流叫事件冒泡，即事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到较为不具体的节点。

所有现代浏览器都支持事件冒泡，但在具体实现上还是有一些差别。

事件捕获

事件捕获的思想是不太具体的节点应该更早接收事件，而最具体的节点应该最后接收到事件。

事件捕获是Netscape Communicator 唯一支持的事件流模型。

DOM事件流

“DOM2级事件”规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。

在DOM事件流中，实际的目标（<div>元素）在捕获阶段不会接收到事件。

【事件处理程序】

事件就是用户或浏览器自身执行的某些动作。而响应某个事件的函数就叫做事件处理程序，事件处理程序的名字以“on”开头。

事件处理程序中的代码在执行时，有权访问全局作用域中的任何代码。

在HTML中指定事件处理程序有两个缺点：

一是存在一个时差问题。二是这样扩展事件处理程序的作用域链在不浏览器中会导致不同的结果。

DOM0级事件处理程序

使用DOM0级方法指定的事件处理程序被认为时候元素的方法。因此，这个时候的事件处理程序是在元素的作用域中运行。换句话说，程序中的this引用当前元素。如下：

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

也可以删除通过DOM0级方法指定的事件处理程序，只要将事件处理程序设置为null之后，再单击按钮将不会有任何动作发生。

DOM2级事件处理程序

定义了两个方法，用于处理指定（addEventListener()）和删除（removeEventListener()）事件处理程序的操作。都接受要处理的事件名、作为事件处理程序的函数和一个布尔值。最后这个布尔值的参数如果是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。如下：

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

IE事件处理程序

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

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

attachEvent()的第一个参数是"onclick"，而且在IE中使用attachEvent()与使用DOM0级方法的主要区别在于事件处理程序的作用域。在DOM0 级方法情况下，事件处理程序会在其所属元素的作用域中运行；在使用attachEvent()方法的情况下，事件处理程序会在全局作用域中运行，因此this等于window。

【事件对象】

在触发DOM上的某一个事件时，会产生一个事件对象event，这个对象中包含所有与事件有关的信息。包括导致事件的元素、事件类型以及与其他特定事件相关的信息。

DOM0中的事件对象：兼容DOM的浏览器会将一个event对象传入到事件处理程序中。无论指定事件处理程序时使用什么方法，都会传入event对象。

IE中的事件对象：在使用DOM0级方法添加事件处理程序时，event对象作为window对象的一个属性存在。如果是通过HTML特性指定事件处理程序，那么还可以通过一个名叫event的变量来访问event对象（与DOM中的事件模型相同）。因为事件处理程序的作用域是根据它的方式来确定的，所以不能认为this会始终等于事件目标。所以，最好还是使用event.srcElement比较保险。

跨浏览器的事件对象：给EventUtil对象添加方法来实现获取对象的信息，getEvent()返回对event对象的引用；getTarget()方法用于返回事件的目标；preventDefault()方法用于取消事件的默认行为；stopPropagation()方法首先尝试使用DOM方法阻止事件流，否则就使用cancelBubble属性，由于IE不支持事件捕获，这个方法在跨浏览器情况下，也能用来阻止事件冒泡。

---恢复内容结束---