事件处理

内联事件处理器：

<button @click="num++">点击</button>

let num = ref(1)

---

方法事件处理器：

<button @click="btnclick">点击</button>

let num = ref(1)

const btnclick = () => {
  num.value++
}

默认传入 event 参数：

<button @click="btnclick">点击</button>

const btnclick = (e) => {
  console.log(e)
}

如果想传多参数，event参数要写 $event：

<button @click="btnclick('Andy',$event)">点击</button>

const btnclick = (name, e) => {
  console.log(name)
  console.log(e)
}

---

鼠标按键修饰符：

<div class="red" @click.left="redLeftClick" @click.right="redRightClick" @click.middle="redMiddleClick">
  <div class="blue" @click.left="blueLeftClick" @click.right="blueRightClick" @click.middle="blueMiddleClick"></div>
</div>

const redLeftClick = () => {
  console.log('redLeftClick')
}
const blueLeftClick = () => {
  console.log('blueLeftClick')
}
const redRightClick = () => {
  console.log('redRightClick')
}
const blueRightClick = () => {
  console.log('blueRightClick')
}
const redMiddleClick = () => {
  console.log('redMiddleClick')
}
const blueMiddleClick = () => {
  console.log('blueMiddleClick')
}

遵循冒泡原则

---

事件修饰符：

.stop

//阻止冒泡，执行到 blueClick 就结束了

  <div class="red" @click="redClick">
    <div class="blue" @click.stop="blueClick"></div>
  </div>

.self

//当前元素本身被点击事件时才执行

  <div class="red" @click.self="redClick">
    <div class="blue" @click="blueClick"></div>
  </div>

.once

//当前元素只被调用一次，listener 会在被调用之后移除

  <div class="red" @click="redClick">
    <div class="blue" @click.once="blueClick"></div>
  </div>

.capture

//事件捕获，先捕获再冒泡，先执行redClick，再执行blueClick

  <div class="red">
    <div class="blue" @click="blueClick" @click.capture="redClick"></div>
  </div>

---

键盘按键修饰符：

<input @keydown="btnclick" @keyup="btnclick" />

const btnclick = (e) => {
  console.log(e)
}