1、什么是事件？
事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间。可以使用侦听器（或处理程序）来预订事件，以便事件发生时执行相应的代码。这种在传统软件工程中被称为观察员模式的模型，支持页面的行为（JavaScript 代码）与页面的外观（HTML 和CSS 代码）之间的松散耦合。DOM2 级规范开始尝试以一种符合逻辑的方式来标准化DOM事件。
2、什么是事件流？
事件冒泡：IE 的事件流叫做事件冒泡（event bubbling），即事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到较为不具体的节点（文档）。如：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Event Bubbling Example</title> 5 </head> 6 <body> 7 <div id="myDiv">Click Me</div> 8 </body> 9 </html>
事件触发顺序为：
事件捕获：Netscape Communicator 团队提出的另一种事件流叫做事件捕获（event capturing）。事件捕获的思想是不太具体的节点应该更早接收到事件，而最具体的节点应该最后接收到事件。事件捕获的用意在于在事件到达预定目标之前捕获它。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Event Bubbling Example</title> 5 </head> 6 <body> 7 <div id="myDiv">Click Me</div> 8 </body> 9 </html>
事件触发顺序为：
“DOM2级事件”规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。首先发生的是事件捕获，为截获事件提供了机会。然后是实际的目标接收到事件。最后一个阶段是冒泡阶段，可以在这个阶段对事件做出响应。如：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Event Bubbling Example</title> 5 </head> 6 <body> 7 <div id="myDiv">Click Me</div> 8 </body> 9 </html>
总事件触发顺序为：
3、什么是事件处理程序？
事件就是用户或浏览器自身执行的某种动作。诸如click、load 和mouseover，都是事件的名字。而响应某个事件的函数就叫做事件处理程序（或事件侦听器）。事件处理程序的名字以"on"开头，因此click 事件的事件处理程序就是onclick，load 事件的事件处理程序就是onload。为事件指定处理程序的方式有好几种。
3.1 、DOM0级事件处理程序
通过JavaScript 指定事件处理程序的传统方式，就是将一个函数赋值给一个事件处理程序属性。这种为事件处理程序赋值的方法是在第四代Web 浏览器中出现的，而且至今仍然为所有现代浏览器所支持。原因一是简单，二是具有跨浏览器的优势。要使用JavaScript 指定事件处理程序，首先必须取得一个要操作的对象的引用。绑定"onclick"方法，如：
1 var btn = document.getElementById("myBtn");
2 btn.onclick = function(){
3 alert("Clicked");
4 };
解除绑定"onclick"方法，如：
1 btn.onclick = null;
3.2、DOM2 级事件处理程序
“DOM2级事件”定义了两个方法，用于处理指定和删除事件处理程序的操作：addEventListener()和removeEventListener()。所有DOM节点中都包含这两个方法，并且它们都接受3 个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。最后这个布尔值参数如果是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。
要在按钮上为click 事件添加事件处理程序（冒泡），可以使用下列代码：
1 var btn = document.getElementById("myBtn");
2 btn.addEventListener("click", function(){
3 alert(this.id);
4 }, false);
上面的代码为一个按钮添加了onclick 事件处理程序，而且该事件会在冒泡阶段被触发（因为最后一个参数是false）。与DOM0 级方法一样，这里添加的事件处理程序也是在其依附的元素的作用域中运行。使用DOM2 级方法添加事件处理程序的主要好处是可以添加多个事件处理程序。来看下面的例子。
1 var btn = document.getElementById("myBtn");
2 btn.addEventListener("click", function(){
3 alert(this.id);
4 }, false);
5 btn.addEventListener("click", function(){
6 alert("Hello world!");
7 }, f alse);
这里为按钮添加了两个事件处理程序。这两个事件处理程序会按照添加它们的顺序触发，因此输出：
1 myBtn 2 Hello world!
通过addEventListener()添加的事件处理程序只能使用removeEventListener()来移除；移除时传入的参数与添加处理程序时使用的参数相同。这也意味着通过addEventListener()添加的匿名函数将无法移除。
匿名函数将无法移除，如下面的例子所示。
1 var btn = document.getElementById("myBtn");
2 btn.addEventListener("click", function(){
3 alert(this.id);
4 },false);
5
6 //这里省略了其他代码
7
8 btn.removeEventListener("click", function(){ //没有用！
9 alert(this.id);
10 }, false);
在这个例子中，我们使用addEventListener()添加了一个事件处理程序。虽然调用removeEventListener()时看似使用了相同的参数，但实际上，第二个参数与传入addEventListener()中的那一个是完全不同的函数。而传入removeEventListener()中的事件处理程序函数必须与传入addEventListener()中的相同，如下面的例子所示。
正确做法是，请看下面例子：
1 var btn = document.getElementById("myBtn");
2 var handler = function(){
3 alert(this.id);
4 };
5 btn.addEventListener("click", handler, false);
6 //这里省略了其他代码
7 btn.removeEventListener("click", handler, false); //有效！
重写后的这个例子没有问题，是因为在addEventListener()和removeEventListener()中使用了相同的函数。
3.2.1、IE事件处理程序
IE 实现了与DOM 中类似的两个方法：attachEvent()和detachEvent()。这两个方法接受相同的两个参数：事件处理程序名称与事件处理程序函数。由于IE8 及更早版本只支持事件冒泡，所以通过attachEvent()添加的事件处理程序都会被添加到冒泡阶段。
要使用attachEvent()为按钮添加一个事件处理程序，可以使用以下代码。
1 var btn = document.getElementById("myBtn");
2 btn.attachEvent("onclick", function(){
3 alert("Clicked");
4 });
注意，attachEvent()的第一个参数是"onclick"，而非DOM 的addEventListener()方法中的"click"。
在IE 中使用attachEvent()与使用DOM0 级方法的主要区别在于事件处理程序的作用域。在使用DOM0 级方法的情况下，事件处理程序会在其所属元素的作用域内运行；在使用attachEvent()方法的情况下，事件处理程序会在全局作用域中运行，因此this 等于window。来看下面的例子。
1 var btn = document.getElementById("myBtn");
2 btn.attachEvent("onclick", function(){
3 alert(this === window); //true
4 });
与addEventListener()类似，attachEvent()方法也可以用来为一个元素添加多个事件处理程序。来看下面的例子。
1 var btn = document.getElementById("myBtn");
2 btn.attachEvent("onclick", function(){
3 alert("Clicked");
4 });
5 btn.attachEvent("onclick", function(){
6 alert("Hello world!");
7 });
输出：
1 Hello world! 2 Clicked
这里调用了两次attachEvent()，为同一个按钮添加了两个不同的事件处理程序。不过，与DOM方法不同的是，这些事件处理程序不是以添加它们的顺序执行，而是以相反的顺序被触发。单击这个例子中的按钮，首先看到的是"Hello world!"，然后才是"Clicked"。
使用attachEvent()添加的事件可以通过detachEvent()来移除，条件是必须提供相同的参数。与DOM 方法一样，这也意味着添加的匿名函数将不能被移除。不过，只要能够将对相同函数的引用传给detachEvent()，就可以移除相应的事件处理程序。例如：
1 var btn = document.getElementById("myBtn");
2 var handler = function(){
3 alert("Clicked");
4 };
5 btn.attachEvent("onclick", handler);
6 //这里省略了其他代码
7 btn.detachEvent("onclick", handler);
注：支持该事件处理程序的只有IE和Opera
3.2.2、跨浏览器的事件处理程序
只需关注冒泡阶段。第一个要创建的方法是addHandler()，它的职责是视情况分别使用DOM0 级方法、DOM2 级方法或IE 方法来添加事件。这个方法属于一个名叫EventUtil 的对象，本书将使用这个对象来处理浏览器间的差异。addHandler()方法接受3 个参数：要操作的元素、事件名称和事件处理程序函数。
与addHandler()对应的方法是removeHandler()，它也接受相同的参数。这个方法的职责是移除之前添加的事件处理程序——无论该事件处理程序是采取什么方式添加到元素中的，如果其他方法无效，默认采用DOM0 级方法。
EventUtil 的用法如下所示。
1 var EventUtil = {
2 addHandler: function(element, type, handler){
3 if (element.addEventListener){
4 element.addEventListener(type, handler, false);
5 } else if (element.attachEvent){
6 element.attachEvent("on" + type, handler);
7 } else {
8 element["on" + type] = handler;
9 }
10 },
11 removeHandler: function(element, type, handler){
12 if (element.removeEventListener){
13 element.removeEventListener(type, handler, false);
14 } else if (element.detachEvent){
15 element.detachEvent("on" + type, handler);
16 } else {
17 element["on" + type] = null;
18 }
19 }
20 };
可以像下面这样使用EventUtil 对象：
1 var btn = document.getElementById("myBtn");
2 var handler = function(){
3 alert("Clicked");
4 };
5 EventUtil.addHandler(btn, "click", handler);
6 //这里省略了其他代码
7 EventUtil.removeHandler(btn, "click", handler);
今天的讨论就到这里，如果有什么意见或者建议，请多留言哦！！！
来源：https://www.cnblogs.com/bo-haier/p/5643019.html