元素就会以下列顺序触发 click 事件

1. document

DOM2级 规定的事件流包括三个阶段：先捕获，再处于目标阶段，最后事件冒泡。

事件处理程序

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

HTML 事件处理程序

某个元素支持的每种事件，都可以使用一个与相应事件处理程序同名的 HTML 特性来指定。
例子：

<input type="button" value="Click me" onclick="alert('clicked')" />

缺点

1. 时差问题。用户可能会在 HTML 元素一出现在页面上就触发相应的事件，但当时的事件处理程序有可能尚不具备执行条件。
2. 扩展事件处理程序的作用域链在不同浏览器中会导致不同结果。
3. HTML 与 JavaScript 代码紧密耦合

DOM0 级事件处理程序

通过 JavaScript 指定事件处理程序的传统方式，就是将一个函数赋值给一个事件处理程序属性。
每个元素（包括 window 和 document）都有自己的事件处理程序属性，这些属性通常全部小写，例如 onclick 。将这种属性的值设置为一个函数，就可以指定事件处理程序。

var btn = document.getElementById("myBtn");
btn.onclick = function() {
  alert("clicked");
}
btn.onclick = null; // 删除事件处理程序

使用 DOM0 级方法指定的事件处理程序被认为是元素的方法 。即 this 指向的是 DOM 元素本身。
以这种方式添加的事件处理程序会在事件流的冒泡阶段被处理。

删除通过 DOM0 级方法指定的事件处理程序。

btn.onclick = null;

DOM2 级事件处理程序

DOM2级事件 定义了两个方法，用于处理指定和删除事件处理程序的操作：addEventListener() 和 removeEventListener() 。
addEventListener 三个参数：

1. 要处理的事件名
2. 事件处理函数
3. true：捕获；false：冒泡 ```javascript var btn = document.getElementById(“myBtn”); var handler = function() { alert(this.id); } btn.addEventListener(“click”, handler, false);

btn.removeEventListener(“click”, handler, false);

this 指向的是 DOM 元素本身<br />好处：可以添加多个事件处理程序
<a name="1AWHu"></a>
## IE事件处理程序
IE 独有。<br />`attachEvent()` 和 `detachEvent()` 。这两个方法接受相同的参数：事件处理程序名称与事件处理程序函数。<br />由于 IE8 及更早版本只支持事件冒泡，所以通过 `attachEvent()` 添加的事件处理程序都会被添加到冒泡阶段。
```javascript
var btn = document.getElementById("myBtn");
var handler = function() {
  alert("clicked");
}
btn.attachEvent("onclick", handler);
btn.detachEvent("onclick", handler);

this 指向 window 。

跨浏览器的事件处理程序

自己编写保证处理事件的代码能在大多数浏览器下一致地运行，只需关注冒泡阶段。
addHandler() 方法接受 3 个参数：要操作的元素、事件名称和事件处理程序函数。

var EventUtil = {
  addHandler: function(element, type, handler) {
    if (element.addEventListener) {
      element.addEventListener(type, hander, false);
    } else if (element.attachEvent) {
      element.attachEvent("on" + type, handler);
    } else {
      element["on" + type] = handler;
    }
  },
  removeHander: function(element, type, handler) {
    if (element.removeEventListener) {
      element.removeEventListener(type, handler, false);
    } else if (element.detachEvent) {
      element.detachEvent("on" + type, handler);
    } else {
      element["on" + type] = null;
    }
  }
};

事件对象

事件对象即 event 对象

DOM中的事件对象

target 和 currentTarget 属性：this 始终等于 currentTarget 的值，而 target 则只包含事件的实际目标。
type 属性：被触发的事件的类型。

阻止特定事件的默认行为，可以使用 preventDefault() 方法。
只有 cancelable 属性设置为true的事件，才可以使用 preventDefault() 来取消其默认行为。

var link = document.getElementById("myLink");
link.onclick = function(event) {
  event.preventDefault();
};

stopPropagation() 方法用于立即停止事件在 DOM 层级中的传播，即取消进一步的事件捕获或冒泡。

eventPhase 属性，可以用来确定事件当前正处于事件流的哪个阶段。如果是在捕获阶段调用的事件处理程序，那么 eventPhase 等于 1 ；如果事件处理程序处于目标对象上，则 eventPhase 等于 2 ；如果是在冒泡阶段调用的事件处理程序， eventPhase 等于 3 。这里要注意的是，尽管“处于目标”发生在冒泡阶段，但 eventPhase 仍然一直等于 2 。

IE中的事件对象

在使用 DOM0 级方法添加事件处理程序时， event 对象作为 window 对象的一个属性存在。

var btn = document.getElementById('myBtn');
btn.onclick = function() {
  var event = window.event;
  alert(event.type); // 'click'
}

DOM 中的 event.target 等于 IE 中的 window.event.srcElement
returnValue 属性相当于 DOM 中的 preventDefault() 方法，它们的作用都是取消给定事件的默认行为。只要将 returnValue 设置为 false ，就可以阻止默认行为。
cancelBubble 属性与 DOM 中的 stopPropagation() 方法作用相同，都是用来停止事件冒泡的。由于 IE 不支持事件捕获，因为只能取消事件冒泡；但 stopPropagation() 可以同时取消事件捕获和冒泡。

跨浏览器的事件对象

event = event | window.event;
target = event.target | event.srcElement;
prventDefault: function(event) {
    if(event.preventDefault) {
        event.preventDefault();
    } else {
        event.returnValue = false;
    }
}
stopPropagation: function(event) {
    if(event.stopPropagation) {
        event.stopPropagation();
    } else {
        event.cancelBubble = true;
    }
}
addHandler: function(element, type, handler) {
    if(element.addEventListener) {
        element.addEventListener(type, handler, false);
    } else if (element.attachEvent) {
        element.attachEvent("on" + type, handler);
    } else {
        element["on" + type] = handler;
    }
}

事件类型

UI事件

当用户与页面上的元素交互时触发

• load ：当页面完全加载后在 window 上面触发，当所有框架都加载完毕时在框架集上面触发，当图像加载完毕时在 元素上面触发，或者当嵌入的内容加载完毕时在