Event

链接 DOM 所有事件总览

DOM 事件通过 addEventListener 添加
默认是冒泡 通过第三个参数bool控制
先捕获 后冒泡

div.addEventListener('click',fn[,true])
默认
div.addEventListener('click',(e)=>{
  console.log(e)
  e 只在事件阶段存在，事件结束就消失
})

e.target vs e.currentTarget
e.target 是点击的那个元素
div > span{文字}，用户点击文字
e.target 是span
e.currentTarget 是 div

e.stopPropagation() 可用来阻止默认冒泡

自定义DOM Event

// 添加一个适当的事件监听器
obj.addEventListener("cat", function(e) { process(e.detail) })
// 创建并分发事件
var event = new CustomEvent("cat", {"detail":{"hazcheeseburger":true}})
obj.dispatchEvent(event)

<template>
  <div class="popover" @click.stop="xxx">
    // 事件 + stop可以阻止事件冒泡传递
    <div class="content-wrapper" v-if="visible" @click.stop>
      <slot name="content"></slot>
    </div>
    <slot></slot>
  </div>
</template>
methods: {
  xxx() {
    this.visible = !this.visible;
    if (this.visible === true) {
      this.$nextTick(() => {
        //直接修改 visible===true 会导致无法显示，需要nexttick/settimeout等待执行后
        // function xxx(){}.bind(this) 和 箭头函数()=>{}  相等 但是返回一个新的函数
        function xxx(){
          this.visible = false
          document.removeEventListener('click', eventHandler)
        }.bind(this)
        let eventHandler = () => {
          this.visible = false
          console.log('document 隐藏 popover')
          document.removeEventListener('click', eventHandler)
        }
        document.addEventListener('click', eventHandler)
      })
    }else{
      console.log('vm 隐藏 popover')
    }
  }
  }
监听document.body身上的事件有时候不一定能点击到 ，body大小不固定
选择监听document
//document.addEventListener('click', eventHandler)