發(fā)送DOM事件是為了將發(fā)生的有趣事情通知代碼。
事件通常與功能結(jié)合使用,并且在事件發(fā)生之前(例如,用戶單擊按鈕時)不會執(zhí)行該功能。
事件可以表示一切,從基本的用戶交互到呈現(xiàn)模型中發(fā)生的事情的自動通知。
| 活動名稱 | 描述 | 事件類型 |
|---|---|---|
| abort | 當資源加載已中止時發(fā)生該事件 | UiEvent, Event |
| afterprint | 當相關(guān)文檔已開始打印或打印預(yù)覽已關(guān)閉時,發(fā)生此事件 | Event |
| animationend | CSS動畫完成時發(fā)生 | AnimationEvent |
| animationiteration | 重復(fù)CSS動畫時發(fā)生此事件 | AnimationEvent |
| animationstart | CSS動畫開始時發(fā)生此事件 | AnimationEvent |
| beforeprint | 當相關(guān)文檔將要打印或預(yù)覽以進行打印時,將發(fā)生此事件 | Event |
| beforeunload | 當窗口,文檔及其資源即將被卸載時發(fā)生該事件 | UiEvent, Event |
| blur | 當元素失去焦點(不會冒泡)時發(fā)生該事件 | FocusEvent |
| canplay | 當瀏覽器可以開始播放媒體時(當它有足夠的緩沖來開始播放時),將發(fā)生此事件。 | Event |
| canplaythrough | 當瀏覽器可以在不停止緩沖的情況下播放媒體時發(fā)生此事件 | Event |
| change | 當表單元素,選擇或選中狀態(tài)的內(nèi)容更改時(對于<input>,<select>和<textarea>),將發(fā)生此事件。 | Event |
| click | 當用戶單擊元素時發(fā)生事件 | MouseEvent |
| contextmenu | 當用戶右鍵單擊某個元素以打開上下文菜單時,將發(fā)生該事件 | MouseEvent |
| copy | 當用戶復(fù)制元素的內(nèi)容時發(fā)生該事件 | ClipboardEvent |
| cut | 當用戶剪切元素的內(nèi)容時發(fā)生該事件 | ClipboardEvent |
| dblclick | 當用戶雙擊元素時發(fā)生事件 | MouseEvent |
| drag | 拖動元素時發(fā)生事件 | DragEvent |
| dragend | 當用戶完成拖動元素時,發(fā)生該事件 | DragEvent |
| dragenter | 當拖動的元素進入放置目標時,將發(fā)生事件 | DragEvent |
| dragleave | 當拖動的元素離開放置目標時發(fā)生事件 | DragEvent |
| dragover | 當拖動的元素在放置目標上方時發(fā)生事件 | DragEvent |
| dragstart | 當用戶開始拖動元素時發(fā)生該事件 | DragEvent |
| drop | 當將拖動的元素放置在放置目標上時,發(fā)生事件 | DragEvent |
| durationchange | 更改媒體的持續(xù)時間時發(fā)生此事件 | Event |
| ended | 該事件在媒體播放到盡頭時發(fā)生(對于“感謝收聽”之類的消息很有用) | Event |
| error | 資源加載失敗時發(fā)生 | ProgressEvent, UiEvent, Event |
| focus | 當元素已獲得焦點時發(fā)生事件(不會冒泡) | FocusEvent |
| focusin | 該事件在某個元素即將獲得焦點時發(fā)生 | FocusEvent |
| focusout | 該事件在某個元素即將失去焦點時發(fā)生 | FocusEvent |
| fullscreenchange | 以全屏模式顯示元素時發(fā)生事件 | Event |
| fullscreenerror | 當元素無法以全屏模式顯示時,發(fā)生此事件 | Event |
| hashchange | 當URL的錨點部分發(fā)生更改時,將發(fā)生此事件 | HashChangeEvent |
| input | 當元素獲得用戶輸入時發(fā)生事件 | InputEvent, Event |
| invalid | 當元素無效時發(fā)生 | Event |
| keydown | 該事件在用戶按下某個鍵時發(fā)生 | KeyboardEvent |
| keypress | 當用戶按下鍵時發(fā)生事件 | KeyboardEvent |
| keyup | 當用戶釋放鍵時發(fā)生該事件 | KeyboardEvent |
| load | 該事件在對象已加載時發(fā)生 | UiEvent, Event |
| loadeddata | 加載媒體數(shù)據(jù)時發(fā)生事件 | Event |
| loadedmetadata | 加載元數(shù)據(jù)(如維度和持續(xù)時間)時發(fā)生此事件 | Event |
| loadstart | 當瀏覽器開始查找指定的媒體時發(fā)生該事件 | ProgressEvent |
| message | 通過事件源接收到消息時發(fā)生事件 | Event |
| mousedown | 當用戶在元素上按下鼠標按鈕時,發(fā)生事件 | MouseEvent |
| mouseenter | 當指針移動到元素上時,發(fā)生該事件 | MouseEvent |
| mouseleave | 當指針從元素中移出時發(fā)生該事件 | MouseEvent |
| mousemove | 當指針在元素上方移動時發(fā)生該事件 | MouseEvent |
| mouseover | 當指針移動到元素或其子元素之一上時,發(fā)生此事件 | MouseEvent |
| mouseout | 當用戶將鼠標指針移出某個元素或其子元素之一時,將發(fā)生此事件 | MouseEvent |
| mouseup | 當用戶在元素上釋放鼠標按鈕時發(fā)生該事件 | MouseEvent |
| mousewheel | 不推薦使用。改用wheel事件 | WheelEvent |
| offline | 當瀏覽器開始脫機工作時發(fā)生該事件 | Event |
| online | 當瀏覽器開始在線工作時發(fā)生該事件 | Event |
| open | 打開與事件源的連接時,將發(fā)生該事件 | Event |
| pagehide | 當用戶離開網(wǎng)頁導(dǎo)航時發(fā)生該事件 | PageTransitionEvent |
| 頁面顯示 | 當用戶導(dǎo)航到網(wǎng)頁時發(fā)生事件 | PageTransitionEvent |
| paste | 當用戶將某些內(nèi)容粘貼到元素中時,發(fā)生該事件 | ClipboardEvent |
| pause | 當用戶或以編程方式暫停媒體時,將發(fā)生該事件 | Event |
| play | 當媒體已啟動或不再暫停時發(fā)生該事件 | Event |
| playing | 在暫停或停止緩沖媒體后播放媒體時發(fā)生該事件 | Event |
| popstate | 窗口的歷史記錄更改時發(fā)生該事件 | PopStateEvent |
| progress | 當瀏覽器正在獲取媒體數(shù)據(jù)(下載媒體)的過程中發(fā)生該事件 | Event |
| ratechange | 更改媒體的播放速度時發(fā)生 | Event |
| resize | 調(diào)整文檔視圖大小時發(fā)生此事件 | UiEvent, Event |
| reset | 該事件在重置表單時發(fā)生 | Event |
| scroll | 滾動元素的滾動條時發(fā)生事件 | UiEvent, Event |
| search | 當用戶在搜索字段中輸入內(nèi)容時(對于<input="search">),將發(fā)生此事件。 | Event |
| seeked | 當用戶完成移動/跳至媒體中的新位置時發(fā)生該事件 | Event |
| seeking | 當用戶開始移動/跳到媒體中的新位置時發(fā)生該事件 | Event |
| select | 用戶選擇某些文本(對于<input>和<textarea>)后,將發(fā)生此事件。 | UiEvent, Event |
| show | 當<menu>元素顯示為上下文菜單時,事件發(fā)生 | Event |
| stalled | 當瀏覽器嘗試獲取媒體數(shù)據(jù)但數(shù)據(jù)不可用時,發(fā)生該事件 | Event |
| storage | 更新Web存儲區(qū)域時發(fā)生該事件 | StorageEvent |
| submit | 該事件在提交表單時發(fā)生 | Event |
| suspend | 當瀏覽器有意不獲取媒體數(shù)據(jù)時發(fā)生此事件 | Event |
| timeupdate | 當播放位置更改時(例如,當用戶快速前進到媒體中的另一個點時)發(fā)生該事件 | Event |
| toggle | 該事件在用戶打開或關(guān)閉<details>元素時發(fā)生 | Event |
| touchcancel | 該事件在觸摸被中斷時發(fā)生 | TouchEvent |
| touchend | 當手指從觸摸屏上移開時發(fā)生該事件 | TouchEvent |
| touchmove | 當手指在屏幕上拖動時發(fā)生事件 | TouchEvent |
| touchstart | 當手指放在觸摸屏上時發(fā)生事件 | TouchEvent |
| transitionend | CSS轉(zhuǎn)換完成時發(fā)生此事件 | TransitionEvent |
| unload | 該事件在文檔或從屬資源被卸載時發(fā)生 | UiEvent, Event |
| volumechange | 當媒體的音量已更改(包括將音量設(shè)置為“靜音”)時發(fā)生該事件 | Event |
| waiting | 當媒體已暫停但預(yù)期會恢復(fù)時(如媒體暫停以緩沖更多數(shù)據(jù)時),將發(fā)生此事件 | Event |
| wheel | 當鼠標滾輪在元素上向上或向下滾動時,會發(fā)生此事件 | WheelEvent |
下表列出了DOM事件的屬性:
| 屬性 | 描述 | 事件類型 |
|---|---|---|
| altKey | 返回在觸發(fā)鼠標事件時是否按下了“ ALT”鍵 | MouseEvent |
| altKey | 返回觸發(fā)鍵事件時是否按下了“ ALT”鍵 | KeyboardEvent, TouchEvent |
| animationName | 返回動畫的名稱 | AnimationEvent |
| bubbles | 返回特定事件是否為冒泡事件 | Event |
| button | 返回觸發(fā)鼠標事件時按下的鼠標按鈕 | MouseEvent |
| buttons | 返回觸發(fā)鼠標事件時按下的鼠標按鈕 | MouseEvent |
| cancelable | 返回事件是否可以阻止其默認操作 | Event |
| charCode | 返回觸發(fā)onkeypress事件的鍵的Unicode字符代碼 | KeyboardEvent |
| changeTouches | 返回狀態(tài)在上一次觸摸和此觸摸之間改變的所有觸摸對象的列表 | TouchEvent |
| clientX | 返回觸發(fā)鼠標事件時鼠標指針相對于當前窗口的水平坐標 | MouseEvent, TouchEvent |
| clientY | 返回觸發(fā)鼠標事件時鼠標指針相對于當前窗口的垂直坐標 | MouseEvent, TouchEvent |
| clipboardData | 返回一個對象,其中包含受剪貼板操作影響的數(shù)據(jù) | ClipboardData |
| code | 返回觸發(fā)事件的鍵的代碼 | KeyboardEvent |
| composed | 返回事件是否組成 | Event |
| ctrlKey | 返回觸發(fā)鼠標事件時是否按下了“ CTRL”鍵 | MouseEvent |
| ctrlKey | 返回觸發(fā)鍵事件時是否按下了“ CTRL”鍵 | KeyboardEvent, TouchEvent |
| currentTarget | 返回其事件偵聽器觸發(fā)事件的元素 | Event |
| data | 返回插入的字符 | InputEvent |
| dataTransfer | 返回一個對象,其中包含要拖放/插入或刪除的數(shù)據(jù) | DragEvent, InputEvent |
| defaultPrevented | 返回是否為事件調(diào)用preventDefault()方法 | Event |
| deltaX | 返回鼠標滾輪的水平滾動量(x軸) | WheelEvent |
| deltaY | 返回鼠標滾輪的垂直滾動量(y軸) | WheelEvent |
| deltaZ | 返回Z軸的鼠標滾輪的滾動量 | WheelEvent |
| deltaMode | 返回一個數(shù)字,表示增量值(像素,線條或頁面)的度量單位 | WheelEvent |
| detail | 返回一個數(shù)字,該數(shù)字指示鼠標被單擊了多少次 | UiEvent |
| elapsedTime | 返回動畫已運行的秒數(shù) | AnimationEvent |
| elapsedTime | 返回過渡已運行的秒數(shù) | |
| eventPhase | 返回當前正在評估事件流的哪個階段 | Event |
| inputType | 返回更改的類型(即“插入”或“刪除”) | InputEvent |
| isComposing | 返回事件的狀態(tài)是否正在組成 | InputEvent, KeyboardEvent |
| isTrusted | 返回事件是否受信任 | Event |
| key | 返回事件表示的鍵的鍵值 | KeyboardEvent |
| key | 返回更改的存儲項目的密鑰 | StorageEvent |
| keyCode | 返回觸發(fā)onkeypress事件的鍵的Unicode字符代碼,或觸發(fā)onkeydown或onkeyup事件的鍵的Unicode鍵代碼。 | KeyboardEvent |
| location | 返回鍵盤或設(shè)備上按鍵的位置 | KeyboardEvent |
| lengthComputable | 返回進度的長度是否可以計算 | ProgressEvent |
| loaded | 返回已加載的工作量 | ProgressEvent |
| metaKey | 返回事件觸發(fā)時是否按下了“ META”鍵 | MouseEvent |
| metaKey | 返回在觸發(fā)鍵事件時是否按下了“元”鍵 | KeyboardEvent, TouchEvent |
| MovementX | 返回相對于上一個mousemove事件的位置的鼠標指針的水平坐標 | MouseEvent |
| MovementY | 返回相對于上一個mousemove事件的位置的鼠標指針的垂直坐標 | MouseEvent |
| newValue | 返回更改后的存儲項目的新值 | StorageEvent |
| newURL | 更改哈希值后,返回文檔的URL | HasChangeEvent |
| offsetX | 返回鼠標指針相對于目標元素邊緣位置的水平坐標 | MouseEvent |
| offsetY | 返回鼠標指針相對于目標元素邊緣位置的垂直坐標 | MouseEvent |
| oldValue | 返回已更改存儲項目的舊值 | StorageEvent |
| oldURL | 返回哈希更改之前的文檔的URL | HasChangeEvent |
| onemptied | 當發(fā)生不良情況并且媒體文件突然不可用(例如意外斷開連接)時,將發(fā)生此事件 | |
| pageX | 返回觸發(fā)鼠標事件時鼠標指針相對于文檔的水平坐標 | MouseEvent |
| pageY | 返回觸發(fā)鼠標事件時鼠標指針相對于文檔的垂直坐標 | MouseEvent |
| persisted | 返回網(wǎng)頁是否被瀏覽器緩存 | PageTransitionEvent |
| propertyName | 返回與動畫或過渡相關(guān)聯(lián)的CSS屬性的名稱 | AnimationEvent, TransitionEvent |
| pseudoElement | 返回動畫或過渡的偽元素的名稱 | AnimationEvent, TransitionEvent |
| region | MouseEvent | |
| relatedTarget | Returns the element related to the element that triggered the mouse event | MouseEvent |
| relatedTarget | 返回與觸發(fā)事件的元素相關(guān)的元素 | FocusEvent |
| repeat | 返回是否重復(fù)按住某個鍵 | KeyboardEvent |
| screenX | 返回觸發(fā)事件時鼠標指針相對于屏幕的水平坐標 | MouseEvent |
| screenY | 返回觸發(fā)事件時鼠標指針相對于屏幕的垂直坐標 | MouseEvent |
| shiftKey | 返回事件觸發(fā)時是否按下了“ SHIFT”鍵 | MouseEvent |
| shiftKey | 返回觸發(fā)鍵事件時是否按下了“ SHIFT”鍵 | KeyboardEvent, TouchEvent |
| state | 返回一個包含歷史記錄條目副本的對象 | PopStateEvent |
| storageArea | 返回一個表示受影響的存儲對象的對象 | StorageEvent |
| target | 返回觸發(fā)事件的元素 | Event |
| targetTouches | 返回所有與該表面接觸以及touchstart事件發(fā)生在與當前目標元素相同的目標元素上的觸摸對象的列表 | TouchEvent |
| timeStamp | 返回創(chuàng)建事件的時間(相對于紀元的毫秒數(shù)) | Event |
| total | 返回將要加載的工作總量 | ProgressEvent |
| touches | 返回當前與曲面接觸的所有觸摸對象的列表 | TouchEvent |
| transitionend | CSS轉(zhuǎn)換完成時發(fā)生此事件 | TransitionEvent |
| type | 返回事件的名稱 | Event |
| url | 返回更改項目文檔的URL | StorageEvent |
| which | 返回觸發(fā)鼠標事件時按下的鼠標按鈕 | MouseEvent |
| which | 返回觸發(fā)onkeypress事件的鍵的Unicode字符代碼,或觸發(fā)onkeydown或onkeyup事件的鍵的Unicode鍵代碼。 | KeyboardEvent |
| view | 返回對發(fā)生事件的Window對象的引用 | UiEvent |
下表列出了DOM事件的方法:
| 方法 | 描述 | 事件類型 |
|---|---|---|
| createEvent() | 創(chuàng)建一個新事件 | Event |
| getTargetRanges() | 返回一個包含目標范圍的數(shù)組,該范圍將受到插入/刪除的影響 | InputEvent |
| getModifierState() | 返回一個包含目標范圍的數(shù)組,該范圍將受到插入/刪除的影響 | MouseEvent |
| preventDefault() | 阻止瀏覽器執(zhí)行所選元素的默認操作 | Event |
| stopImmediatePropagation() | 防止同一事件的其他偵聽器被調(diào)用 | Event |
| stopPropagation() | 防止事件在事件流中進一步傳播 | Event |
Javascript教程:Javascript事件
Javascript教程:事件監(jiān)聽器
Javascript教程:事件傳播