JavaScript事件冒泡

JavaScript的事件確實會帶着這個屬性。當程序捕獲一個事件的時候，它會知道這個事件來自於頁面上哪個元素。修改上面的程序，使用事件委託來處理點擊事件。當最頂層捕獲點擊事件時，查看事件來源於哪一層，然後只將那一層塗色。再次點擊每一層，查看實際效果。只有當前點擊的正方形變色了，其他的都毫無反應。(點擊這裏查看demo)

HTML

<div id="d1" class="white">
    <div id="d2" class="white">
        <div id="d3" class="white">
            <div id="d4" class="white"></div>
        </div>
    </div>
</div>
<button id="reset1">重置</button>

jQuery('#d1').click(function(e){
        var t = jQuery(e.target);
        var id = t.attr('id');
        if (id==='d4'){
                t.css('background-color', 'yellow');
        } else if (id==='d3') {
                t.css('background-color', 'green');
        } else if (id==='d2') {
                t.css('background-color', 'blue');
        } else {
                t.css('background-color', 'red');
        }
});

當然，如果你有這樣嵌套的頁面元素，使用了事件委託，委託到了最頂層，這時需要注意：如果其中某個元素，你不希望它的事件冒泡，那麼可以使用某種方式阻止事件的冒泡。在jQuery框架中，可以使用stopPropagation()方法來實現而不必關心瀏覽器兼容性。