事件流
此篇文章来自我的简书，最近在把我之前简书平台上的文章迁移到掘金平台上
事件流描述的是从页面中接收事件的顺序。
事件流包括三个阶段：事件捕获阶段，处于目标阶段，事件冒泡阶段。
事件冒泡：即事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的节点（文档节点）。
事件捕获：事件捕获的思想是不太具体的节点应该更早接收到事件，而最具体的节点应该最后接收到事件；事件捕获的用意在于在事件到达预定目标之前捕获它。
事件处理程序
事件就是用户或浏览器执行的某种动作，如 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" value="username" onclick="try{sayHi();}catch(ex){}" id="mybtn">按钮</button>
通过 HTML 事件处理程序的最大缺点就是 HTML 与 JavaScript 代码紧密耦合，不利于后期维护。
删除事件处理程序
btn.onclick = null; // 删除事件处理程序
DOM0 级事件处理程序
添加事件处理程序
<button type="button" name="button" id="mybtn" value="">按钮</button>;
var btn = document.getElementById("mybtn");
btn.onclick = function() {
console.log(this.id);
}; // "mybtn"
删除事件处理程序
btn.onclick = null; // 删除事件处理程序
DOM2 级事件处理程序
先看下实例：
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
); // 无法移除
添加事件处理程序
addEventListener() 方法
删除事件处理程序
removeEventListener() 方法
addEventListener() 和 removeEventListener() 两个方法都接受 3 个参数：
- 要处理的事件名，
- 作为事件处理程序的函数
- 一个布尔值（true 表示在事件捕获阶段调用事件处理程序，false 表示在冒泡阶段调用事件处理程序）
通过
addEventListener()添加的事件处理程序只能通过removeEventListener()移除；移除时传入的参数与添加事件处理程序时使用的参数相同，所以通过addEventListener()添加的匿名函数将无法移除
IE 事件处理程序
IE8 及更早版本只支持事件冒泡。
先看下小案例：
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() 方法；此方法指定的事件处理程序不是按照他们添加的顺序执行，而是以相反的顺序被执行。
使用 attachEvent() 方法指定的事件处理程序在全局作用域中运行，换句话说，程序中的 this 等于 window 。例如下面的例子：
btn.attachEvent("onclick", function() {
alert(this === window); // true
});
删除事件处理程序
detachEvent() 方法
attachEvent() 和 detachEvent() 两个方法都接受两个参数：
- 事件处理程序名称（而非事件的名称）
- 作为事件处理程序的函数
通过 attachEvent() 添加的事件处理程序只能通过 detachEvent() 移除；移除时传入的参数与添加事件处理程序时使用的参数相同，所以通过 attachEvent() 添加的匿名函数将无法移除
总结出来一个跨浏览器的事件处理程序
// 跨浏览器的事件处理程序
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;
}
}
};
