[Day14]事件處理修飾子

2023 iThome 鐵人賽

DAY 14

自我挑戰組

從零開始Vue(View)系列第 14 篇

15th鐵人賽

yuuu

2023-09-18 20:16:56

158 瀏覽

分享至

在事件處理中，除了處理DOM事件外，還需處理額外的事件，例如DOM事件中滑鼠的點擊事件（click），額外的事件會有點左鍵還是右鍵，這樣的額外事件可以分為三種：
1.事件修飾子
2.滑鼠事件修飾子
3.按鍵修飾子

事件修飾子

常見的有：

.stop：呼叫event.stopPropagation()，用來阻止事件往上傳遞（事件冒泡）。
事件冒泡舉例來說是

<!DOCTYPE html>
    <html>
        <body>
            <div>
                <button v-on:click="add">新增</button>
            </div>
        </body>
    </html>

點擊「新增」後，觸發的順序會是＜div＞、＜body＞、＜html＞、document。

.self：只會觸發元素自己的事件，子元素的事件不會被觸發，像影印機，開啟電源後不會自動列印文件，需要再操作後才會印。
.once：指定的事件只會發生一次。
.capture：指定事件以捕獲（capturing）的形式來觸發。捕獲機制和冒泡相反，是由上往下傳遞，上面的例子觸發的順序會是document、＜html＞、＜body＞、＜div＞，簡單來說，加了.capture的事件會被先執行。

語法：v-on:DOM事件.修飾子名稱＝"方法/JavaScript單行表示式"
舉例：v-on:click.once＝"add"

滑鼠事件修飾子

.left：點擊左鍵
.right：點擊右鍵
.middle：點擊中間鍵（滑鼠滾輪）

語法：v-on:click.修飾子名稱＝方法/JavaScript單行表示式

按鍵事件修飾子

.up：鍵盤向上鍵
.down：鍵盤向下鍵
.right：鍵盤向右鍵
.left：鍵盤向左鍵
.enter：鍵盤Enter鍵
.tab：鍵盤Tab鍵
.space：鍵盤空白鍵
語法：v-on:keydown/keyup.修飾子名稱＝"方法/JavaScript單行表示式"
（keydown是按下按鍵時觸發事件；keyup則是放開按鍵時觸發事件）

明天將進行鍵盤事件的小實作以及繼續學習新的內容。