JS裏，事件的幾個細節問題--(冒泡、自定義事件)

今天想實現一個事件自動訂閱到指定class的元素之上的功能。這句話很拗口，稍後解釋！

在翻閱了MDN上api說明，多明白了許多細節。

一、event除了具備目標元素，事件類型，時間，位置等有效值 外，還有 bubbles  cancelable

等 與冒泡相關的屬性。在查找事件的來源元素時，chrome有 srcElement  屬性，  火狐卻沒有 srcElement  屬性，必須用target。 srcElement返回的是一個Element對象，可是target返回一個Node。 不過編程時，好像是互用的。

二、event具備preventDefault   stopImmediatePropagation  stopPropagation 這三個方法。

區別就是：preventDefault:當事件有cancelable=true時，  事件就取消了

stopPropagation :事件中止向DOM的上級傳播。

stopImmediatePropagation:   在當前事件執行的函數中，當即中止傳播。（即便當前元素還綁定着其它的函數，函數本應該稍後執行的狀況， 後面的函數都會不執行，好霸氣的方法） 

三、用CustomEvent來實現自定義事件。

假設讓el來接收一個blockClicked事件，寫法以下：

//首先
el.addEventListener("blockClicked", handler, false);

//在以後的時間，你進行其它操做時，主動生成一個事件，並推送給el。
var bubble = doc.dispatchEvent(
       new CustomEvent("blockClicked", {detail: {data:'一些事件有用的信息'}})
);

注意：通過個人測試，dispatchEvent 時，並非將事件推入消息隊列，而是同步執行！

執行順序：

1.    執行 var result=  dispatchEvent（new CustomEvent(）)
2.    進入事件處理函數中去，再返回執行結果到result。
3.    再執行dispatchEvent的一下語句。

這樣就有機會根據上次事件結果，來決定是否終止事件鏈！

四、dispatchEvent的返回值是boolean

 若是事件cancelable=true,且至少有一個事件處理函數調用了Event.preventDefault()的話，返回false。事件終止傳播

其它時候都返回true，事件繼續傳播下去。

ev = new CustomEvent(eventName, {
      detail: target,  cancelable: true
      });
result = el.dispatchEvent(ev)   //在處理函數裏，來決定result的值

五、IE11不支持new CustomEvent()方法。  window對象上存在CustomEvent，但就是不讓用。必須用：

var event = document.createEvent('CustomEvent');
  event.initCustomEvent('my-event', true, true, {some: '一些有用的信息'});

代替。