js dispatchEvent 的使用

dispatchEvent：dispatchEvent() 方法会向一个指定的事件目标派发一个Event,简单来说就是主动去触发一个事件，该事件可以是原有事件也可以是自定义事件。

1、dispatchEvent触发dom的点击事件（以vue项目为例子）：

<template>
    <div>
        <div ref="parent" class="Parent" @click="onClick" />
    </div>
</template>
<script>
export default {
    name:'Parent',
    mounted(){
        this.$ref.parent.dispatchEvent(new Event('click')) // 动态去触发parent节点的click事件
    },
    methods:{
        onClick(e){
             console.log(e)
        }
    }
}
</<script>

2、dispatchEvent触发自定义事件，实现vue传参：

main.vue:

import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false

window.EventTarget= new EventTarget(); // 给window上新增一个属性EventTarget值为EventTarget构造函数返回值
new Vue({
  render: h => h(App),
}).$mount('#app')

parent.vue:

<template>
    <div>
        <chi />
    </div>
</template>
<script>
import chi from"./component/chi.vue"
export default {
    name:'Parent',
    components:{chi},
    mounted(){
        EventTarget.addEventListener('up',(e)=>{
          console.log(e.detail)
        })
        EventTarget.addEventListener('up2',(e)=>{
          console.log(e.detail)
        })
    }
}
</<script>

chi.vue

<template>
  <div>
    <button @click="add">1</button>
    <button @click="add2">2</button>
  </div>
</template>
<script>
export default {
  name: "chi-dom",
  mounted() {},
  methods: {
    add() {
      EventTarget.dispatchEvent(
        new CustomEvent("up", { detail: { val: "我是参数1" } })
      );
    },
    add2() {
      EventTarget.dispatchEvent(
        new CustomEvent("up2", { detail: { val: "我是参数2" } })
      );
    },
  },
};
</script>

结果：

点击按钮1，会触发parent.vue的up事件绑定的函数，同理点击按钮2触发up2。parent 两个监听函数分别打印 事件派发时的传参。