徹底弄懂JS的事件冒泡和事件捕獲

標籤：實現   pre   滑鼠   簡潔   cells   word   dex   bubble   blog   

 

先上結論：在事件執行流中有兩種執行方式。一種是事件冒泡(即事件的執行順序是從下往上執行的) ;  另一種是捕獲(即事件的執行順序是從上往下執行的);

            阻止事件冒泡:   return false;  Firefox/ie都支援      

            function(even){

                 var ev=even||window.even;

              

                   if(ev&&ev.stopPropagation){

                             ev.stopPropagation();

                             }else{

                              window.event.cancelBubble=true;

                        }

    

    } 

             

這是HTML結構

123	<div id="parent">　　<div id="child" class="child"></div></div>

現在我們給它們綁定上事件

            document.getElementById("parent").addEventListener("click",function(e){                alert("parent事件被觸發，"+this.id);            })            document.getElementById("child").addEventListener("click",function(e){                alert("child事件被觸發，"+this.id)            })

結果：

child事件被觸發，childparent事件被觸發，parent

結論：先child，然後parent。事件的觸發順序自內向外，這就是事件冒泡。

現在改變第三個參數的值為true

　　　　　　　document.getElementById("parent").addEventListener("click",function(e){                alert("parent事件被觸發，"+e.target.id);            },true)            document.getElementById("child").addEventListener("click",function(e){                alert("child事件被觸發，"+e.target.id)            },true)

結果：

parent事件被觸發，parentchild事件被觸發，child

結論：先parent,然後child。事件觸發順序變更為自外向內，這就是事件捕獲。

貌似沒什麼卵用，上一個利用事件冒泡的案例，反正我是經常會用到。

　　　　<ul>            <li>item1</li>            <li>item2</li>            <li>item3</li>            <li>item4</li>            <li>item5</li>            <li>item6</li>        </ul>

需求是這樣的：滑鼠放到li上對應的li背景變灰。

利用事件冒泡原理實現事件委託/事件代碼：

          事件代理解決兩個問題:

                              1:減少對後代元素的遍曆操作

                              2:後期動態產生的後代元素也可以使用綁定的事件

　　　　　　　$("ul").on("mouseover",function(e){//給目標元素的祖先元素繫結事件                $(e.target).css("background-color","#ddd").siblings().css("background-color","white");            })

也許有人會說，我們直接給所有li都綁上事件也可以啊，一點也不麻煩，只要……

　　　　　　　$("li").on("mouseover",function(){                $(this).css("background-color","#ddd").siblings().css("background-color","white");            })

是，這樣也行。而且從代碼簡潔程度上，兩者是相若彷彿的。但是，前者少了一個遍曆所有li節點的操作，所以在效能上肯定是更優的。

還有就是，如果我們在綁定事件完成後，頁面又動態載入了一些元素……

$("<li>item7</li>").appendTo("ul");

這時候，第二種方案，由於綁定事件的時候item7還不存在，所以為了效果，我們還要給它再綁定一次事件。而利用冒泡方案由於是給ul綁的事件……

高下立判！

 

徹底弄懂JS的事件冒泡和事件捕獲