JS的事件冒泡和事件捕獲

先上結(jié)論：他們是描述事件觸發(fā)時序問題的術(shù)語。事件捕獲指的是從document到觸發(fā)事件的那個節(jié)點，即自上而下的去觸發(fā)事件。相反的，事件冒泡是自下而上的去觸發(fā)事件。綁定事件方法的第三個參數(shù)，就是控制事件觸發(fā)順序是否為事件捕獲。true,事件捕獲；false,事件冒泡。默認false,即事件冒泡。Jquery的e.stopPropagation會阻止冒泡，意思就是到我為止，我的爹和祖宗的事件就不要觸發(fā)了。

這是HTML結(jié)構(gòu)

現(xiàn)在我們給它們綁定上事件

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

結(jié)果：

child事件被觸發(fā)，child
parent事件被觸發(fā)，parent

結(jié)論：先child，然后parent。事件的觸發(fā)順序自內(nèi)向外，這就是事件冒泡。

現(xiàn)在改變第三個參數(shù)的值為true

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

結(jié)果：

parent事件被觸發(fā)，parent
child事件被觸發(fā)，child

結(jié)論：先parent,然后child。事件觸發(fā)順序變更為自外向內(nèi)，這就是事件捕獲。

貌似沒什么卵用，上一個利用事件冒泡的案例，反正我是經(jīng)常會用到。

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

需求是這樣的：鼠標放到li上對應(yīng)的li背景變灰。

利用事件冒泡實現(xiàn)：

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

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

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

是，這樣也行。而且從代碼簡潔程度上，兩者是相若仿佛的。但是，前者少了一個遍歷所有l(wèi)i節(jié)點的操作，所以在性能上肯定是更優(yōu)的。

還有就是，如果我們在綁定事件完成后，頁面又動態(tài)的加載了一些元素……

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

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

高下立判！

轉(zhuǎn)載自：http://www.cnblogs.com/qq9694526/p/5653728.html