事件 事件流

1、什么是事件
​    事件是文档和浏览器窗口中发生的特定的交互瞬间，例如用户点击内容，鼠标经过特定的元素

​    以及按下某个键盘按键，web页面加载完成，用户滚动。都是事件

2、什么是事件流
​     事件流描述的是从页面中接受事件的顺序，事件流分为事件冒泡 事件阶段 事件捕获

​     事件流分为事件冒泡流和事件捕获流

​     事件冒泡流 => ie提出的

​     事件捕获流 => 网景提出的

​     事件流三个阶段顺序 事件捕获 =>事件冒泡

3、事件冒泡

​     事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的节点

​     事件冒泡的过程就是 btn => div => body层层向上传递的过程

<div id="div">
      <button id="btn">点击</button>
</div>
var btn = document.getElementById('btn');
var div = document.getElementById('div');

function btnClick() {
 console.log('点击了btn')
}

function divClick() {
 console.log('点击了div')
}

function bodyClick() {
 console.log('点击了body')
}

4、事件捕获

​ 是不太具体的 DOM 节点应该更早接收到事件，而最具体的节点应该最后接收到事件

​ 事件捕获的过程就是 body => div =>btn 层层向下传递的过程

btn.addEventListener('click', function() {
 console.log('btn点击了')
}, false)

div.addEventListener('click', function() {
 console.log('div点击了')
}, false)