<!-- 这是关于DOM事件流 -->
<!DOCTYPE html>
<html>
<head>
<style>
#box1,#box4,#box7,#box10{
background-color: brown;
height:300px;
width:300px;
}
#box2,#box5,#box8,#box11{
background-color: aqua;
height:200px;
width:200px;
}
#box3,#box6,#box9,#box12{
background-color:blueviolet;
height:100px;
width:100px;
}
</style>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
</head>
<body>
<div id="box1">
1
<div id="box2">
2
<div id="box3">
3
</div>
</div>
</div>
</br>
<div id="box4">
4
<div id="box5">
5
<div id="box6">
6
</div>
</div>
</div>
</br>
<div id="box7">
7
<div id="box8">
8
<div id="box9">
9
</div>
</div>
</div>
</br>
<div id="box10">
10
<div id="box11">
11
<div id="box12">
12
</div>
</div>
</div>
</body>
<script>
$("#box1").click(function(){
console.log('box1');
});
$("#box2").click(function(){
console.log('box2');
});
$("#box3").click(function(){
console.log('box3');
});
// DOM0级,因为冒泡,所以box3->box2->box1
$box4 = document.getElementById("box4");
$box5 = document.getElementById("box5");
$box6 = document.getElementById("box6");
$box4.addEventListener('click',function(){
console.log('box4');
},false);
$box5.addEventListener('click',function(){
console.log('box5');
},false);
$box6.addEventListener('click',function(){
console.log('box6');
},false);
//DOM2级,设置为冒泡
$box7 = document.getElementById("box7");
$box8 = document.getElementById("box8");
$box9 = document.getElementById("box9");
$box7.addEventListener('click',function(){
console.log('box7');
},true);
$box8.addEventListener('click',function(){
console.log('box8');
},true);
$box9.addEventListener('click',function(){
console.log('box9');
},true);
//DOM2,设置为了捕获
/*从10,11,12中验证捕获玉冒泡问题*/
$box10 = document.getElementById("box10");
$box11 = document.getElementById("box11");
$box12 = document.getElementById("box12");
$box10.addEventListener('click',function(){
console.log('box10捕获');
},true);
$box11.addEventListener('click',function(){
console.log('box11捕获');
},true);
$box12.addEventListener('click',function(){
console.log('box12捕获');
},true);
$box10.addEventListener('click',function(){
console.log('box10冒泡');
},true);
$box11.addEventListener('click',function(){
console.log('box11冒泡');
},true);
$box12.addEventListener('click',function(){
console.log('box12冒泡');
},true);
$box10.onclick = function(){
console.log('box10目标');
}
$box11.click = function(){
console.log('box11目标');
}
$box12.click = function(){
console.log('box12目标');
}
//以及更换顺序去实验
</script>
</html>