JavaScript入門系列目錄

01、事件基礎

1.1、事件簡介

事件（Event）是JavaScript的心臟，觸發各種互動，讓網頁動起來。事件是瀏覽器網頁可以監測到的行為，如頁面載入、滑鼠點選、鍵盤按鍵等。在這些事件中可以自定義事件處理程式，用於實現各種業務需求。

事件物件的繼承關係：

常見的事件型別、事件如下：

⚡滑鼠事件(event)
click(event)	點選觸發，通常是滑鼠左鍵在一個元素上被按下並放開時
dblclick	雙擊觸發事件
contextmenu	滑鼠右鍵點選觸發
mousedown、mouseup	滑鼠按下、彈起時觸發
mousemove	滑鼠在元素上移動時觸發
onmouseover、mouseout	滑鼠移入、移出元素區域時觸發
mouseenter、mouseleave	滑鼠移入、移出元素區域時觸發，與上面不同的是不會冒泡
dragstart、dragend	拖放事件（drag/dræɡ/拖）
⚡鍵盤事件(event)
keydown、keyup	鍵盤按鍵按下、鬆開時觸發
⚡表單事件(event)
blur(event)、focusout()	元素失去焦點，blur不會冒泡（blue /blɜːr/ 模糊 /不樂/）
focus、focusin	元素獲取焦點時觸發，focus不會冒泡
from.submit	提交表單form時觸發，可用於表單校驗
change	值發生變化時觸發，文字方塊是在值變化且失去焦點是才觸發
input	輸入值改變時觸發，`event.preventDefault()`無法阻止，因為已經改變了
⚡Document 事件(event)	檔案生命週期：DOMContentLoaded ➡️ load ➡️ beforeunload ➡️ unload
doc.DOMContentLoaded	已載入 HTML並構建好DOM樹，外部資源（image、css）可能尚未載入完成 - 如果遇到`<script>`標籤，會執行（包括外部的資源）然後才繼續後面的DOM載入，要注意！async、defer標記的除外（只支援外部js資源）
window.load	檔案完全載入完成，包括圖片、樣式都準備好了。可用於window、element
window.beforeunload	當用戶正在離開頁面時，不可取消，好像也不能幹什麼。
window.unload	使用者幾乎已經離開了，同上
doc.readystatechange	檔案狀態變化時觸發，可跟蹤檔案載入狀態`readyState`
onerror	載入出現錯誤，用於元素
scroll	滑動條捲動事件，具有捲動的檢視元素。用於window、element
⚡ClipboardEvent事件	事件引數物件`clipboardData`由於安全限制，方法無法使用
cut，copy，paste	剪下、拷貝、貼上時觸發
e.clipboardData	儲存了一個DataTransfer物件，用於存放資料，該物件也用於拖放
⚡CSS事件(event)
transitionend	一個元素 CSS 動畫完成時`ele.addEventListener("transitionend", func)`

1.2、事件的繫結

① HTML事件：HTML中繫結（呼叫）事件處理程式，<button onclick="func(event);func2()">button</button>，注意加括號()。

② JS繫結事件（DOM-0級事件）：button.onclick = function() {}，和HTML繫結一樣，只能繫結一個事件處理程式。不能用setAttribute設定事件，因為設定的是字串值。

③ 註冊事件（DOM-2級事件）：

ele.addEventListener(event,func[, options]) ：註冊事件，

JavaScript入門⑧-事件總結大全

01、事件基礎

1.1、事件簡介

1.2、事件的繫結