事件流

什么是事件流

HTML中与javascript交互是通过事件驱动来实现的，例如鼠标点击事件、页面的滚动事件onscroll等等，可以向文档或者文档中的元素添加事件侦听器来预订事件。

事件流的三个阶段

1. 事件捕获阶段
2. 处于目标阶段
3. 事件冒泡阶段

三个阶段的执行顺序

关于addEventListener

• addEventListener是一种绑定事件的方式，他有三个参数
• 关于第三个参数：

• • 默认为false即在事件冒泡阶段触发绑定的回调函数
  • 设置为true时，即在事件捕获阶段触发回调函数
  • 当它为一个选项组成的对象时

• • • capture 与 useCapture，作用相同，默认 false
    • once表示该事件是否只触发一次，默认 false
    • passive表示是否可调用 preventDefault()（阻止默认事件），默认 false

    // DOM

<div class="wrap">
    <div class="inner">inner</div>
</div>


// 第一种情况  两者都为默认冒泡阶段触发

document.querySelector('.wrap').addEventListener('click', function () {
    console.log('wrap : 冒泡触发');
}, false)

document.querySelector('.inner').addEventListener('click', function () {
    console.log('inner : 冒泡触发');
}, false)

// 打印顺序为
//inner : 冒泡触发
//wrap : 冒泡触发


/************************************************/

// 第二种情况  wrap为捕获阶段触发，inner为冒泡阶段触发

document.querySelector('.wrap').addEventListener('click', function () {
    console.log('wrap : 捕获触发');
}, true)

document.querySelector('.inner').addEventListener('click', function () {
    console.log('inner : 冒泡触发');
}, false)

// 打印顺序为
//wrap : 捕获触发
//inner : 冒泡触发


/************************************************/


//第三种情况  wrap为冒泡阶段触发，inner为捕获阶段触发
document.querySelector('.wrap').addEventListener('click', function () {
    console.log('wrap : 冒泡触发');
}, false)

document.querySelector('.inner').addEventListener('click', function () {
    console.log('inner : 捕获触发');
}, true)

// 打印顺序为
//inner : 捕获触发
//wrap : 冒泡触发


/************************************************/


//第四种情况  wrap为捕获阶段触发，inner为捕获阶段触发
document.querySelector('.wrap').addEventListener('click', function () {
    console.log('wrap : 捕获触发');
}, true)

document.querySelector('.inner').addEventListener('click', function () {
    console.log('inner : 捕获触发');
}, true)

// 打印顺序为
//wrap : 捕获触发
//inner : 捕获触发