iT邦幫忙

2024 iThome 鐵人賽

DAY 11
0
自我挑戰組

JavaScript DOM 操作系列 第 11

DAY 11: 滑鼠事件

  • 分享至 

  • xImage
  •  

大家好!今天想跟大家分享我學習到的滑鼠事件,像是 mouseover 和 mouseout,這些事件可以讓網頁更具互動性。在學習的過程中,我發現這些事件對於改善使用者體驗非常有幫助,特別是在動態網頁設計中。接下來讓我來介紹幾個範例:

  1. 滑鼠移入事件 (mouseover)
    這個事件會在滑鼠移到指定元素上時觸發。

https://ithelp.ithome.com.tw/upload/images/20240925/20169384tUMlGE7m0U.png

當滑鼠移到這個 box 元素上時,背景顏色會變成淺藍色,效果看起來很不錯。

  1. 滑鼠移出事件 (mouseout)
    這個事件會在滑鼠離開元素時觸發。

https://ithelp.ithome.com.tw/upload/images/20240925/20169384Q2fMB9dyhJ.png

當滑鼠離開 box 元素時,背景顏色會恢復成白色,這樣使用者就能清楚地感受到互動效果。

  1. 補充範例:滑鼠點擊事件 (click)
    除了 mouseover 和 mouseout,我還學到 click 事件也很常用,當使用者點擊元素時會觸發。

https://ithelp.ithome.com.tw/upload/images/20240925/20169384OcerONAIbi.png

點擊 box 元素時,會跳出一個提示框,這對於提供使用者即時回饋非常有幫助。

總結來說,這些滑鼠事件可以讓網頁變得更加互動有趣。我發現透過學習這些事件,可以讓我更靈活地控制 DOM 元素,也提高了我對 JavaScript 的熟練度。


上一篇
DAY 10: 事件處理簡介
下一篇
DAY 12: 鍵盤事件
系列文
JavaScript DOM 操作30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言