[想試試看JavaScript ] 各種事件處理

13th鐵人賽

夯特

2021-09-19 15:39:47

2202 瀏覽

事件種類

瀏覽器的事件有非常多種，這篇介紹一些比較常見的事件
事件處理，是指程式不會馬上執行，直到觸發事件的條件之後，程式就會自動執行
也就是說，比較不同的事件就是在比較不同的觸發條件

滑鼠事件

click
滑鼠點擊時觸發。
dblclick
滑鼠「連點兩次」時觸發
mousedown / mouseup
滑鼠點下時觸發 mousedow ，放開滑鼠觸發 mouseup
mouseenter / mousemove / mouseleave
1.當滑鼠游標移入元素，會先觸發 mouseenter
2.滑鼠游標在元素移動時，會連續觸發 mousemove
3.滑鼠游標離開元素，觸發 mouseleave

搭配事件物件

滑鼠事件很常搭配事件物件中的 event.pageX 與 event.pageY 來得到目前在網頁中的座標。

可以做的效果

mousedown、mouseup、mousemove 可以做一些，點擊圖片或元素，接著拖曳他們移動的效果
click、dblclick 可以做一些可以給使用者修改的表單或表格只要雙擊滑鼠、就更改表格的內容。

鍵盤事件

keydown
按下鍵盤時會觸發
keypress
按下鍵盤時會觸發，keypress 只會針對輸出文字符號的按鈕有效。
所以ESC、方向鍵、倒退按鍵、大小寫、shift都沒有用。
keyup
放開鍵盤按鈕時觸發 keydown

如果我們對同一個元素，綁定了這三個鍵盤事件，這三個鍵盤事件觸發的順序為
keydown -> keypress -> keyup

查詢按下的按鈕

如果想知道，按下了什麼按鈕可以透過事件物件的 event.key 來查詢

下面這段程式碼可以測試看看，按下了什麼按鍵，並且顯示在主控台

<!DOCTYPE html>
<html lang="en">
<head>
    <title>鍵盤事件</title>
    <script>
        function init(){
            var btn=document.getElementById("btn");
            btn.addEventListener('keypress',function(e){
                console.log('按下 keypress');
                console.log('keypress: ',e.key);
            });
            btn.addEventListener('keydown',function(e){
                console.log('按下 keydown');
                console.log("keydown: ",e.key);
            })
            btn.addEventListener('keyup',function(e){
                console.log("觸發 keyup");
                console.log("keyup: ",e.key);
            })
        }

    </script>
</head>
<body onload="init()">// 使用 load 事件，body 載入完成執行 init 函式
    <input type="text" id="btn">
</body>
</html>