Event Bubbling

什麼是bubbling？

HTML DOM events讓JavaScript可以對指定的DOM element註冊(register)一些不同的event handlers，而Event bubbling是HTML DOM API中的事件傳播(event propagation)的方式之一。

有些DOM elements是可以有巢狀(nested)的結構，例如：
<div onclick="alert('clicked First');">First                    // 最外層
  <div onclick="alert('clicked Second');">Second
    <div onclick="alert('clicked Third');">Third</div>    // 最裡層
  </div>
</div>

Bubbling事件傳播的方式是從事件發生的地方一層層的向最外層傳遞 例如下面的例子（可以用滑鼠點點看）：

First

Second

Third

當你點下（也就是觸發onclick事件）最裡面那一層時，會彈出clicked Third的字串，然後再彈出clicked Second的字串，然後再彈出clicked First的字串。

停止bubbling

有時候會想要停止bubbling傳遞事件的方式，可以透過以下的方式來停止，
event.stopPropagation();
或是
event.cancelBubble = true; // IE<9
例如下面的例子（可以用滑鼠點點看）：

First

Second

Third