冒泡事件可以查询上个随笔，
捕捉事件正好和冒泡时间正反着
所以这代码我把冒泡事件注释，
html和css的内容
<style type="text/css">
#box1{width:500px;height:500px;background:#900;}
#box2{width:400px;height:400px;background:#090;}
#box3{width:300px;height:300px;background:#009;}
#box4{width:200px;height:200px;background:#990;}
#box5{width:100px;height:100px;background:#099;}
</style>
<body>
<div id="box1">
<div id="box2">
<div id="box3">
<div id="box4">
<div id="box5">
</div>
</div>
</div>
</div>
</div>
js部分代码
1 <script>
2 window.onload=function()
3 {
4 //监听事件
5 var $=function(_id){return document.getElementById(_id);}
6 document.addEventListener("click", function(){alert("捕抓中，你点击了document")}, true);
7 document.body.addEventListener("click", function(){alert("捕抓中，你点击了body")}, true);
8 $("box1").addEventListener("click", function(){alert("捕抓中，你点击了id为："+this.id +"的div")}, true);
9 $("box2").addEventListener("click", function(){alert("捕抓中，你点击了id为："+this.id +"的div")}, true);
10 $("box3").addEventListener("click", function(){alert("捕抓中，你点击了id为："+this.id +"的div")}, true);
11 $("box4").addEventListener("click", function(){alert("捕抓中，你点击了id为："+this.id +"的div")}, true);
12 // $("box5").addEventListener("click", function(){alert("捕抓中，你点击了id为："+this.id +"的div")}, true);
13
14
15 //冒泡事件
16 // var $=function(_id){return document.getElementById(_id);}
17 // document.addEventListener("click", function(){alert("冒泡中，你点击了document")}, false);
18 // document.body.addEventListener("click", function(){alert("冒泡中，你点击了body")}, false);
19 // $("box1").addEventListener("click", function(){alert("冒泡中，你点击了id为："+this.id +"的div")}, false);
20 // $("box2").addEventListener("click", function(){alert("冒泡中，你点击了id为："+this.id +"的div")}, false);
21 // $("box3").addEventListener("click", function(){alert("冒泡中，你点击了id为："+this.id +"的div")}, false);
22 // $("box4").addEventListener("click", function(){alert("冒泡中，你点击了id为："+this.id +"的div")}, false);
23 // // $("box5").addEventListener("click", function(){alert("冒泡中，你点击了id为："+this.id +"的div")}, false);
24
25
26 //删除监听事件，必须完全一样
27 var del =function(){alert("冒泡中，你点击了id为: "+this.id +"的div")}
28 $("box5").addEventListener("click", del, false);
29 // $("box5").removeEventListener("click",del, false);
30
31
32
33 //ie用的是attachEvent() 和detachEvent() 都有两个参数 ie11也不支持了
34 // $("box5").attachEvent("onclick",del);
35 // $("box5").detachEvent("onclick",del);
36
37
38 }
39 </script>
其实捕捉监听事件和冒泡事件只是函数的一个参数不同，一个true，一个false。
其实主要有时候我们实现某些功能时，需要移除捕捉和冒泡事件。
时间： 2024-08-11 05:25:52