[JavaScript] Bubble and capture event sample and YUI manipulation

  JavaScript當中有所謂的 addEventListener : addEventListener(event, function, capture / bubble);
  是 W3C所制定的 addEventListener, (true為 capture, false為 bubble).不過 Windows IE並沒有 capture跟 bubble的差別. 於是自己有一套增加事件的方式:  window.attachEvent("submit",myFunction()); - 而始終使用 bubble 方式.

  以一個動作對於一個物件總共會經過三個階段(stage). capture, target,以及bubble.

Check out this Pen!

  以上面例子來說明, 當我點下span裡面的字樣後:

Capture Stage: html-> body-> div->span
Target   Stage :  span
Bubble  Stage: span->div->body->html

  所以一個物件會被經過兩次, 但是只會觸發一次事件, 於是就是仰賴canCapture參數決定在何時觸發事件. 以上方例子為 click事件, 而且都是設定為 bubble階段, 所以執行順序會在bubble stage從最小到最上層元素執行.

  以第二個案例為例子, 因為 div設定在 capture stage執行, 所以他的 click會先被執行.

  順帶一提, 當我們觸發一個物件的事件後, 若不想要在往上觸發事件, 可以使用event.stopPropagation(); 停止往上傳播.

  當然也可以不用那麼複雜, 很多框架都有指派或是新增事件的方式.

  如下方例子YUI3.0的 delegate方式.其他還有很常用的 obj.on("click", function );
YUI會將物件包裝為他們的物件, 並且多出不少好用功能如果我們要再繼續擴充下去, 可以使用Y.extend() 繼續擴充.

  所謂的extends , don't hack.

Check out this Pen!