JavaScript事件冒泡

在一個對象上觸發某類事件（比如單擊onclick事件），如果此對象定義了此事件的處理程式，那麼此事件就會調用這個處理程式，如果沒有定義此事件處理程式或者事件傳回true，那麼這個事件會向這個對象的父級對象傳播，從裡到外，直至它被處理（父級對象所有同類事件都将被激活），或者它到達了對象層次的最頂層，即document對象（有些浏覽器是window）。

事件冒泡的作用

事件冒泡允許多個操作被集中處理（把事件處理器添加到一個父級元素上，避免把事件處理器添加到多個子級元素上），它還可以讓你在對象層的不同級别捕獲事件。

阻止事件冒泡

事件冒泡機制有時候是不需要的，需要阻止掉，通過 event.stopPropagation() 來阻止

$(function(){
    var $box1 = $('.father');
    var $box2 = $('.son');
    var $box3 = $('.grandson');
    $box1.click(function() {
        alert('father');
    });
    $box2.click(function() {
        alert('son');
    });
    $box3.click(function(event) {
        alert('grandson');
        event.stopPropagation();

    });
    $(document).click(function(event) {
        alert('grandfather');
    });
})

......

<div class="father">
    <div class="son">
        <div class="grandson"></div>
    </div>
</div>      

阻止預設行為

阻止表單送出

$('#form1').submit(function(event){
    event.preventDefault();
})      

// event.stopPropagation();
// event.preventDefault();