发布订阅模式的例子

原生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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值