iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 26
1
自我挑戰組

語法改革!零基礎新手也能讀懂的JS!系列 第 26

Day26 語法改革!零基礎新手也能讀懂的JS - addEventListener(下)

  • 分享至 

  • xImage
  •  

今天來介紹網頁相關事件、表單相關事件、剪貼相關事件吧!

網頁相關事件

  • load:在載入元素時觸發,不一定是進入頁面的載入的時候觸發,如果寫到img的話就是表示載入圖片完畢的時候觸發
  • unload:從瀏覽器離開或重整時時觸發
  • beforeunload:跟unload一樣從瀏覽器離開或重整時時觸發,但beforeunload還會跳處對話框詢問user是否要離開
  • DOMcontentLoaded: 表示在DOM結構被整個載入完成之後才會觸發,不必等待其他外部資源完成,這很常用!
  • resize:當使用者改變瀏覽器視窗大小或指定的元素尺寸改變時觸發
  • scroll:當使用者改變瀏覽器視窗大小或指定的元素尺寸觸動到滾軸的時候觸發
  • fullscreenchange:當user切換瀏覽器為全螢幕或還原視窗的時候觸發

表單相關事件

  • input:當input、textarea或是帶有contenteditable的元素內容被改變的時候會觸發
  • change:當input、textarea、checkbox、radio等等表單有的type改變的時候觸發,但跟input事件不同的是change會在目前焦點離開輸入框的時候才會觸發!
  • select:在input、textarea元素選取文字的時候觸發
  • focus:當表單元素被聚焦的時候觸發
  • blur:當表單元素失焦的時候觸發
  • reset:表單被重置時觸發
  • submit:表單送出時觸發

剪貼相關事件

  • copy:進行複製這動作的時候觸發
  • cut:進行剪下這動作的時候觸發
  • paste:貼上的時候觸發

我們這邊並沒有講解到自定義的事件,如果想了解的朋友們可以到網路上查詢相關文章唷!
今天大概就介紹到這邊,我們最後幾天會想要在JS30找個題目試試看!來複習以前所講解的東西,大家明天見!


上一篇
# Day25 語法改革!零基礎新手也能讀懂的JS - addEventListener(中)
下一篇
Day27 語法改革!零基礎新手也能讀懂的JS - JS30-01 Drum Kit
系列文
語法改革!零基礎新手也能讀懂的JS!30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言