Web前端基礎(chǔ)篇-HTML-03-事件處理系統(tǒng)

事件處理是前端的基礎(chǔ)，但是又是大家掌握比較不全面的一個(gè)知識(shí)點(diǎn)，下面由我來給大家總結(jié)一下


tmpdir__17_9_7_15_04_07.jpg

一、事件的分類

1.1 PC端事件

1.1.1Window事件

onafterprint - 在打印文檔之后運(yùn)行腳本
onbeforeprint - 在文檔打印之前運(yùn)行腳本
onbeforeonload - 在文檔加載之前運(yùn)行腳本
onblur- 當(dāng)窗口失去焦點(diǎn)時(shí)運(yùn)行腳本
onerror- 當(dāng)錯(cuò)誤發(fā)生時(shí)運(yùn)行腳本
onfocus- 當(dāng)窗口獲得焦點(diǎn)時(shí)運(yùn)行腳本
onhaschange - 文檔改變時(shí)運(yùn)行腳本
onload-當(dāng)文檔加載時(shí)運(yùn)行腳本
onmessage- 當(dāng)觸發(fā)消息時(shí)運(yùn)行腳本
onoffline- 當(dāng)文檔離線時(shí)運(yùn)行腳本
ononline- 當(dāng)文檔上線時(shí)運(yùn)行腳本
onpagehide-當(dāng)窗口隱藏時(shí)運(yùn)行腳本
onpageshow-當(dāng)窗口可見時(shí)運(yùn)行腳本
onpopstate-當(dāng)文檔執(zhí)行再執(zhí)行操作（redo）時(shí)運(yùn)行腳本
onresize-當(dāng)調(diào)整窗口大小時(shí)運(yùn)行腳本
onstorage- 當(dāng)文檔加載加載時(shí)運(yùn)行腳本
onundo-當(dāng) Web Storage 區(qū)域更新時(shí)（存儲(chǔ)空間中的數(shù)據(jù)發(fā)生變化時(shí)）
onunload-當(dāng)用戶離開文檔時(shí)運(yùn)行腳本

1.1.2form表單事件

onblur 當(dāng)元素失去焦點(diǎn)時(shí)運(yùn)行腳本
onchange 當(dāng)元素改變時(shí)運(yùn)行腳本
oncontextmenu 當(dāng)觸發(fā)上下文菜單時(shí)運(yùn)行腳本
onfocus 當(dāng)元素獲得焦點(diǎn)時(shí)運(yùn)行腳本
onformchange 當(dāng)表單改變時(shí)運(yùn)行腳本
onforminput 當(dāng)表單獲得用戶輸入時(shí)運(yùn)行腳本
oninput 當(dāng)元素獲得用戶輸入時(shí)運(yùn)行腳本
oninvalid 當(dāng)元素?zé)o效時(shí)運(yùn)行腳本
onreset 當(dāng)表單重置時(shí)運(yùn)行腳本。HTML 5 不支持
onselect 當(dāng)選取元素時(shí)運(yùn)行腳本
onsubmit 當(dāng)提交表單時(shí)運(yùn)行腳本

1.1.3keyboard事件

onkeydown 當(dāng)按下按鍵時(shí)運(yùn)行腳本
onkeypress 當(dāng)按下并松開按鍵時(shí)運(yùn)行腳本
onkeyup 當(dāng)松開按鍵時(shí)運(yùn)行腳本

1.1.4mouse事件

onclick 當(dāng)單擊鼠標(biāo)時(shí)運(yùn)行腳本
ondblclick 當(dāng)雙擊鼠標(biāo)時(shí)運(yùn)行腳本
ondrag 當(dāng)拖動(dòng)元素時(shí)運(yùn)行腳本
ondragend 當(dāng)拖動(dòng)操作結(jié)束時(shí)運(yùn)行腳本
ondragenter 當(dāng)元素被拖動(dòng)至有效的拖放目標(biāo)時(shí)運(yùn)行腳本
ondragleave 當(dāng)元素離開有效拖放目標(biāo)時(shí)運(yùn)行腳本
ondragover 當(dāng)元素被拖動(dòng)至有效拖放目標(biāo)上方時(shí)運(yùn)行腳本
ondragstart 當(dāng)拖動(dòng)操作開始時(shí)運(yùn)行腳本
ondrop 當(dāng)被拖動(dòng)元素正在被拖放時(shí)運(yùn)行腳本
onmousedown 當(dāng)按下鼠標(biāo)按鈕時(shí)運(yùn)行腳本
onmousemove 當(dāng)鼠標(biāo)指針移動(dòng)時(shí)運(yùn)行腳本
onmouseout 當(dāng)鼠標(biāo)指針移出元素時(shí)運(yùn)行腳本
onmouseover 當(dāng)鼠標(biāo)指針移至元素之上時(shí)運(yùn)行腳本
onmouseup 當(dāng)松開鼠標(biāo)按鈕時(shí)運(yùn)行腳本
onmousewheel 當(dāng)轉(zhuǎn)動(dòng)鼠標(biāo)滾輪時(shí)運(yùn)行腳本
onscroll 當(dāng)滾動(dòng)元素滾動(dòng)元素的滾動(dòng)條時(shí)運(yùn)行腳本

1.1.5media事件 - 播放器常用事件

oncanplay 當(dāng)媒介能夠開始播放但可能因緩沖而需要停止時(shí)運(yùn)行
onerror 當(dāng)在元素加載期間發(fā)生錯(cuò)誤時(shí)運(yùn)行
onloadeddata 當(dāng)加載媒介數(shù)據(jù)時(shí)運(yùn)行腳本
onloadedmetadata 當(dāng)媒介元素的持續(xù)時(shí)間以及其他媒介數(shù)據(jù)已加載時(shí)運(yùn)行
onended 當(dāng)媒介已抵達(dá)結(jié)尾時(shí)運(yùn)行腳本
onloadstart 當(dāng)瀏覽器開始加載媒介數(shù)據(jù)時(shí)運(yùn)行腳本
onpause 當(dāng)媒介數(shù)據(jù)暫停時(shí)運(yùn)行腳本
onplay 當(dāng)媒介數(shù)據(jù)將要開始播放時(shí)運(yùn)行腳本
onplaying 當(dāng)媒介數(shù)據(jù)已開始播放時(shí)運(yùn)行腳本
onprogress 當(dāng)瀏覽器正在取媒介數(shù)據(jù)時(shí)運(yùn)行腳本
onratechange 當(dāng)媒介數(shù)據(jù)的播放速率改變時(shí)運(yùn)行腳本
onreadystatechange 當(dāng)就緒狀態(tài)（ready-state）改變時(shí)運(yùn)行腳
onseeked 當(dāng)媒介元素的定位屬性 [1] 不再為真且定位已結(jié)束時(shí)運(yùn)行腳本
onvolumechange 當(dāng)媒介改變音量亦或當(dāng)音量被設(shè)置為靜音時(shí)運(yùn)行腳本

1.2 移動(dòng)端事件

1.2.1觸摸事件（Touch）

touchstart 當(dāng)手指放在屏幕上觸發(fā)
touchmove 當(dāng)手指在屏幕上滑動(dòng)時(shí)，連續(xù)地觸發(fā)
touchend 當(dāng)手指從屏幕上離開時(shí)觸發(fā)
touches 表示當(dāng)前跟蹤的觸摸操作的touch對(duì)象的數(shù)組
targetTouches 特定于事件目標(biāo)的touch對(duì)象的數(shù)組
changedTouches 上次觸摸以來發(fā)生了什么改變的touch對(duì)象的數(shù)組

1.2.2 手勢事件

gesturestart 當(dāng)一個(gè)手指已經(jīng)按在屏幕上，而另一個(gè)手指又觸摸在屏幕時(shí)觸發(fā)
gesturechange 當(dāng)觸摸屏幕的任何一個(gè)手指的位置發(fā)生改變的時(shí)候觸發(fā)
gestureend 當(dāng)任何一個(gè)手指從屏幕上面移開時(shí)觸發(fā)

二、事件處理流程

事件處理流程分為三個(gè)階段：
1、事件捕獲階段

當(dāng)用戶觸發(fā)點(diǎn)擊事件后，頂層對(duì)象 document 就會(huì)發(fā)出一個(gè)事件流，從最外層的 DOM 節(jié)點(diǎn)向目標(biāo)元素節(jié)點(diǎn)傳遞，最終到達(dá)目標(biāo)元素

2、事件處理階段

當(dāng)?shù)竭_(dá)目標(biāo)元素之后，執(zhí)行目標(biāo)元素綁定的處理函數(shù)。如果沒有綁定監(jiān)聽函數(shù)，則不做任何處理

3、事件冒泡階段

事件流從目標(biāo)元素開始，向最外層DOM節(jié)點(diǎn)傳遞，途中如果有節(jié)點(diǎn)綁定了事件處理函數(shù)，這些函數(shù)就會(huì)被執(zhí)行

注意：一般建議在冒泡階段處理事件，這樣可以最大限度的兼容各種瀏覽器。
\color{red}{特別提醒：blur、focus、load、unload 等幾個(gè)事件不會(huì)冒泡, 可以通過bubbles屬性判斷是否可以冒泡}

代碼示例：

<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
      <title>事件處理</title>
</head>
<body>
 <div id="father">
      <div id="child">
           按鈕點(diǎn)擊事件:
         <button onclick="onClickCurrentEvent()">click事件</button>
     </div>
 </div>
  <div id="custom">自定義事件</div>
</body>
</html>

事件傳遞圖解

事件處理系統(tǒng).png

紅色線表示第一個(gè)階段捕獲，<button>表示目標(biāo)元素響應(yīng)，藍(lán)色表示第三階段冒泡

三、事件監(jiān)聽處理方法

3.1addEventListener
事件目標(biāo)可以是一個(gè)文檔上的元素 Element/Document和Window
或者任何其他支持事件的對(duì)象;
代碼格式
target.addEventListener(type,listenner,options)

該方法將指定的監(jiān)聽器注冊到 EventTarget上，當(dāng)該對(duì)象觸發(fā)指定的事件時(shí)，指定的回調(diào)函數(shù)就會(huì)被執(zhí)行.

參數(shù) 說明
type 事件類型
listener 函數(shù)（事件對(duì)象）
listener. bubbles 只讀,一個(gè)布爾值，表示該事件是否能夠在DOM中冒泡。）
listener. cancelBubble 通過在一個(gè)事件處理程序返回前設(shè)置這個(gè)屬性的值為真，來阻止事件冒泡
listener. cancelable 只讀。一個(gè)布爾值，用來表示這個(gè)事件是否可以取消。
listener. currentTarget 只讀。注冊事件監(jiān)聽的對(duì)象。
listener. target 只讀。對(duì)事件起源目標(biāo)的引用。
listener. preventDefault 取消默認(rèn)事件
listener. stopPropagation 阻止事件冒泡
options 可選參數(shù)
\color{red}{options. apture} 如果為true，表示該listener會(huì)在捕獲過程中執(zhí)行。如果為false，listener會(huì)在冒泡過程中執(zhí)行。默認(rèn)為false
\color{red}{options. once} 默認(rèn)為false。如果為true，listener只會(huì)執(zhí)行一次，并且執(zhí)行后會(huì)被自動(dòng)移除
options. passive 如果為true，則無法調(diào)用preventDefault來阻止默認(rèn)事件。默認(rèn)為false。這個(gè)屬性有一個(gè)需要注意的地方。在safari瀏覽器的頁面滾動(dòng)事件中，這個(gè)值是默認(rèn)的true。所以要阻止safari中的頁面滾動(dòng)，需要手動(dòng)將這個(gè)值設(shè)為false。

3.1 removeEventListener - 刪除使用addEventListener注冊到target上的事件

注意：一般情況target.addEventListener 與removeEventListener 成對(duì)出現(xiàn)，否則可能有內(nèi)存風(fēng)險(xiǎn)
代碼格式
target. removeEventListener(type,listenner,options)

四、事件代理

本意要監(jiān)聽子元素的事件，但是可以直接監(jiān)聽父元素的事件來判斷子元素的處理，這里父元素就是代理委托對(duì)象

五、自定義事件

5.1 方式一（不推薦）

// 1. 創(chuàng)建一個(gè)自定義事件
const event = document.createEvent('Event');

// 2. 創(chuàng)建自定義事件類型
const eventType = "test";

//3. 初始化事件 initEvent(type: string, bubbles?: boolean, cancelable?: boolean): void;
event.initEvent(eventType, false, false);

// 4.為這個(gè)元素派發(fā)事件
const node = document.getElementById('custom');
node.dispatchEvent(event);

5.2 方式二（小編推薦）

 const node = document.getElementById('custom');
    const event =  new Event('test', {bubbles: false, cancelable: false});
    node.dispatchEvent(event);

事件使用：

    //獲取元素
    const node = document.getElementById('custom');

    // 監(jiān)聽事件
    node.addEventListener('test', function (e) {
        console.log('監(jiān)聽自定義事件----',e);
    }, false);

H5系列
Web前端基礎(chǔ)篇-HTML-01-BOM瀏覽器對(duì)象模型
Web前端基礎(chǔ)篇-HTML-02-HTML的生命周期
Web前端基礎(chǔ)篇-HTML-03-事件處理系統(tǒng)
Web前端基礎(chǔ)篇-HTML-04-HTML 渲染流程
Web前端基礎(chǔ)篇-HTML5-05-最全本地存儲(chǔ)總結(jié)
Web前端基礎(chǔ)篇-HTML5-06-離線緩存AppCache
Web前端基礎(chǔ)篇-HTML5-07-瀏覽器緩存機(jī)制

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容