js自定义事件—CustomEvent

CustomEvent()

创建自定义事件

const event = new CustomEvent(type[,eventInitDict])

• type：事件的类型名称.
• eventInitDict：

canBubble：一个布尔值,表明该事件是否会冒泡.
cancelable：一个布尔值,表明该事件是否可以被取消.
detail：当事件初始化时传递的数据.

示例：

比如storage事件：

默认的storage事件，只能在同源的两个页面之间能使用，比如页面A注册了storage事件，页面B设置值，A页面就能监听到B页面的设置。

比如两个同原页面 a、b。在 a 页面监听 storage 事件，在 b 页面通过 localstorage 设置缓存数据的时候，会触发 a 页面的监听；

window.addEventListener('storage',function(e){
  console.log(e)
},false)

如果要在同一个页面生效的话，可以使用自定义事件实现。

本质就是对原有的localStorage.setItem方法进行增强。

var orignalSetItem = localStorage.setItem
localStorage.setItem = function(key, newValue) {
  var setItemEvent = new CustomEvent('setItemEvent', {
    detail: {
      val: newValue
    }
  })
  window.dispatchEvent(setItemEvent)
  orignalSetItem.apply(this, arguments)
}
window.addEventListener('setItemEvent', function(e) {
  console.log(e.detail.val)
})

通过上面的代码实现，就能在每次设置的时候触发自定义的方法。

CustomEvent可以使用Event对象替换。这两个api是不是重复了呢？？？

不过Event没有detail选项

var orignalSetItem = localStorage.setItem
localStorage.setItem = function(key, newValue) {
  var setItemEvent = new Event('setItemEvent')
  // 自定义一个属性val挂载在对象上
    setItemEvent.val = newValue
  window.dispatchEvent(setItemEvent)
  orignalSetItem.apply(this, arguments)
}
window.addEventListener('setItemEvent', function(e) {
  // 通过自定义val获取
  console.log(e.val)
})