事件處理

月豕發表於2023-03-15

事件的基本使用

  1. 使用v-on:xxx或者@xxx繫結事件,其中xxx是事件名
  2. 事件的回撥需要配置在methods物件中,最終會在vm裡面
  3. methods中配置的函式,不要用箭頭函式 ,否則使用this指的不是vm
  4. methods中配置的函式,都是被Vue所管理的函式,this指向的是vm元件例項物件
  5. @click="demo"@click="demo($event)" 效果一樣,但後者可以傳參,例如@click="demo($event, 66)", 這裡指傳入數字66

事件修飾符

Vue中的事件修飾符

  1. prevent:阻止預設事件(常用)
<a href="https://www.baidu.com" @click.prevent="showInfo">點我</a>
//預設事件為跳轉頁面,這裡阻止了頁面跳轉
  1. stop:阻止事件冒泡(常用)

  2. once:事件只觸發一次(常用)

  3. capture:使用事件的捕獲模式

  4. self:只有event.target是當前操作的元素時,才觸發事件

  5. passive:事件的預設行為立即執行,無需等待事件回撥執行完畢

    <div id="room">
        <h3>修飾符可以鏈式呼叫。 例如: @click.prevent.stop </h3>
		
		<!-- 這裡阻止了a標籤的預設跳轉網頁事件 -->
        <a href="https://www.baidu.com" @click.prevent="showInfo">點我</a>

        <div class="demo" @click="showInfo">
            <button @click.stop="showInfo">阻止事件冒泡</button>
        </div>

        <button @click.once="showInfo">只觸發一次</button>

        <!-- 使用事件捕獲模式 -->
        <!-- 事件有捕獲階段(從外往內)和冒泡階段(從內往外) ,一般事件處理是在冒泡階段,所以點選div2時,先列印2再列印1。可以用capture使事件處理在捕獲階段,這樣就是先列印1再列印2-->
        <div class="box1" @click.capture="showMsg(1)">
            div1
            <div class="box2" @click="showMsg(2)">
                div2
            </div>
        </div>

        <!-- 只有event.target是當前操作的元素時才觸發事件 -->
        <!-- 本來點選按鈕會冒泡到div,從而觸發兩次點選事件,但是div加了self後,由於點選的是btn,所以event.target是btn而不是div,所以不會觸發div的點選事件(阻止冒泡的另一種方式)-->
        <div class="demo" @click.self="showInfo">
            <button @click="showInfo">點我</button>
        </div>

        <!-- 事件的預設行為立即執行,無需等待時間回撥執行完畢 -->

        <!-- 滾動事件分為:捲軸滾動scroll && 滑鼠滾輪滾動wheel -->
        <!-- 捲軸滾動,一旦滾動到底,就不再觸發滾動事件裡的程式碼;先捲軸滾動再觸發事件裡的程式碼 -->
        <!-- 滑鼠滾輪只要一直滾,捲軸到底了也可以繼續執行滾動事件裡的程式碼;先觸發事件裡的程式碼再滾動 -->
        <!-- 所以這裡如果使用wheel就需要最佳化,使用passive,讓程式碼立即執行,無需等待捲軸滾動 -->
        <div class="list" @wheel.passive="demo">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </div>
    </div>
    <script>
        // 建立Vue例項
        const vm = new Vue({
            el: '#room',
            data: {
                name: 'cloud'
            },
            methods: {
                showInfo(e) {
                    // e.preventDefault();// a的預設事件是跳轉頁面,這個方法可以阻止預設事件
                    //e.stopPropagation();//阻止事件冒泡
                    alert('你好')
                },
                showMsg(msg) {
                    console.log(msg)
                },
                demo() {
                    for(let i = 0; i < 10000; i++) {
                        console.log('$')
                    }
                    console.log('finish')
                }
            },
        })
    </script>

鍵盤事件

鍵盤上的每個按鍵都有自己的名稱和編碼,例如:Enter(13).Vue還對一些常用的按鍵起了別名便於使用

Vue中常用的按鍵別名

  1. enter:回車
  2. delete:刪除(捕獲delete鍵和<———鍵)
  3. esc:退出
  4. space:空格
  5. tab:換行,必須配合keydown使用
  6. up:上
  7. down:下
  8. left:左
  9. right:右

Vue未提供別名的按鍵

可以使用按鍵原始的key值去繫結,但注意要轉為kebab-case(短橫線命名)

<!-- 使用自定義鍵名 -->
 <input type="text" name="" id="" @keydown.huiche="showInfo">
 ...
 //宣告自定義鍵名
 //Vue.config.keyCodes.自定義鍵名 = 鍵碼
 Vue.config.keyCodes.huiche = 13

系統修飾符(特殊)

例如ctrl、alt、shift、meta(win鍵)等都是系統修飾符

  1. 配合keyup使用:按下修飾鍵的特殊,再按下其他鍵,隨後釋放其他鍵,事件才被觸發
  2. 配合keydown使用:正常觸發事件
<div id="room">
        <h1>
            Hello, {{name}}
        </h1>
        <h3>keyup:按下後鬆手才觸發</h3>
        <h3>keydown:按下後就觸發</h3>
        <input type="text" placeholder="按下回車提示輸入" @keyup="showInfo">


        <h3>自定義鍵名</h3>
        <input type="text" name="" id="" @keydown.huiche="showInfo">


        <h3>按下tab</h3>
        <!-- tab只適合跟keydown配合使用,因為tab一按下,焦點就會離開輸入框,而事件的物件又是這個輸入框,所以如果用up則無法觸發事件</br> -->
        <input type="text" @keyup.tab="showInfo">


        <!-- 系統修飾鍵指定某個按鍵配合使用,例如ctrl+y才觸發事件 -->
        <input type="text" name="" id="" @keyup.ctrl.y="showInfo">
    
</div>

 <script>
       //自定義鍵名
        Vue.config.keyCodes.huiche = 13
        
		const vm = new Vue({
            el: '#room',
            data: {
                name: 'cloud'
            },
            methods: {
                showInfo(e) {
                    // if (e.keyCode !== 97) return
                    console.log(e.keyCode)
                }
            }
        })
</script>

相關文章