02.vue3事件处理

1.事件的基本使用

使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名；

<template>
    <p>count的值为:{{count}}</p>
      <button v-on:click="addCount">count++</button>
    <button @click="count++">行内式的写法,点击按钮count++</button>
</tempalte>

<script setup>
import {ref,reactive} from "vue"

const count=ref(0);
const addCount=()=>{
  count.value++;
}
</script>

2.事件对象

有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法

<template>
    <div class="box" @contextmenu="sum($event,100,200)">
    		<p>需求:右击当前盒子时计算传入数据的和,并阻止右击时弹出弹框的默认事件</p>
  </div>
    <!-- 事件处理程序中可以有多个方法，这些方法由逗号运算符分隔 -->
  <p><button @click="one($event),two($event)">传入多个方法</button> </p>
</tempalte>

<script setup>
import {ref,reactive} from "vue"

const sum=(e,a,b)=>{
  e.preventDefault();
  console.log(111)
  console.log(a+b);
}
const one=(e)=>{
  console.log(e);
  console.log("获取当前点击的位置:",e.clientX,e.clientY);
}
const two=(e)=>{
  console.log("我是第二个方法")
}
</script>

3.事件修饰符

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。

为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。

Vue中的事件修饰符：

 1.prevent：阻止默认事件（常用）；
 2.stop：阻止事件冒泡（常用）；
 3.once：事件只触发一次（常用）；
 4.capture：使用事件的捕获模式；
 5.self：只有event.target是当前操作的元素时才触发事件；
 6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕；

<template>
    <div>
  <p>1.阻止默认事件</p>
  <a href="http://www.baiduc.com" @click.prevent="skip">百度一下,你就知道</a>
</div>
    <div class="demo1" @click="showFather">
      <p>2.阻止冒泡</p>
        <div class="demo2" @click.stop="showSon"></div>
    </div>
  <p> 3.once事件只触发一次 <button @click="once">点击</button> </p>
  <div class="demo1" @click.capture="showFather">
      <p>4.capture使用事件的捕获模式</p>
        <div class="demo2" @click="showSon"></div>
    </div>
  <div class="demo1" @click.self="showFather">
      <p>4.self只有event.target是当前操作的元素时才触发事件</p>
        <div class="demo2" @click="showSon"></div>
  </div>
 
 <div>
 <p>5.passive：事件的默认行为立即执行，无需等待事件回调执行完毕；</p>
   <!-- 事件的默认行为立即执行，无需等待事件回调执行完毕； -->
		<ul @scroll.passive="demo" class="oul">
			<li>这是第1个li</li>
			<li>这是第2个li</li>
			<li>这是第3个li</li>
			<li>这是第4个li</li>
      <li>这是第5个li</li>
		</ul>


 </div>
</tempalte>

<script setup>
import {ref,reactive} from "vue"

const skip=()=>{
console.log("阻止跳转!");
}
const showFather=()=>{
  console.log("showFather事件");
}
const showSon=()=>{
  console.log("showSon事件");
}
const once=function(){
  console.log("只触发一次的事件");
}
// @wheel滚轮滚动事件 @scroll滚动条滚动事件
const demo=function(){
  for(let i=0;i<100000;i++){
       console.log("这是第"+i+"个");
  }
  console.log("111");
}
</script>

4.按键修饰符

在监听键盘事件时，我们经常需要检查特定的按键。Vue 允许为 v-on 或者 @ 在监听键盘事件时添加按键修饰符：

1.Vue中常用的按键别名：

 回车 => enter
 删除 => delete  (捕获“删除”和“退格”键)
 退出 => esc
 空格 => space
 换行 => tab (特殊，必须配合keydown去使用)
 上 => up
 下 => down
 左 => left
 右 => right

2.Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）

3.系统修饰键（用法特殊）：tab、ctrl、alt、shift、meta

实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。

 (1).配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
 (2).配合keydown使用：正常触发事件。

注意：在 Mac 系统键盘上，meta 对应 command 键 (⌘)。在 Windows 系统键盘 meta 对应 Windows 徽标键 (⊞)。在 Sun 操作系统键盘上，meta 对应实心宝石键 (◆)。在其他特定键盘上，尤其在 MIT 和 Lisp 机器的键盘、以及其后继产品，比如 Knight 键盘、space-cadet 键盘，meta 被标记为“META”。在 Symbolics 键盘上，meta 被标记为“META”或者“Meta”。

4.也可以使用keyCode去指定具体的按键（vue2有vue3已经舍去）

5.Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名

6. exact 修饰符:

.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。

<tempalte>
<p>
  <input type="text" @keydown.huiche="search" v-model="searchVal"  /> 
</p>

<p>
  <!-- 同时按下ctrl+c 起作用-->
 <input type="text" placeholder="按下回车提示输入" @keyup.ctrl.c="showInfo($event)"> 
</p>

<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
<button @click.ctrl="onClick">A</button>
 
<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button @click.ctrl.exact="onClick">A</button>
 
<!-- 没有任何系统修饰符被按下的时候才触发 -->
<button @click.exact="onClick">A</button>
 
</template>

<script setup>
const searchVal=ref("");
//按下enter键,搜索
const search=function(){
  window.open(`https://www.baidu.com/s?wd=${searchVal.value}`,"_blank");
}
const showInfo=function(e){
  console.log(e.keyCode);
}
const onClick=function(){
  console.log("只按下ctrl")
}

</script>