浅谈事件捕获和事件冒泡

时间:2021-2-20 作者:admin

最近在复习前端的知识,准备把每天的复习内容分享出来,不对的地方希望大佬能够指点

在DOM事件流中,存在三个阶段,事件捕获阶段,处于目标阶段,事件冒泡阶段

事件捕获:

当鼠标点击或触发dom事件时,浏览器会从根节点——->事件源开始传播(由外到内)

事件冒泡:

事件源—–>根节点进行传播(由内到外)

无论是事件捕捉还是事件冒泡都有一个共同的行为,就是事件传播

dom标准事件流的触发的先后顺序为:先捕获再冒泡,即当触发dom事件时,会先进行事件捕获,捕捉到事件源之后通过事件传播进行事件冒泡

addEventListener的第三个参数:

在平时我们用addEventListener方法中,一般只会用到两个参数,一个是需要绑定的事件,另一个就是触发事件后要执行的函数,但是这个函数号可以传入第三参数,

element.addEventListener(event, function, useCapture)

第三个参数默认是false

事件冒泡:

<div id="parent">父元素
    <div id="child">子元素<div>
<div>

var parent = document.getElementById('parent')
var child = document.getElementById('child')

document.body.addEventListener('click',function(e){
    console.log('click-body')
},false)

parent.addEventListener('click',function(e){
    console.log('click-parent')
},false)

child.addEventListener('click',function(e) {
    console.log('click-child')
    e.stopPropagation()
},false)

点击子元素图片如下:

事件触发的顺序是由内到外,如果点击子元素不想触发子元素的事件,可以使用event.stopPropagation();方法

事件捕获:

// 事件捕获
document.body.addEventListener('click',function(e){
    console.log('click-body')
},true)

parent.addEventListener('click',function(e){
    console.log('click-parent')
},true)

child.addEventListener('click',function(e) {
    console.log('click-child')
},true)

点击子元素如下图:

以上是我对事件捕获和事件冒泡的理解,希望评论区留言指出问题

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。