DOM事件三个阶段
<!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>
* {
padding: 0;
margin: 0;
}
.father {
float: left;
width: 300px;
height: 300px;
background-color: pink;
}
.son {
float: left;
width: 100px;
height: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="father">father
<div class="son">son
</div>
</div>
<script>
var father = document.querySelector('.father');
var son = document.querySelector('.son');
//捕获阶段 addEventListener(参数1,参数2, true);
//document->html->body->father->son
father.addEventListener('click', function () {
alert('father~');
}, true);
son.addEventListener('click', function () {
alert('son!');
}, true);
//冒泡阶段 addEventListener(参数1,参数2,false);
//son->father->body->html->document
father.addEventListener('click', function () {
alert('father~');
}, false);
son.addEventListener('click', function () {
alert('son!');
}, false);
document.addEventListener('click', function () {
alert('document@')
}, false);
//多行注释 alt+shift+A
</script>
</body>
</html>
PS:博主不定时更代码,本代码是pink老师讲解时的练习代码,希望各位友友们可以和博主一起学习!