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