- 事件冒泡：html元素是嵌套结构，在触发内层元素的事件时，外部事件也会被由内到外触发，这种现象叫做事件冒泡
- 阻止冒泡事件： e.stopPropagation();
- 默认事件： a标签的跳转事件就是默认事件
- 阻止默认事件： e.preventDefault();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.div1{
width:400px;
height:400px;
border:1px solid black;
}
.div2{
width:300px;
height:300px;
border:1px solid black;
}
.div3{
width:200px;
height:200px;
border:1px solid black;
}
.div4{
width:100px;
height:100px;
border:1px solid black;
}
</style>
</head>
<body>
<!-- 事件冒泡：实现点击哪个div，控制台打印哪个div的class类名 -->
<div class="div1" onclick="xianshi('div1',event)">
<div class="div2" onclick="xianshi('div2',event)">
<div class="div3" onclick="xianshi('div3',event)">
<div class="div4" onclick="xianshi('div4',event)"></div>
</div>
</div>
</div>
<!-- 默认事件:实现触发后面的xianshi方法，但页面不进行跳转 -->
<a href="https://www.baidu.com" onclick=xianshi("a标签",event)>a标签的默认事件</a>
<script type="text/javascript">
function xianshi(name,e){
console.log(name);
e.stopPropagation();
e.preventDefault();
}
</script>
</body>
