事件和键盘鼠标的修饰符

一：事件处理
解决点
1.绑定事件
2.事件传参
3.保证事件的event不丢

<template>
    <div >
        欢迎来到上海
    </div>
    <button @click="showInfo">点击提示信息</button>
    <button @click="showInfo1(66)">点击提示信息</button>
    <!-- 传参时会将事件的event弄丢，所以采取如下方法 -->
    <button @click="showInfo2(66,$event)">点击提示信息</button>


</template>
<script setup>
    const showInfo=()=>{
        alert('welcome to shanghai')
        
    }
    const showInfo1=(id)=>{
        alert('welcome to shanghai')
        console.log(id);
    }
    const showInfo2=(id,e)=>{
        alert('welcome to shanghai')
        console.log(id,e);
    }
    
</script>

二：事件的修饰符

1.prevent
2.stop
3.once
4.capture
5.self
6.passive

<template>
    <div >
        欢迎来到上海
    </div>
    <!-- 阻止默认事件 -->
   <a href="http://www.baidu.com" @click.prevent="showInfo">点击跳转</a>
    <!-- 阻止事件冒泡,事件冒泡：点击button触发事件之后，会自动触发div上的事件 -->
    <div class="demo1" @click="showInfo">
        <button @click.stop="showInfo">阻止冒泡</button>
    </div>
    <!-- 事件只触发一次 -->
    <button @click.once="showInfo">组织冒泡</button>
    <!-- 事件捕获模式 ，事件的处理是在事件冒泡阶段，而事件捕获（顺序div1->div2）之后，才进行事件冒泡(div2->div1)-->
    <!-- 因为先捕获再冒泡，要想在捕获时期处理div1，加上caputer -->
    <div class="div1" @click.capture="showInfo1(1)">
        div1
        <div class="div2" @click="showInfo2(2)">
            div2
        </div>
    </div>
    <!-- 只有event.target是当前操作的元素才触发事件 ,其实也可以阻止冒泡-->
     <div class="demo1" @click.self="showInfo">
        <button @click="showInfo">组织冒泡</button>
    </div>
    <!-- 事件的默认行为立即执行，无需等待事件的回调执行结束 -->
    <!-- 如果是鼠标滑轮（wheel）控制，则需要用passive来使得不需要等待回调结束，滚动条才有效果出现， -->
    <!-- 如果是scroll拖动滚动条则不需要等事件回调结束才会出现滚动条变化 -->
    <!-- 移动端使用passive多一点，pc端很少使用 -->
    <ul class="list" @wheel.passive="showcompute">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</template>
<script setup>
const showInfo=()=>{
    alert('阻止默认行为=》跳转')
}
const showInfo1=(id)=>{
    
    console.log(id);
}
const showInfo2=(id)=>{
    
    console.log(id);
}
const showcompute=()=>{
    for(let i=0;i<10000;i++){
         console.log(i);
    }
}


</script>
<style>
*{
    margin-bottom: 20px;
}
.demo1{
    width: 100%;
    height: 50px;
    background-color: aqua;
}
.list{
    width: 100%;
    height: 100px;
    overflow: auto;
    background-color: bisque;
}
.list li{
    width: 100%;
    height: 50px;
}
</style>

三：键盘按键的修饰符
.enter
.tab
.delete (捕获“Delete”和“Backspace”两个按键)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta
注意：在 Mac 键盘上，meta 是 Command 键 (⌘)。在 Windows 键盘上，meta 键是 Windows 键 (⊞)。在 Sun 微机系统键盘上，meta 是钻石键 (◆)。在某些键盘上，特别是 MIT 和 Lisp 机器的键盘及其后代版本的键盘，如 Knight 键盘，space-cadet 键盘，meta 都被标记为“META”。在 Symbolics 键盘上，meta 也被标识为“META”或“Meta”。

四：鼠标的修饰符
.left
.right
.middle