承前文,在事件的註冊/綁定與監聽中,入門者最常使用「監聽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() ** 方法加以實施。