事宜捕捉和事宜冒泡
“DOM2级事宜”划定的事宜流包括三个阶段：事宜捕捉、处于目的阶段和事宜冒泡。起首发作的是事宜捕捉，从外部节点到内部节点顺次遍历，为截获事宜供应了时机。然后是现实的目的吸收到事宜。末了一个阶段是冒泡阶段，从目的元素逐层冒泡到外部元素<body>，可以在这个阶段对事宜做出响应。IE9、 Opera、 Firefox、 Chrome 和 Safari 都支撑 DOM 事宜流； IE8 及更早版本不支撑 DOM 事宜流。
Event Handler 的罕见用法
事宜处置惩罚递次称号是事宜称号前加on，如onclick、onload. 为事宜指定事宜处置惩罚递次的要领包括：
1）HTML事宜处置惩罚递次：
经由过程HTML元素的特征指定：
<input type=”button” value=”Click Me” onclick=”alert(‘Clicked’)” />
最大瑕玷：HTML和JavaScript严密耦合，不发起采纳。
2）DOM0级事宜处置惩罚递次：
经由过程 JavaScript 指定事宜处置惩罚递次的传统体式格局，就是将一个函数赋值给一个事宜处置惩罚递次属性。起首必需获得一个要操纵的对象的援用。每一个元素（包括 window 和 document）都有本身的事宜处置惩罚递次属性，这些属性一般悉数小写，比方 onclick。将这类属性的值设置为一个函数，就可以指定事宜处置惩罚递次。
var btn = document.getElementById("myBtn");
//为属性赋值匿名函数
btn.onclick = function(){
alert("Clicked");
};
事宜作用域：运用 DOM0 级要领指定的事宜处置惩罚递次被认为是元素的要领。因而，这时候的事宜处置惩罚递次是在元素的作用域中运转；换句话说，递次中的 this 援用当前元素。
移除体式格局：删除经由过程 DOM0 级要领指定的事宜处置惩罚递次，只需像下面如许将事宜处置惩罚递次属性的值设置为 null 即可：
btn.onclick = null; //删除事宜处置惩罚递次还记得怎样删除对象实例属性吗？运用delete算符，删除后实例属性就没了，然则原型属性还在。
瑕玷：同一个事宜增加两个事宜处置惩罚递次会致使后一个掩盖前一个。缘由在于一个事宜处置惩罚递次就是一个属性，为一个属性赋两个值，后一个会掩盖前一个。
3）DOM2 级事宜处置惩罚递次
“ DOM2 级事宜” 定义了两个要领，用于处置惩罚绑定和删除事宜处置惩罚递次的操纵：
addEventListener()和 removeEventListener()。
一切 DOM 节点中都包括这两个要领，而且它们都吸收 3 个参数：要处置惩罚的事宜名（不带on）、作为事宜处置惩罚递次的函数和一个布尔值。末了这个布尔值参数假如是 true，示意在捕捉阶段挪用事宜处置惩罚递次；假如是 false，示意在冒泡阶段挪用事宜处置惩罚递次。
/*为一个按钮增加了 onclick 事宜处置惩罚递次，而且该事宜会在冒泡阶段被触发*/
var btn = document.getElementById("myBtn");
btn.addEventListener("click", function(){
alert(this.id);
}, false);
事宜作用域：与 DOM0 级要领一样，这里增加的事宜处置惩罚递次也是在其倚赖的元素的作用域中运转。运用 DOM2 级要领增加事宜处置惩罚递次的重要优点是可以增加多个事宜处置惩罚递次，多事宜处置惩罚递次会根据增加它们的递次触发。IE9、 Firefox、 Safari、 Chrome 和 Opera 支撑 DOM2 级事宜处置惩罚递次，对IE8及以下版本有专用事宜处置惩罚递次。
移除体式格局：经由过程 addEventListener()增加的事宜处置惩罚递次只能运用 removeEventListener()来移除；移除时传入的参数与增加处置惩罚递次时运用的参数雷同。这也意味着经由过程 addEventListener()增加的匿名函数将没法经由过程removeEventListener()移除，这是因为匿名函数每次涌现都是一次挪用，定名函数每次涌现是一次援用。因而发起运用定名函数作为eventhandler的函数参数。
大多数情况下，都是将事宜处置惩罚递次增加到事宜流的冒泡阶段（末了一个参数是false），如许可以最大限制地兼容种种浏览器，jQuery和React运用冒泡机制，处理了兼容性问题。
4）IE事宜处置惩罚递次（非规范要领）
IE 完成了与 DOM 中相似的两个要领： attachEvent()和 detachEvent()。这两个要领吸收雷同的两个参数：事宜处置惩罚递次称号与事宜处置惩罚递次函数。因为 IE8 及更早版本只支撑事宜冒泡，所以经由过程attachEvent()增加的事宜处置惩罚递次都邑被增加到冒泡阶段（DOM2规范发起采纳冒泡阶段，然则也可以采纳捕捉阶段）。
var btn = document.getElementById("myBtn"); //获得DOM元素
btn.attachEvent("onclick", function(){ //注重运用了带on的事宜名和匿名函数
alert("Clicked");
});
注重：(a) attachEvent()的第一个参数是”onclick”，而非 DOM 的 addEventListener()要领中的”click”。(b) 在运用 attachEvent()要领的情况下，事宜处置惩罚递次会在全局作用域中运转，因而 this 即是 window。在运用 DOM0 和DOM2规范要领的情况下，事宜处置惩罚递次会在其所属元素的作用域内运转。（c）默许增加在在冒泡阶段。(d)可以增加多个事宜处置惩罚递次，多个事宜处置惩罚递次的实行递次和DOM2 相反，也就是和增加递次相反。
var btn = document.getElementById("myBtn");
btn.attachEvent("onclick", function(){
alert(this === window); //true
});
移除：运用 attachEvent()增加的事宜可以经由过程 detachEvent()来移除，前提是必需供应雷同的参数。与 DOM 要领一样，这也意味着增加的匿名函数将不能被移除。不过，只需可以将对雷同定名函数的援用传给 detachEvent()，就可以移除响应的事宜处置惩罚递次。
5) 跨浏览器的事宜处置惩罚递次
可以经由过程可以断绝浏览器差别的JavaScript库或许建立兼容各大浏览器差别的事宜处置惩罚要领，库运用可以参照jQuery，这里不引见。兼容各大浏览器差别的事宜处置惩罚要领包括addHandler()和removeHandler()，都属于EvenUtil对象，吸收雷同的参数：要操纵的元素、事宜称号、事宜处置惩罚递次函数。
这两个要领起首都邑检测传入的元素中是不是存在 DOM2 级要领。假如存在 DOM2 级要领，则运用该要领：传入事宜范例、事宜处置惩罚递次函数和第三个参数 false（示意冒泡阶段）。假如存在的是 IE 的要领，则采用第二种计划。注重，为了在 IE8 及更早版本中运转，此时的事宜范例必需加上”on”前缀。末了一种能够就是运用 DOM0 级要领（在当代浏览器中，应当不会实行这里的代码）。此时，我们运用的是方括号语法来将属性名指定为事宜处置惩罚递次（add），或许将属性设置为 null(remove)。
运用要领以下：
