Js事件

事件，就是document或者window中发生的一些特定的交互瞬间，定义与JavaScript和HTML之间。

---

事件流

DOM2级事件规定事件流包含3个阶段：事件捕获(Capture)、处于目标(Target)、事件冒泡(Bubbling)。

none

如上图中，事件捕获阶段，将沿着DOM树向下传运事件，直至目标节点。（ document > html > body > p )
处于目标阶段，找到事件监听器后，作用于目标节点。
冒泡阶段，事件沿DOM树传回document。

事件处理程序

• DOM0级事件处理程序：
  即通过JavaScript指定事件处理程序的传统方式，将一个函数赋值给一个事件处理程序属性。

var btn = document.getElementById("mybtn");
btn.onclick = function(){
    alert('brbrbr");
};
btn.onclick = null; //删除

DOM0级方法是元素的方法，此时的事件处理程序是在元素的作用域中运行，换句话说程序中的this（假如有this）会绑定于当前函数。

• DOM2级事件处理程序：
  用于指定和删除处理程序的方法：addEventListener()和removeEventListener()，所以DOM节点都包含这两种方法，addEventListener("EventName", function(), Boolean)，如果最后这个布尔值为True，表示在捕获阶段调用事件处理程序，如False，表示在冒泡阶段调用事件处理程序（处于目标阶段一般被看作为冒泡阶段的一部分）。

var btn = document.getElementById("mybtn");
btn.addEventListener("click", function(){
    alert("brbrbrbr");
}, false);

通过addEventListener()添加的事件处理程序只能通过removeEventListener()来移出，但由于上述代码中使用了匿名函数，故无法移出，因此，添加事件处理程序时因尽量避免。大多数情况下，为最大限度的兼容浏览器，boolean取false。
IE中attachEvent()和detachEvent()类似，但需要注意的是，其中的this会绑定全局，即window，意味着事件处理程序会在全局作用域下运行。

事件对象

在触发DOM上的事件时，会产生一个事件对象（event），这个对象中包含了所以与事件有关的信息。

btn.onclick = function(event){
    ...
};
btn.addEventListener("click", function(event){...}, false);

• 对象属性参考