一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第5天， 事件冒泡
从最具体的元素到不具体的元素（由内到外）
当子元素事件触发后，会依次向上传递，直到触发根元素
例如：事件A包含着事件B，当点击事件B的时候，事件A同时也会触发，这就是事件冒泡
显示不是想要的结果
阻止事件冒泡
方法一就是在相关函数添加event.stopPropagation()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="box1">
a
<div id="box2">b</div>
</div>
</body>
</html>
<style>
#box1{
width: 200px;
height: 100px;
background-color: aqua;
}
#box2{
width: 100px;
height: 50px;
background-color: cadetblue;
}
</style>
<script>
var box1 = document.querySelector('#box1')
var box2 = document.querySelector('#box2')
box1.onclick = ()=>{
console.log('我是box1');
event.stopPropagation()
}
box2.onclick = ()=>{
console.log('我是box2');
event.stopPropagation()
}
</script>
方法二判断event.target和event.currentTarget是否相等
event.target：指真正触发事件的元素
event.currentTarget：指绑定了事件监听的元素（触发事件元素的父级元素）
这是判断两者相等，则执行相应的处理函数，当事件冒泡到上一级时，event.currentTarget变为上级元素，这时候判断两者不相等，则不作响应处理逻辑
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="box1">
a
<div id="box2">b</div>
</div>
</body>
</html>
<style>
#box1{
width: 200px;
height: 100px;
background-color: aqua;
}
#box2{
width: 100px;
height: 50px;
background-color: cadetblue;
}
</style>
<script>
var box1 = document.querySelector('#box1')
var box2 = document.querySelector('#box2')
box1.onclick = ()=>{
if(event.target == event.currentTarget)
console.log('我是box1');
}
box2.onclick = ()=>{
if(event.target == event.currentTarget)
console.log('我是box2');
}
</script>
但是如果有几百个元素不就得一一判断了吗？我们是优雅的程序员
event.target能准确获取事件源，并且在使用的过程中可以比较判断
event.target属性：
event.target.nodeName //获取事件触发元素标签name
event.target.id //获取事件触发元素id
event.target.className //获取事件触发元素classname
event.target.innerHTML //获取事件触发元素的内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="box1">
a
<div id="box2">b</div>
</div>
</body>
</html>
<style>
#box1{
width: 200px;
height: 100px;
background-color: aqua;
}
#box2{
width: 100px;
height: 50px;
background-color: cadetblue;
}
</style>
<script>
document.querySelector('body').addEventListener('click',(e)=>{
var e = e.target
switch(e.id){
case 'box1':{
console.log('触发box1');
break
}
case 'box2':{
console.log('触发box2');
break;
}
}
})
</script>
\
