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)