自定义事件CustomEvent

我们在使用js操作dom元素时,经常会监听页面的许多事件,例如点击事件click、鼠标移动mousemovemouseout等等事件,这些事件是浏览器中预定义好的,我们直接就可以来监听这些事件。

那么,如果我想自己来定义一个事件,然后再监听我自己定义的事件怎么实现呢?

当然,这有很多种实现方式,本文主要介绍一下CustomEvent方法。关于这个方法,也可以参照MDN的相关介绍。

首先,和页面中监听事件一致,我们拿到dom元素,添加事件监听。比如,我要监听一个msg事件,可以按照下面这样写,应该很好理解,对比添加click事件,别无二致。

const element = document.body
element.addEventListener('msg', function(args) {
  console.log(args.detail);
}, false)

但是,这个msg事件并不存在呀,所以我们要创建这个msg事件,CustomEvent这时就派上用场了。

const event = new CustomEvent('msg', {
  detail: 'this is a custom event'
})

这就创建好了,但是还不能使用,我们要把创建好的这个自定义事件分发出去,使用dispatchEvent

element.dispatchEvent(event)

到这里,就创建结束了,上面的代码运行一下,可以看到打印出了this is a custom event这段文字。

结合上篇文章使用js创建类的方法,我们可以使用CustomEvent实现一个观察者订阅者模式来实现事件的监听与触发。

直接上代码

const eventEmitter = Object.assign(function() {
  if (this instanceof eventEmitter) {
    Object.assign(this, {
      __target: document.createDocumentFragment()
    }, ...arguments)
  } else {
    return new eventEmitter(...arguments)
  }
}.prototype, {
  on(type, fn) {
    console.log(this.__target);
    fn && typeof fn === 'function' && this.__target.addEventListener(type, e => fn.apply(this, e.detail), false)
  },
  emit(type, ...args) {
    const event = new CustomEvent(type, {
      detail: args
    })
    this.__target.dispatchEvent(event)
  }
}).constructor

OK,这里通过on来处理事件监听,emit向外抛出事件响应。

来执行一下

const emitter = eventEmitter()
emitter.on('build', function(name) {
  console.log('My name is ' + name);
})

emitter.emit('build', 'leevare')

控制台输出

My name is leevare

不过呢,这个方法在高贵的IE中并不支持,你可以到这里了解一下它的支持情况,所以,如果要兼容IE的话,最好不要用它了。

如果您觉得本文对您有用,欢迎捐赠或留言~
微信支付
支付宝

1条评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注