默认事件

什么是默认事件
默认事件是元素默认会触发的事件，比如当你进入网页，右击鼠标会冒出菜单栏
怎么阻止默认事件发生
e.preventDefault();

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><p>fdcuuwfff</p>
</body>
<script>var p=document.querySelector("p");p.oncontextmenu=function(e){e.preventDefault();}
</script>
</html>

此时再去P标签上右击，不会出现菜单栏

冒泡事件

什么是冒泡事件
事件由子级传向父级，称之为事件冒泡

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;list-style: none;}.d1{width: 200px;height: 200px;background-color: tomato;}.d2{width: 150px;height: 150px;background-color: gold;}.d3{width: 100px;height: 100px;background-color: cyan;}</style>
</head>
<body><div class="d1"><div class="d2"><div class="d3"></div></div></div>
</body>
<script>var d1=document.querySelector(".d1");var d2=document.querySelector(".d2");var d3=document.querySelector(".d3");d1.onclick=function(){console.log("d1");}d2.onclick=function(){console.log("d2");}d3.onclick=function(){console.log("d3");}
</script>
</html>

在这里插入图片描述
当点击d3时，d1,d2的事件也会执行
阻止冒泡事件
e.stopPropagation();

<script>var d1=document.querySelector(".d1");var d2=document.querySelector(".d2");var d3=document.querySelector(".d3");d1.onclick=function(){console.log("d1");}d2.onclick=function(e){e.stopPropagation();console.log("d2");}d3.onclick=function(){console.log("d3");}
</script>