JS事件發佈和訂閱的原理

我是小白
學過nodeJS的人, 對eventEmmit這個包應該很熟悉吧…它採用的是事件發佈和訂閱模式. eventEmmit可以自定義事件名, 並跟某些特定的元素綁定. 而本文拋棄nodeJS包, 嘗試從自己的角度剖析這個神器的內在.

原生JS有一個createEvent方法, 跟createElement類似, 不過前者是用來創建自定義事件的. 如下:

// createEvent的參數最好是"event/HTMLEvents/UIEvents/MouseEvents"中的任意一個; 其他的會報錯, 導致創建事件失敗
var evt = document.createEvent("event");

/*initEvent(eventType, canBubble, cancelable): 初始化事件
 *
 *eventType: string, 事件類型, 如--"click", "clicktest"
 *canBubble: boolean, 是否允許事件冒泡?(默認值=true)
 *cancelable: boolean, 是否允許執行默認事件?(默認值=true)
 *
 */
 evt.initEvent("click", true, true); // 初始化完畢

 // 給實例化事件對象新增屬性, 用以區分默認事件對象
 evt.nameOfInstance = "instanceName";
 evt.createTime = new Date();

 // 綁定事件
 window.addEventListener("click", function(e){
     console.log(e.nameOfInstance+"---"+e.createTime);
 });

 // dispatchEvent:派發事件(===事件執行階段)
 window.dispatchEvent(evt); //如果不加, 自定義事件是不會生效的

最終console面板顯示的是: instanceName—Wed Jun 21 2017 16:47:23 GMT+0800 (中國標準時間).
點擊window後, 顯示: undefined—undefined