事件的冒泡和默认事件
一 概念
事件的冒泡：父子都具有点击事件，不处理的话，点击子级也会出发父级的点击事件
```html
<body id="body">
<div id="sup">
<div id="sub"></div>
</div>
</body>
<script>
sub.onclick = function (ev) {
// 方式一
ev.stopPropagation();
console.log("sub click");
}
sup.onclick = function (ev) {
// 方式二
ev.cancelBubble = true;
console.log("sup click");
}
body.onclick = function (ev) {
console.log("body click");
}
</script>
```
- 默认事件：取消默认的事件动作，如鼠标右键菜单
```html
<body id="body">
<div id="sup">
<div id="sub"></div>
</div>
</body>
<script>
sub.oncontextmenu = function (ev) {
// 方式一
ev.preventDefault();
console.log("sub menu click");
}
sup.oncontextmenu = function (ev) {
console.log("sup menu click");
// 方式二
return false;
}
body.oncontextmenu = function (ev) {
console.log("body menu click");
}
</script>
```
二 代码示范
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>冒泡和默认事件</title>
<style type="text/css">
.sub {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
left: 50px;
top: 50px;
}
.sup {
width: 200px;
height: 200px;
background-color: orange;
position: relative;
/*position: absolute;
top: 50px;
left: 100px;*/
margin: 50px auto;
}
body {
border: 1px solid black;
}
</style>
</head>
<body>
<div class="sup">
<div class="sub"></div>
</div>
</body>
<script type="text/javascript">
var sub = document.querySelector('.sub');
var sup = document.querySelector('.sup');
var body = document.querySelector('body');
// 冒泡: 父子级拥有同一的事件,在子级区域触发子级事件,父级也能捕获并响应
sub.onclick = function (ev) {
ev.stopPropagation();
console.log("sub click");
}
sup.onclick = function (ev) {
ev.cancelBubble = true;
console.log("sup click");
}
body.onclick = function (ev) {
// 事件的兼容
// ev = ev | event;
// 点击传过来的是 MouseEvent,存储着鼠标触发事件的一系列信息
console.log(ev);
console.log("body click");
}
// 默认事件: 鼠标右键 oncontextmenu
sub.oncontextmenu = function (ev) {
// ev.preventDefault();
console.log("sub menu click");
}
// 父级取消了默认事件,子级都被取消掉了
body.oncontextmenu = function (ev) {
console.log("body menu click");
return false;
}
</script>
</html>
