自定义事件CustomEvent

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

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

当然，这有很多种实现方式，本文主要介绍一下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的话，最好不要用它了。