js 事件冒泡

一個頁面中的多個dom若是呈現父子類關係，而且都綁定了事件，則會有事件冒泡的狀況發生，例如：

<div onclick="alert('3');">
    <div onclick="alert('2');">
         <a id ="xx" href="#" onclick="alert('1');"> 測試冒泡 </a>
    </div>
</div>

上面這段代碼一共有三個事件：alert(3)，alert(2)，alert(1),都分別綁定了單擊事件。當咱們點擊「測試冒泡」這個a標籤時，會連續彈出3個提示框。這就是事件冒泡引發的現象。事件冒泡的過程是：alert(1) --> alert(2) --> alert(3) 。

若是須要阻止事件冒泡，能夠爲div添加「阻止事件冒泡」：

     document.getElementById("xx").addEventListener("click",
        function(event) {
                event.stopPropagation();
        },
        false);