16-0 js

const App = {
  data() {
    return {
      text: '小明',
    }
  },
  methods: {
    trigger: function(name) {
      console.log(name, '此事件被觸發了')
    }
  }
};
Vue.createApp(App).mount('#app');

16-1 按鍵修飾符
keyAlias - 只當事件是從特定鍵觸發時才觸發。
別名修飾 - .enter, .tab, .delete, .esc, .space, .up, .down, .left, .right
修飾符來實現僅在按下相應按鍵時才觸發鼠標或鍵盤事件的監聽器 - .ctrl, .alt, .shift, .meta

• 別名修飾

  <!-- 指定特定按鍵觸發 -->
  <input type="text" class="form-control" v-model="text" @keyup.enter="trigger('enter')">

• 相應按鍵時才觸發的監聽器

<input type="text" class="form-control" v-model="text" @keyup.shift.enter="trigger('shift + Enter')">

• 特定鍵

  <input type="text" class="form-control" v-model="text" @keyup.h="trigger('h')">

16-2 滑鼠修飾符
.left 只當點擊鼠標左鍵時觸發。
.right 只當點擊鼠標右鍵時觸發。
.middle 只當點擊鼠標中鍵時觸發。

    <!-- 未設定前滑鼠按哪個鍵都會觸發事件 -->
    <span class="box" @click.right="trigger('right button')">
    </span>

16-3 事件修飾符
.stop - 調用 event.stopPropagation()。
.prevent - 調用 event.preventDefault()。
.capture - 添加事件偵聽器時使用 capture 模式。
.self - 只當事件是從偵聽器綁定的元素本身觸發時才觸發回調。
.once - 只觸發一次回調。

  <!-- 防止預設事件，如跳開畫面(重新整理)，直接產生新視窗 -->
  <a href="#" @click.prevent="trigger('prevent')">加入 Prevent</a>

16-4 預設情境:冒泡事件

<!-- 點選最裡面按鍵後產生事件順序button->box->div 由內而外，監聽多元素或按鍵產生冒泡事件，阻止冒泡事件需使用stop、capture、self、once-->
  <div class="p-3 bg-primary" @click="trigger('div')">
    <span class="box d-flex align-items-center justify-content-center" @click="trigger('box')">
      <button class="btn btn-outline-secondary" @click="trigger('button')">按我</button>
    </span>
  </div>

16-4-1 stopPropagation (防止向外尋找)

 <!-- 僅不會觸發div區塊 -->
  <div class="p-3 bg-primary" @click="trigger('div')">
    <span class="box d-flex align-items-center justify-content-center" @click.stop="trigger('box')">
      <button class="btn btn-outline-secondary" @click="trigger('button')">按我</button>
    </span>
  </div>

16-4-2 事件偵聽器時使用 capture 模式 (事件改為由外而內)

  <!-- 點按鍵後產生事件為div->box->button -->
  <div class="p-3 bg-primary" @click.capture="trigger('div')">
    <span class="box d-flex align-items-center justify-content-center" @click.capture="trigger('box')">
      <button class="btn btn-outline-secondary" @click.capture="trigger('button')">按我</button>
    </span>
  </div>

16-4-3 事件偵聽器時使用 self 模式 (只會觸發自己範圍內的)

  <div class="p-3 bg-primary" @click.self="trigger('div')">
    <span class="box d-flex align-items-center justify-content-center" @click.self="trigger('box')">
      <button class="btn btn-outline-secondary" @click.self="trigger('button')">按我</button>
    </span>
  </div>

16-4-4 事件偵聽器只觸發一次 once

  <div class="p-3 bg-primary" @click.once="trigger('div')">
    <span class="box d-flex align-items-center justify-content-center" @click.once="trigger('box')">
      <button class="btn btn-outline-secondary" @click.once="trigger('button')">按我</button>
    </span>
  </div>

冒泡事件說明

.
知識點來源:六角課程

以上是今天所提供知識點如有誤，再請務必在下面留言~