一、事件流
2019-04-01 本文已影响0人
萘小蒽
事件流描述的是从页面中接收事件的顺序。
1. 事件冒泡
事件冒泡是从事件开始时有最具体的元素（文档中嵌套层最深的节点）接收，然后逐级向上传播到较为不具体的节点。
<!DOCTYPE html>
<html>
<head>
<title>事件冒泡</title>
</head>
<body>
<div id="app">Click Me</div>
</body>
</html>
如果你点击页面的div元素，那么click事件会按照如下顺序传播：
div => body => html => document
2. 事件捕获
事件捕获的意思是让不太具体的节点应该更早接收到事件，而最具体的节点应该最后接收到事件，在事件达到预定目标之前捕获它。
document => html => body => div
3. DOM事件流
DOM规定的事件流包括三个阶段：，
，
。
- 首先是事件捕获，为截获事件提供机会。
- 然后是实际的目标接收到事件。
- 最后一个阶段是冒泡阶段，可以在这个阶段对事件作出响应。
结合1上面的代码：
事件流三阶段
- 在上图的DOM事件流中，实际目标(
div元素)在捕获阶段不会接收到事件。意味着在捕获阶段从1️⃣(Document)到3️⃣(body)后就停止了（但是在高版本的主流浏览器中捕获阶段实际目标也会接收到事件，意味着有两次机会再实际目标上操作事件）。- 下一个阶段是“处于目标”阶段，于是事件在div上发生了，并在事件处理中被看成冒泡阶段的一部分。
- 然后冒泡阶段发生(
④、⑤、⑥、⑦)，事件又传播回文档。
4. DOM2级事件处理（addEventListener）
addEventListener(eventType, function, useCapture),接受三个参数：
event：需要处理的事件类型
function:作为事件处理的函数useCapture:布尔值（true表示在捕获阶段调用。false表示在冒泡阶段调用）。
var btn = document.getElementByid("myBtn");
btn.onclick = function(event){
cosnole.log(event.type) //click
};
btn.addEventListener("click",function(event){
console.log(event.type) //click
},false)
