发布订阅模式的例子

原生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); //如果不加, 自定义事件是不会生效的

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23

最终console面板显示的是: instanceName—Wed Jun 21 2017 16:47:23 GMT+0800 (中国标准时间). 
点击window后, 显示: undefined—undefined