事件流
事件流描述的是从页面中接收事件的顺序。
事件流包括三个阶段：事件捕获阶段，处于目标阶段，事件冒泡阶段。
事件冒泡
事件冒泡，即事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的节点（文档节点）。事件捕获
事件捕获的思想是不太具体的节点应该更早接收到事件，而最具体的节点应该最后接收到事件。
事件捕获的用意在于在事件到达预定目标之前捕获它。
事件捕获一般只有在某些特殊需要时才会使用。
事件处理程序
事件就是用户或浏览器执行的某种动作，如 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 级事件处理程序
- 添加事件处理程序： addEventListener() 方法
- 删除事件处理程序： 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 及更早版本只支持事件冒泡。
添加事件处理程序： attachEvent() 方法
-
删除事件处理程序： 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; } } };
