iT邦幫忙

2021 iThome 鐵人賽

DAY 13
0
自我挑戰組

追憶JS年華系列 第 26

Day-26 事件機制(2)

承前文,在事件的註冊/綁定與監聽中,入門者最常使用「監聽CLICK事件」等侵入/非侵入式JavaScript。然而,這只是有關事件的冰山一角。茲分述如下。

網頁界面事件

此類事件可以與DOM、BOM兩類操作有關,包括有:

  • DOMContentLoaded事件:待網頁DOM結構載入後,開始觸發。
  • load事件:待網頁資源(包括外部資源)全部載入,開始觸發(如圖片、CSS載入完畢後,所以比DOMContentLoaded事件要慢)。
  • unload或beforeunload事件:待離開網頁/重新載入網頁,開始觸發(如跳出訊息「是否要離開?」)。
  • error事件:圖片或document載入錯誤時,開始觸發(寫為 onerrer="觸發行為")。
  • resize事件:瀏覽器視窗或元素的尺寸變更時,開始觸發。
  • fullscreenchange事件:瀏覽器視窗切換全螢幕/切換復原時,開始觸發。
  • scroll事件:瀏覽器視窗或元素的捲軸拉動時,開始觸發。

滑鼠觸發事件

  • mousedown或mouseup事件:滑鼠指標「點下」、「放開」某元素時,開始觸發。
  • click事件:滑鼠指標「點下」某元素時,開始觸發。
  • dblclick事件:滑鼠指標「連點兩下」某元素時,開始觸發。
  • mouseenter或mousemove或mouseleave或mouseover事件:滑鼠指標移入、移動、離開某元素時,依次觸發。

鍵盤觸發事件

鍵盤事件常註冊在網頁中的input標單框:

  • keydown事件:鍵盤「按下」時,開始觸發。
  • keypress事件:除了Shift、Fn、CapsLock之外,鍵盤「按下」時,開始觸發。「一直按下」則連續觸發。
  • keyup事件:鍵盤「放開」時,開始觸發。

表單觸發事件

顧名思義,本類事件與表單元素相關,處理與input、select、textarea有關的事件。

  • input事件:凡帶有contenteditable元素及input與textarea框內內容改變時,開始觸發。
  • select事件:凡在input與textarea框內選取文字,即可被event.target的selectionEnd與selectionStart取得。
  • change事件:凡觸發若干表單元素時,且離輸入框之後,開始觸發。
  • submit事件:凡form表單資料送出時(包括表單驗證),開始觸發。
  • reset事件:凡form表單資料重置時,開始觸發。
  • focus事件:凡表單元素聚焦時,開始觸發。
  • blur事件:凡表單元素失焦時,開始觸發。

特殊事件

組成事件包含三種可監聽事件:

  • compositionstart:在框內啟動輸入法且正在拼字,開始觸發。
  • compositionupdate:在框內啟動輸入法且正在拼字/選字,開始觸發。
  • compositionend:在框內啟動輸入法且拼字/選字完成,開始觸發。

剪貼簿事件,包括操作電腦常用的:

  • cut事件:在網頁中選取且剪下文字時,開始觸發。
  • copy事件:在網頁中選取且複製文字時,開始觸發。
  • paste事件:將剪貼簿中的文字貼上時,開始觸發。

阻擋事件

為了特殊設計需求,有時候必須阻擋HTML元素的預設行為(如超連結、表單送出等)。此時,可以在指定榜定行為前面,加上 event.preventDefault() 方法,阻擋預設事件。

此外,如須阻止事件向上冒泡傳遞(如同一事件執行兩次),亦可使用 **event.stopPropogation() ** 方法加以實施。


上一篇
Day-25 事件機制(1)
下一篇
Day-27 特集:測試驅動開發 TDD 
系列文
追憶JS年華30

尚未有邦友留言

立即登入留言