事件修饰符

事件修饰符是一种语法糖，用于修改或增强 DOM 事件的行为。它们以 "." 的形式附加在事件指令后面。

1、.prevent（阻止默认事件）

<template>
  <!-- 阻止默认事件 --> 
  <a :[value]="url" @click.prevent='clickMe'>点我跳转</a>
</template>

<script>
export default {
  data() {
    return {
      value:'href',
      url: 'http://www.baidu.com'
    }
  },
  methods: {
      clickMe(){
        alert("页面即将跳转");
      }
  }
}
</script>

结果展示：

没加 .prevent 修饰符修饰符

加了 .prevent 修饰符

总结：

• @click.prevent 是一个事件修饰符，它调用了 event.preventDefault() 方法。
• event.preventDefault() 是原生 JavaScript 中的方法，用于阻止事件的默认行为。在上面示例中，如果语法中没加事件修饰符，弹窗结束后页面会继续跳转到指定地址，但是加了 .prevent 修饰符，跳转这个默认行为将被阻止。

---

2、.stop（阻止事件冒泡）

<template>
  <div class="demo"  @click="handleParentClick">
    <!-- 子元素上的点击事件不会冒泡到父元素 --> 
    <button @click.stop="handleButtonClick">clickMe</button>
  </div>

</template>

<script>
export default {
  data() {
    return {
    }
  },
  methods: {
    handleParentClick(){
        alert("Parent clicked");
      },
    handleButtonClick(){
        alert("Button clicked");
      }
  }
}
</script>

<style scoped>
  .demo{
    width: 100%;
    height: 50px;
    background: cadetblue;
  }
</style>

结果展示：

没加 .stop 修饰符

加了 .stop 修饰符

总结：

• 在上面示例中，当你点击按钮时，只有 handleButtonClick 方法会被调用，而 handleParentClick 方法不会被调用，因为 .stop 修饰符调用了 event.stopPropagation() 方法，阻止了点击事件冒泡到父元素 <div> 上。

---

3、.once（事件只触发一次）

<template>
    <!--点击事件只会触发一次 --> 
    <button @click.once="handleButtonClick">clickMe</button>
</template>

<script>
export default {
  data() {
    return {
    }
  },
  methods: {
    handleButtonClick(){
        alert("Button clicked");
      }
  }
}
</script>

总结：

• 在上面的示例中，当用户点击按钮时， handleButtonClick 方法会被调用，并且由于使用了 .once 修饰符，该方法只会被调用一次。即使用户多次点击按钮，也不会再有任何响应。

---

4、.capture（事件捕获模式）

<template>  
  <div @click.capture="handleOuterClick">  
    <button @click="handleButtonClick">点击我</button>  
  </div>  
</template>  
  
<script>  
export default {  
  methods: {  
    handleOuterClick() {  
      console.log('外层元素被点击');  
    },  
    handleButtonClick() {  
      console.log('按钮被点击');  
    }  
  }  
}  
</script>

结果展示：

没加 .capture 修饰符

加了 .capture 修饰符

总结：

• 在上面的例子中，当用户点击按钮时，由于外层<div>元素使用了 .capture 修饰符， handleOuterClick 方法会首先被调用，输出“外层元素被点击”。然后，事件会继续冒泡到按钮元素，触发 handleButtonClick 方法，输出 “按钮被点击”。
• 需要注意的是，如果有多个元素使用了 .capture 修饰符，并且这些元素是嵌套的，那么事件会按照它们在 DOM 树中的顺序从外到内依次触发。

---

5、.self（当事件在该元素本身触发时触发回调）

<template>  
  <div class="parent" @click.self="handleClick">  
    <button @click="handleClick">点击我</button>  
  </div>  
</template>  
  
<script>  
export default {  
  methods: {  
    handleClick(e) {  
      console.log(e.target);  
    }
} 
} 
</script>

<style scoped>
  .parent {
    width: 200px;
    height: 100px;
    background-color: rgb(0, 225, 255);
  }
</style>

结果展示：

没加 .self 修饰符

加了 .self 修饰符

总结：

• .self 和 .stop 有相似的效果，都能实现阻止事件冒泡。当用户点击 <button> ，因为 .self 修饰符的作用， <div> 上的 handleClick 不会被触发。只有绑定在 <button> 上的 @click 事件监听器会触发 handleClick 方法。因此， handleClick 方法只会被调用一次。

---

6、.passive （立即执行滚动默认行为）

<template>
   <!--鼠标滚轮监听 --> 
  <ul @wheel.passive = "handleScroll" class="list">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
  </ul>
</template>

<script>
export default {
  methods: {
    handleScroll() {
       for (let i = 0; i < 100000; i++) {
        console.log("@");
      }
    }
  }
}
</script>

<style scoped>
.list {
  width: 200px;
  height: 200px;
  overflow: auto;
  background-color: peru;
}
li{
  height: 100px;
}
</style>

结果展示：

使用小技巧：@click.prevent.stop 阻止默认事件后并阻止事件冒泡。

总结：

• .passive 修饰符的作用是告诉浏览器，这个事件监听器不会调用 event.preventDefault() 来阻止事件的默认行为(滚动条滑动)。然而，上面示例中并不会影响事件处理器中其他代码的执行时间。因此，即使使用了 .passive 修饰符，handleScroll 方法中的循环仍然会执行，并可能阻塞UI线程，影响用户体验。

---

按键修饰符

按键修饰符用于监听键盘事件，Vue 提供了一系列内置的按键修饰符。

1、内置按键修饰符别名

• .enter ： 监听回车键（Enter）
• .tab ：监听 Tab 键 （特殊，必须配合 keydown 使用）
• .delete ： 监听删除键（删除Delete或退格键Backspace）
• .esc ： 监听 Esc 键
• .space ： 监听空格键
• .up ：监听上箭头键
• .down ：监听下箭头键
• .left ： 监听左箭头键
• .right ：监听右箭头键

下面是按键修饰符语法示例：

<template>
  <input @keydown.enter="handleEnterKey">
</template>

<script>
export default {
  methods: {
    handleEnterKey() {
      console.log("回车键被按下了！");
    }
  }
}
</script>

总结：

• 按键修饰符只能在绑定键盘事件时使用，例如 @keydown 、@keyup 等，而不能在绑定鼠标事件等其他类型事件时使用。
• 如果要使用 Vue 未提供别名的按键，可以使用按键原始的 key 值去绑定，注意开头所有大写需要改成小写，遇到如 PageUp 或 PageDown 这种驼峰按键，必须转为 kebab-case 形式命名。如 @keydown.page-up 等。

---

2、系统按键修饰符

• .ctrl ： 监听 Control 键（Ctrl）
• .alt ： 监听 Alt 键
• .shift ： 监听 Shift 键
• .meta ：监听 Meta 键（通常是 Command 键或 Windows 键）

下面是系统按键修饰符示例：

<template>
  <div>
    <input @keydown.ctrl="handleCtrlKey">
    <input @keydown.alt="handleAltKey">
    <input @keydown.shift="handleShiftKey">
    <input @keydown.meta="handleMetaKey">
  </div>
</template>

<script>
export default {
  methods: {
    handleCtrlKey() {
      console.log("按下了 Ctrl 键");
    },
    handleAltKey() {
      console.log("按下了 Alt 键");
    },
    handleShiftKey() {
      console.log("按下了 Shift 键");
    },
    handleMetaKey() {
      console.log("按下了 Meta 键");
    }
  }
}
</script>

使用小技巧： @keyup.ctrl.y 限制只有按下 ctrl 键和 Y 键的情况下才触发事件。

总结：

• 系统按键修饰符配合 @keydown 使用正常触发，但是配合 @keyup 使用需要按下修饰键的同时，再按下其他键，随后释放其他键，事件才会触发。

---