Vue.js允許我們透過在元素上使用v-on指令來攔截任何DOM事件。這個主題是使組件可以互動的關鍵。

什麼是Vue.js事件

Vue.js允許我們透過在元素上使用v-on指令來攔截任何DOM事件。

如果我們想要在這個元素上發生點擊事件時做一些事情：

<template>
 <a>點擊我！</a>
</template>

我們添加一個v-on指令：

<template>
 <a v-on:click="handleClick">點擊我！</a>
</template>

Vue還提供了一種非常便捷的替代語法：

<template>
 <a @click="handleClick">點擊我！</a>
</template>

您可以選擇使用括號或不使用括號。@click="handleClick"等效於@click="handleClick()"。

handleClick是附加到組件的方法：

<script>
export default {
 methods: {
 handleClick: function(event) {
 console.log(event)
 }
 }
}
</script>

詳細的方法在我 Vue 方法教程中有更詳盡的解釋。

你在這裡需要知道的是，你可以從事件中傳遞參數：@click="handleClick(param)"，並且它們將在方法內被接收。

存取原始事件對象

在許多情況下，您希望對事件對象執行操作或查找其中的某些屬性。您如何訪問它？

使用特殊的$event指令：

<template>
 <a @click="handleClick($event)">點擊我！</a>
</template>

<script>
export default {
 methods: {
 handleClick: function(event) {
 console.log(event)
 }
 }
}
</script>

如果你已經傳遞了一個變數：

<template>
 <a @click="handleClick('something', $event)">點擊我！</a>
</template>

<script>
export default {
 methods: {
 handleClick: function(text, event) {
 console.log(text)
 console.log(event)
 }
 }
}
</script>

從那裡你可以調用event.preventDefault()，但有一種更好的方式：事件修飾符。

事件修飾符

不要在你的方法中亂弄DOM“東西”，告訴Vue替你處理事情：

  • @click.prevent 調用event.preventDefault()

  • @click.stop 調用event.stopPropagation()

  • @click.passive 使用 addEventListener的passive選項

  • @click.capture 使用事件捕獲而不是事件冒泡

  • @click.self 確保點擊事件不是從子事件冒泡到的，而是直接在該元素上發生的

  • @click.once 事件只觸發一次

所有這些選項都可以通過在修飾符後添加另一個修飾符來組合使用。

有關事件傳播，事件冒泡/捕獲的更多信息，請參閱我的JavaScript事件指南。