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。

其实主要有时候我们实现某些功能时，需要移除捕捉和冒泡事件。