用v-on(简写@)监听DOM事件，触发事件时候执行javaScript

当绑定的是无参函数时候括号可以省略（两种效果等同）。

<template>
  <div>
    <button v-on:click="clickHandle">按钮1</button>
    <button v-on:click="clickHandle()">按钮2</button>
  </div>
</template>

<script>

  import {reactive, toRefs} from "@vue/reactivity";

export default {
  name: 'App',
  components: {
  },
  setup() {
    const state = reactive({

    })
    const clickHandle = () => {
      document.write("我是clickHandle事件");
    }
    return {
      ...toRefs(state),
      clickHandle
    }
  }
}
  </script>

  <style>

</style>

当绑定的是有参函数<script></script>中的对应的函数必须有形参与之相对应。

#下列代码执行结果为向页面输出Helloworld。

<template>
  <div>
    <button v-on:click="clickHandle('HelloWorld!')">按钮1</button>
  </div>
</template>

<script>

  import {reactive, toRefs} from "@vue/reactivity";

export default {
  name: 'App',
  components: {
  },
  setup() {
    const state = reactive({
    
    })
    const clickHandle = (e) => {
      document.write(e);
    }
    return {
      ...toRefs(state),
      clickHandle
    }
  }
}
  </script>

  <style>

</style>

同时绑定多个函数

#此时点击一次按钮，绑定的两个事件都运行。

<template>
  <div>
    <button v-on:click="clickHandle(),clickHandle1()">按钮1</button>
  </div>
</template>

<script>

  import {reactive, toRefs} from "@vue/reactivity";

export default {
  name: 'App',
  components: {
  },
  setup() {
    const state = reactive({
    })
    const clickHandle = () => {
      document.write("我是事件---------");
    }
    const clickHandle1 = () => {
      document.write("我是事件1");
    }
    return {
      ...toRefs(state),
      clickHandle,
      clickHandle1
    }
  }
}
  </script>

  <style>

</style>

把事件event作为参数传入，可以在javaScript操作DOM树

常用的几个方法

e.target	是你当前点击的元素
e.currentTarget	是你绑定事件的元素
e.currentTarget.previousElementSibling.innerHTML	获得点击元素的前一个元素
e.currentTarget.firstElementChild	获得点击元素的第一个子元素
e.currentTarget.nextElementSibling	获得点击元素的下一个元素
e.currentTarget.getElementById("string")	获得点击元素中id为string的元素
e.currentTarget.getAttributeNode('string')	获得点击元素的string属性
e.currentTarget.parentElement	获得点击元素的父级元素
e.currentTarget.previousElementSibling.firstElementChild.innerHTML	获得点击元素的前一个元素的第一个子元素的HTML值

<template>
  <div>
    <button v-on:click="clickHandle($event)">按钮1</button>
  </div>
</template>

<script>

  import {reactive, toRefs} from "@vue/reactivity";

export default {
  name: 'App',
  components: {
  },
  setup() {
    const state = reactive({
    })
    const clickHandle = (e) => {
      e.target.style.background = 'red';
    }
    return {
      ...toRefs(state),
      clickHandle,
    }
  }
}
  </script>

  <style>

</style>

 事件修饰符

<!-- 阻止单击事件继续冒泡 -->
<a @click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form @submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a @click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form @submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div @click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div @click.self="doThat">...</div>

事件的冒泡与捕获

 

 

<template>
  <div>
    <div @click="clickHandle1()">最外层div
      <div @click="clickHandle2()">中间层div
        <p @click="clickHandle3()">最内层p</p>
      </div>
    </div>
    {{message}}
  </div>
</template>

<script>

  import {reactive, toRefs} from "@vue/reactivity";

export default {
  name: 'App',
  components: {
  },
  setup() {
    const state = reactive({
      message: ''
    })
    const clickHandle1 = () => {
      state.message = state.message+'我是最外层'
    }
    const clickHandle2 = () => {
      state.message = state.message+'我是中间层'
    }
    const clickHandle3 = () => {
      state.message = state.message+'我是最内层'
    }

    return {
      ...toRefs(state),
      clickHandle1,
      clickHandle2,
      clickHandle3
    }
  }
}
  </script>

  <style>

</style>

首先是进入捕获阶段（1->2->3->4），直到达到目标元素，在进入冒泡阶段(5->6->7->8)。如果此时给div，span，p分别绑定一个时间（默认事件是冒泡触发）.

执行上述代码

如果点击最外层（点击7），仅仅执行最外层。

如果点击中间层（点击6），中间层，最外层都会被执行。

如果点击最内层（点击5），追内层，中间层，最外层都会被执行。

<template>
  <div>
    <div @click="clickHandle1()">最外层div
      <div @click.capture="clickHandle2()">中间层div
        <p @click="clickHandle3()">最内层p</p>
      </div>
    </div>
    {{message}}
  </div>
</template>

<script>

  import {reactive, toRefs} from "@vue/reactivity";

export default {
  name: 'App',
  components: {
  },
  setup() {
    const state = reactive({
      message: ''
    })
    const clickHandle1 = () => {
      state.message = state.message+'我是最外层'
    }
    const clickHandle2 = () => {
      state.message = state.message+'我是中间层'
    }
    const clickHandle3 = () => {
      state.message = state.message+'我是最内层'
    }

    return {
      ...toRefs(state),
      clickHandle1,
      clickHandle2,
      clickHandle3
    }
  }
}
  </script>

  <style>

</style>

当给中间层的事件绑定为捕获阶段获取

如果点击最外层（点击6），仅仅执行最外层。

如果点击中间层（点击3）[注意因为给中间层绑定了capture修饰符，该事件在捕获阶段处理]，

执行顺序为，（3）中间层内点击，（7）最外层被点击。

原因如下：

####首先是进入捕获阶段（1->2->3），已经达到目标元素，在进入冒泡阶段(6->7->8)。就不会再进入最内层。

如果点击最内层（点击4），追内层，中间层，最外层都会被执行。