冒泡事件可以查询上个随笔，
捕捉事件正好和冒泡时间正反着
所以这代码我把冒泡事件注释，
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。
其实主要有时候我们实现某些功能时，需要移除捕捉和冒泡事件。