首页 > 代码库 > js的捕捉事件，冒泡事件
js的捕捉事件，冒泡事件
冒泡事件可以查询上个随笔，
捕捉事件正好和冒泡时间正反着
所以这代码我把冒泡事件注释，
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。
其实主要有时候我们实现某些功能时，需要移除捕捉和冒泡事件。
js的捕捉事件，冒泡事件
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。