一：事件處理
解決點
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