事件从上往下捕获
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.father{
width: 300px;
height: 300px;
background: pink;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
.son{
width: 200px;
height: 200px;
background: palevioletred;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
text-align: center;
line-height: 200px;
}
</style>
</head>
<body>
<div class="father"son>
<div class="son">son</div>
</div>
<script type="text/javascript">
var son=document.querySelector('.son');
var father=document.querySelector('.father');
function fun_son(){
alert('son_捕获');
} function fun_father(){
alert('father_捕获');
}
father.addEventListener('click',fun_father,true);
son.addEventListener('click',fun_son,true);
</script>
</body>
</html>
事件由下往上冒泡
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.father{
width: 300px;
height: 300px;
background: pink;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
.son{
width: 200px;
height: 200px;
background: palevioletred;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
text-align: center;
line-height: 200px;
}
</style>
</head>
<body>
<div class="father"son>
<div class="son">son</div>
</div>
<script type="text/javascript">
var son=document.querySelector('.son');
var father=document.querySelector('.father');
function fun_son(){
alert('son_冒泡');
} function fun_father(){
alert('father_冒泡');
}
father.addEventListener('click',fun_father,false);
son.addEventListener('click',fun_son,false);
</script>
</body>
</html>
事件对象
