iT邦幫忙

2021 iThome 鐵人賽

DAY 19
0
Modern Web

想試試寫程式的感覺,就用 JavaScript 來寫寫看網頁吧系列 第 19

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

  • 分享至 

  • xImage
  •  

事件種類

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

滑鼠事件

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

搭配事件物件

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

可以做的效果

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

鍵盤事件

  • 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>

可以做的效果

知道使用按了什麼按鈕可以做什麼呢?
通常會在使用者在 按下 enter 時,使用 keydown 事件來送出表單。
或者製作一些遊戲,利用方向鍵控制車子前進、移動。


裡面提了關於事件物件與 load 事件,這些就等後面的篇章在解釋囉~
祝大家中秋節快樂^^


上一篇
[想試試看JavaScript ] 為什麼需要這麼多種註冊事件處理的方式
下一篇
[想試試看JavaScript ] 各種事件處理 (二)
系列文
想試試寫程式的感覺,就用 JavaScript 來寫寫看網頁吧30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言