JavaScript の 事件流

事件流

• 什么是事件流

事件流是指事件完整执行过程中的流动路径

• 两个阶段

1. 捕获

就是从大到小的捕获过程，例如从document->html->body->div

捕获在事件监听里面

a.addEventListener(事件类型,事件处理函数,是否使用捕获机制)

默认是false，不使用捕获机制，使用冒泡

如果使用了捕获机制，那么，如果一个div的事件发生了，那么捕获流程中的元素的对应的事件也会发生

2. 冒泡

就是从小到大返回的过程，与捕获相反

冒泡在事件监听里面

事件函数的第三个参数不写，默认是false使用冒泡

如果使用了冒泡机制，那么，如果一个div的事件发生了，那么冒泡流程中的元素的对应的事件也会发生

简单理解：一个元素触发事件后，会依次调用所有祖先元素的同名事件

实际工作中使用事件冒泡为主

阻止冒泡

因为冒泡默认存在，所以容易影响父级元素

如果想要将时间限制在当前元素中，就需要阻止事件冒泡

阻止事件冒泡需要先拿到事件对象

语法：

事件对象.stopPropgation() 阻止事件流动，同时阻止冒泡与捕获

解绑事件

removeEventListener(事件类型,函数名)

因为匿名函数没有函数名，所以匿名函数也就无法解绑

阻止元素默认行为

使用

e.preventDefault()

const a=document.querySelector('a')
a.addEventListener('click',function(e){
  e.preventDefault()
})