javaScript事件

浏览数：21 / 时间：2015年06月08日

JavaScript通过事件与HTML交互。

事件流

事件流规定了事件的触发规则和顺序。DOM2规定了事件流包括三个阶段：事件捕获 -> 目标触发除 -> 事件冒泡。DOM2规定在事件捕获阶段不应调用事件处理程序，不过各大浏览器都不鸟它。DOM2级的事件处理程序操作函数对：addEventListener和removeEventListener的第三个参数则把这种事变成了DIY，这是一种妥协，同时让初学者认为dom的管理一片混乱。

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

更新上述js中addEventListener和removeEventListener中的第三个参数为true，对比为false时的效果，便大约能理解事件流了。

事件

事件是用户或浏览器自身执行的某和动作。

事件处理程序

响应事件的函数称为事件处理程序。

指定事件处理程序有以下方式：

HTML特性指定。
如果某个元素支持某个事件，那么就有一个对应的HTML特性，用此特性就可以给其添加事件处理程序。
```
<button id="btn" onclick="alert(‘button click‘)">button</button>
```
DOM0级。将一个函数赋值给一个元素的事件处理程序属性：这是使用js指定事件生理程序的传统方式，至今仍被使用。
```
var btn = document.getElementById("btn");
btn.onmouseover = function(){
    this.innerHTML="按钮";
};
```
DOM2级。
通过addEventListener和removeEventListener来管理元素的事件。所有DOM节点都包含这两个方法，它们都包含三个参数，以add为例：

addEventListener(事件名，事件处理函数，是否在事件捕获时执行事件处理程序)
```
var btn = document.getElementById("btn");
btn.addEventListener("click",function(){alert(this.id);},true);
//注意下面的remove，它完全没有用，这两个匿名函数实际上是不同的对象
btn.removeEventListener("click",function(){alert(this.id);},true);
```
在上面代码中，指向同一对象的引用被认为是相同的，同样的申明生成的是两个外表相同但是存储在堆上两个不同位置的不同对象。