iT邦幫忙

2024 iThome 鐵人賽

DAY 12
0
自我挑戰組

JavaScript DOM 操作系列 第 12

DAY 12: 鍵盤事件

  • 分享至 

  • xImage
  •  

大家好!今天想和大家分享我學習如何監聽鍵盤事件,像是 keydown 和 keyup。透過這些事件,我可以偵測使用者按下哪個鍵,並針對這些動作做出反應。實際上,這個功能在很多互動性網站上都很常見,像是遊戲控制或表單輸入的即時回饋。我覺得這項技能對未來應用開發很有幫助。

  1. 基本範例:keydown 事件監聽
    首先,我學習如何使用 keydown 事件。當使用者按下任何鍵時,這個事件就會觸發。

https://ithelp.ithome.com.tw/upload/images/20240926/20169384lYA19DPmGo.png

當按下鍵盤上的任何鍵時,會在控制台顯示按下的鍵。這個小功能對我來說很有趣,也能用來開發更多互動效果。

  1. keyup 事件的應用
    接著是 keyup 事件,當鍵盤按鍵被釋放時觸發。這個事件在處理輸入或計時上有不錯的應用。

https://ithelp.ithome.com.tw/upload/images/20240926/20169384Kpi34UT49o.png

這個範例在按下和釋放鍵盤時都能分別觸發不同的功能,感覺非常靈活。

  1. 進階補充:監控多個鍵
    最後,我學到可以同時監控多個按鍵,像是遊戲中的“上下左右”鍵一起使用。

https://ithelp.ithome.com.tw/upload/images/20240926/20169384XDS6ylADA4.png

這個進階功能讓我能夠處理更複雜的操作,提升互動體驗。

學習如何處理鍵盤事件,讓我對網頁的互動設計有了更深的體會,期待未來可以應用這些技巧。


上一篇
DAY 11: 滑鼠事件
下一篇
DAY 13: 事件傳遞與捕獲
系列文
JavaScript DOM 操作30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言