1. 原生DOM可以绑定原生DOM系统事件

2. 组件标签可以绑定系统事件（不起作用，因为属于自定义事件）------ .native （可以把自定义事件变为原生DOM事件）

3. 原生DOM绑定自定义事件 ---无意义：因为没有办法触发 $emit 函数

<!--EventTest组件-->
<template>
<div>
    <h1>EventTest组件</h1>

    <button @click="handler">原生DOM绑定原生DOM系统事件</button>

    <!--Event1组件：Event1非原生DOM节点，而绑定的click事件并非原生DOM事件，而是自定义事件
         @click.native 可以把自定义事件变为原生DOM事件，其实是给子组件的根节点绑定了点击事件----利用事件委派 -->
    <Event1 @click="handler1">非原生DOM绑定自定义事件</Event1>
    <Event1 @click.native="handler1">非原生DOM绑定原生DOM事件</Event1>

    <!--原生DOM绑定自定义事件 ---无意义：因为没有办法触发 $emit 函数-->
    <button @xxx="handler2">原生DOM绑定自定义事件</button>

    <Event2 @click="handler3" @xx="handler3">非原生DOM绑定自定义事件</Event2>
</div>
</template>
<script>
import Event1 from "@/views/EventTest/Event1.vue";
import Event2 from "@/views/EventTest/Event2.vue";
export default {
    name: "EventTest",
    components: {Event2, Event1},
    methods:{
        handler(){
            console.log('原生DOM绑定原生DOM系统事件')
        },
        handler1(){
            console.log('非原生DOM绑定原生DOM事件')
        },
        handler2(){
            console.log('原生DOM绑定自定义事件')
        },
        handler3(){
            console.log('非原生DOM绑定自定义事件')
        }
    }
}
</script>
<style scoped>
</style>

<!--Event2组件-->
<template>
  <div>
      <h2>Event2组件</h2>
      <button @click="$emit('click','自定义事件click')">分发自定义click事件</button>
      <button @click="$emit('xx','自定义事件xx')">分发自定义xx事件</button>
  </div>
</template>