1. 事件流
事件流描述的是从页面中接收事件的顺序。
事件流包括三个阶段：事件捕获阶段，处于目标阶段，事件冒泡阶段。
-
事件冒泡
事件冒泡，即事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的节点（文档节点）。
-
事件捕获
事件捕获的思想是不太具体的节点应该更早接收到事件，而最具体的节点应该最后接收到事件。
事件捕获的用意在于在事件到达预定目标之前捕获它。
事件捕获一般只有在某些特殊需要时才会使用。
2. 事件处理程序
事件就是用户或浏览器执行的某种动作，如 click、mouseover 和 load 等，都是事件名。
事件处理程序是响应某个事件的函数，事件处理程序的名字以“on”开头，因此 click 的事件处理程序就是 onclick。
为事件指定处理程序的方式有下面几种：
-
HTML 事件处理程序
<body> <input type="button" value="click me" onclick="alert('hello')"> <button type="button" id="mybtn" value="" onclick="sayHi()">按钮</button> <script type="text/javascript"> function sayHi(){alert("Hi");} </script> </body>以上面的例子来说明，假如 sayHi() 函数是在按钮下方、页面最底部定义的。
若用户在页面解析 sayHi() 函数之前就点击了按钮，就会引发错误。为此，
很多 HTML 事件处理程序都会被封装在一个 try-catch 块中，以免错误不会浮出水面。<button type="button" id="mybtn" value="username" onclick="try{sayHi();}catch(ex){ }">按钮</button>通过 HTML 事件处理程序的最大缺点就是 HTML 与 JavaScript 代码紧密耦合，不利于后期维护。
-
DOM0 级事件处理程序
使用 DOM0 级方法指定的事件处理程序在元素的作用域中运行，换句话说，程序中的 this 引用当前元素。
<button type="button" name="button" id="mybtn" value="">按钮</button> var btn = document.getElementById("mybtn"); btn.onclick = function(){alert(this.id);}; // "mybtn"删除通过上面两种方法方法指定的事件处理程序：
btn.onclick = null; // 删除事件处理程序
-
DOM2 级事件处理程序
1. 添加事件处理程序： addEventListener( ) 方法
2. 删除事件处理程序： removeEventListener( ) 方法
**这两个方法都接受3个参数：要处理的事件名，作为事件处理程序的函数和一个布尔值（true 表示在事件捕获阶段调用事件处理程序，false 表示在冒泡阶段调用事件处理程序）。**
**通过 addEventListener( ) 添加的事件处理程序只能通过removeEventListener( ) 移除；移除时传入的参数与添加事件处理程序时使用的参数相同，所以通过 addEventListener( ) 添加的匿名函数将无法移除。**
```javascript
function fun() {alert(this.id);}
btn.addEventListener("click",fun,false);
btn.removeEventListener("click",fun,false);
btn.addEventListener("click",function() {alert("hello world");},false);
btn.removeEventListener("click",function() {alert("hello world");},false);// 无法移除
```
-
IE 事件处理程序
IE8 及更早版本只支持事件冒泡。
##### 1. 添加事件处理程序： attachEvent( ) 方法
##### 2. 删除事件处理程序： detachEvent( ) 方法
>使用 attachEvent( ) 方法指定的事件处理程序不是按照他们添加的顺序执行，而是以相反的顺序被执行。
**这两个方法都接受两个参数：*事件处理程序名称（而非事件的名称）*，作为事件处理程序的函数。**
**与上述 DOM 方法一样，添加的匿名函数将无法移除。**
```javascript
function fun() {alert(this.id);}
btn.attachEvent("onclick",fun); // 注意这里的第一个参数是“onclick”，而不是“click”
btn.detachEvent("onclick",fun);
btn.attachEvent("onclick",function() {alert("hello world");});
btn.attachEvent("onclick",function() {alert("hello world");}); // 无法移除
```
> 使用 attachEvent( ) 方法指定的事件处理程序在全局作用域中运行，
换句话说，程序中的 this 等于 window 。例如下面的例子：
```javascript
btn.attachEvent("onclick",function() {
alert(this === window); // true
});
```
-
跨浏览器的事件处理程序
// 跨浏览器的事件处理程序
const EventUtil = {
addHandler: function (ele, type, handler) {
if (ele.addEventListener) {
ele.addEventListener(type, handler, false);
} else if (ele.attachEvent) {
ele.attachEvent("on" + type, handler);
} else {
ele["on" + type] = handler;
}
},
removeHandler: function (ele, type, handler) {
if (ele.removeEventListener) {
ele.removeEventListener(type, handler, false);
} else if (ele.detachEvent) {
ele.detachEvent("on" + type, handler);
} else {
ele["on" + type] = null;
}
},
getEvent: function (event) {
return event ? event : window.event;
},
getTarget: function (event) {
return event.target || event.srcElement;
},
preventDefault: function (event) {
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
},
stopPropagation: function (event) {
if (event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true;
}
}
};
```
网友评论