JavaScript 事件（一）

事件流

事件流描述的是从页面中接收事件的顺序。
事件流包括三个阶段：事件捕获阶段，处于目标阶段，事件冒泡阶段。

事件冒泡
事件冒泡，即事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的节点（文档节点）。
事件捕获
事件捕获的思想是不太具体的节点应该更早接收到事件，而最具体的节点应该最后接收到事件。
事件捕获的用意在于在事件到达预定目标之前捕获它。

事件捕获一般只有在某些特殊需要时才会使用。

事件处理程序

事件就是用户或浏览器执行的某种动作，如 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() 添加的匿名函数将无法移除。
```
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 方法一样，添加的匿名函数将无法移除。
```
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 。例如下面的例子：
```
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;
    }
  }
};

JavaScript 事件（一）

事件流

事件处理程序

为事件指定处理程序的方式有下面几种：

推荐阅读更多精彩内容