Vue 中的事件對象

Vue.js 中的事件對象是一個特殊的對象，它包含與事件相關的各種屬性和方法。當一個元素觸發事件時，Vue 將創建一個事件對象并將其傳遞給事件處理程序。

事件對象屬性

以下是一些常見的事件對象屬性：

type：觸發事件的類型，例如 “click” 或 “keyup”。

target：觸發事件的元素。

currentTarget：當前正在處理事件的元素。

event：原始瀏覽器事件對象。

detail：自定義事件數據。

事件對象方法

事件對象還提供了以下方法：

preventDefault()：阻止默認瀏覽器行為。

stopPropagation()：阻止事件冒泡到祖先元素。

stopImmediatePropagation()：立即停止事件冒泡和傳播。

使用事件對象

為了在 Vue 中使用事件對象，您可以在事件處理程序函數中訪問它。例如：

<code><button>點擊我</button>

<script>
export default {
  methods: {
    handleClick(event) {
      console.log(event.type); // "click"
      console.log(event.target); // HTMLButtonElement
      event.preventDefault();
    }
  }
}
</script></code>

在上面的示例中， 函數提供了一個事件對象作為其參數。您可以使用此對象訪問事件的類型、目標元素等信息。

自定義事件數據

您可以通過 屬性向自定義事件傳遞數據。例如：

<code><my-component><button>觸發事件</button>
</my-component><script>
export default {
  methods: {
    emitEvent() {
      this.$emit('custom-event', { message: '你好，世界！' });
    },
    handleEvent(event) {
      console.log(event.detail.message); // "你好，世界！"
    }
  }
}
</script></code>

這允許您將任意數據與事件一起傳播和接收。