Day 6

2025 iThome 鐵人賽

DAY 6

Vue.js

從零開始學習TypeScript、Vue.js !!系列第 6 篇

17th鐵人賽

jay0519

2025-09-20 12:29:03

54 瀏覽

分享至

常用的事件類型

首先建立一個名為eventType.html的檔案，並撰寫程式：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>事件類型</title>
        <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    </head>
    <body>
        <div id="Application">
            <div @click="click">點擊事件</div>
            <div @dblclick="dblclick">按兩下事件</div>
            <input @focus="focus" @blur="blur" @change="change" @select="select"/>
            <div @mousedown="mousedown">滑鼠按下</div>
            <div @mouseup="mouseup">滑鼠抬起</div>
            <div @mousemove="mousemove">滑鼠移動</div>
            <div @mouseout="mouseout" @mouseover="mouseover">滑鼠移入移出</div>
            <input @keydown="keydown" @keyup="keyup"/>
        </div>
        <script>
            const App = {
                methods: {
                    click() {
                        console.log("點擊事件")
                    },
                    dblclick() {
                        console.log("按兩下事件")
                    },
                    focus() {
                        console.log("獲取焦點")
                    },
                    blur() {
                        console.log("失去焦點")
                    },
                    change() {
                        console.log("內容改變")
                    },
                    select() {
                        console.log("文字選中")
                    },
                    mousedown() {
                        console.log("滑鼠按鍵按下")
                    },
                    mouseup() {
                        console.log("滑鼠按鍵抬起")
                    },
                    mousemove() {
                        console.log("滑鼠移動")
                    },
                    mouseout() {
                        console.log("滑鼠移出")
                    },
                    mouseover() {
                        console.log("滑鼠移入")
                    },
                    keydown() {
                        console.log("鍵盤按鍵按下")
                    },
                    keyup() {
                        console.log("鍵盤按鍵抬起")
                    }
                }
            }
            Vue.createApp(App).mount("#Application")
        </script>
    </body>
</html>