Javascript中的事件對象和事件類型

時間 2021-02-25

標籤 javascript html html5 java 瀏覽器緩存 dom ide 函數性能欄目 JavaScript 简体版

原文原文鏈接

接上次看JS的事件冒泡和捕獲，因此順帶就把`事件`相關的知識都看無缺了

並且想到一個好的學習方法，第一天本身看，次日把前一天學習的東西寫下來，一方面能夠當複習，一方面當從新整理而且分享

事件對象

事件處理程序函數在處理事件時，或者說DOM在觸發某個事件的時候，會產生一個包含事件相關信息的event事件對象javascript

對於不一樣瀏覽器環境，這個event事件對象有一些差距html

DOM中的事件對象

不論是DOM0級仍是DOM2級html5

兼容DOM的瀏覽器會將一個event對象傳入事件處理程序中java

經常使用的event對象的一些屬性瀏覽器
- type：表示事件的類型緩存
  
  具體用法：能夠經過type區分，在同一個事件處理函數實現多個事件的處理，減小事件監聽，優化性能dom
- currentTarget：事件處理程序當前正在處理這個事件的元素ide
- target: 表示實際觸發事件的DOM元素，實際目標函數
  
  能夠這麼理解，body下面的div被點擊，冒泡到body,在body上綁定了一個click事件，這個時候觸發這個body的點擊事件，可是這個時候的target其實是div性能
  
  那麼在事件處理程序中，還有一個this屬性，還有一個currentTarget：永遠指向正在處理這個事件的元素，那麼上一個例子中其實是body在處理這個事件，因此currentTarget是指向body的
  
  而事件處理程序中的this指向，是一直指向currentTarget表示正在執行和處理事件的這個元素
  
  因此，在事件沒有冒泡的狀況下，這三者是能夠爲同一個值，可是若是是在冒泡階段事件被處理的話，則這個target可能不等於其餘兩個值
- preventDefault 阻止默認行爲，是一個函數
  
  用法：在須要阻止默認行爲的事件處理函數中，使用event.preventDefault()，取消默認事件，好比默認點擊a標籤會跳轉指定連接等等
  
  注意：只有event.cancleable屬性爲true的事件類型，纔可使用preventDefault
- stopPropagation 阻止事件冒泡和捕獲，也是一個函數
  - 這個用的比較常見，阻止事件冒泡和捕獲，只要這個事件被處理，不會順着事件流往捕獲方向或者冒泡方向傳遞
- eventPhase 獲取事件當前正處於事件流的哪一個階段
  - 事件流三個階段: 捕獲階段，冒泡階段，處於目標階段
  - 事件處理程序中的event.eventPhase分別對應值：1，3，2
- 上述event屬性和方法，盡在事件處理程序執行期間存在，事件處理程序一旦執行完畢，會當即銷燬
IE中的事件對象

IE中的event對象跟DOM中的事件對象有必定的差異，最重要的就是IE中的事件對象，若是是使用DOM0級的方法添加事件處理程序是，event對象會掛載到window下面？window?window?是的沒錯，獲取事件對象的時候，是經過window.event來拿到事件對象，若是使用html指定事件處理程序或者是DOM2級都都不會有這個問題，和DOM級別相似，會有一個event對象傳入到事件處理程序

可是IE中的事件對象，對應的屬性名和方法名跟DOM中事件對象的名字有很大不同
- cancelBubble == stopPropagation 阻止事件冒泡，可是不是個方法是一個屬性
- returnValue == preventDefault 阻止默認事件,可是不是個方法，是一個屬性
- srcElement == target實際觸發目標
- type == type用來區分事件類型，這個沒有區別
要記住的仍是，若是在IE環境下，使用DOM0級指定事件處理程序的話，獲取event對象須要從window.event這樣獲取

例如：
```
var btn= document.getElementById('test')

 // DOM0級指定
 btn.onclick=function(){
     alert(window.event.target.srcElement === this) //true
 }

 // DOM2級
 btn.addEventListener('click',function(event){
     alert(event.srcElment === this) //true
 })
```
還有就是IE環境下阻止事件冒泡和默認處理程序都是屬性，不是方法，只須要把對應的屬性設置爲false

例如：
```
var link = document..getElementById('test')
    link.onclick = function(){
        window.event.returnValue = false; //阻止默認事件
    }
```
IE中的cancleBuble只是取消冒泡，由於IE環境不支持事件捕獲，哈哈哈哈

而後就是完善一下以前的EventUtil，實現跨瀏覽器的獲取事件對象，還有阻止冒泡和默認事件處理程序,代碼以下
```
getTarget(event){
        return event || window.event    //IE環境下多是WINDOW.event
    },
    preventDefault(event){
        if(event.preventDefault){
            event.preventDefault()
        }else{
            event.returnValue = false   // IE環境下沒有preventDefault，是經過設置returnValue取消默認
        }
    },
    stopPropagation(event){
        if(event.stopPropagation){
            event.stopPropagation()
        }else{
            event.cancelBuble = false
        }
    }
```

事件類型

DOM3級完善了事件類型，用來區分事件類型的不一樣信息，相似：鼠標事件，焦點事件，鍵盤事件，文本時間，滾輪事件等等

UI事件

指的是那些不必定與用戶操做有管的事件，包括一些DOM和元素的交互時間，例如load事件 unload事件
- load事件
  - 最經常使用的事件，
  - 觸發對象: window，
  - 觸發時間：頁面徹底加載後(包括全部圖像，JS文件，CSS等外部資源)
  - 如何捕獲：
    - DOM2級寫法：監聽window對象，例如window.addEventListener('load',function(){})
    - HTML級寫法，因爲HTML寫法沒法拿到window對象，因此會直接寫在body上面，通常來講，在window上發生的任何事件均可以在body元素上經過對應的特性來指定,全部的瀏覽器都能很好地支持這種方式，可是任然推薦使用DOM0或DOM2等javascript的方法來綁定window對象的時間按處理程序
    - img,script,link,video等標籤也有load事件
- unload事件
  - 通常用來：在這個事件清除引用，清理內存
  - 觸發對象：window
  - 觸發時間：文檔被徹底卸載以後觸發，此時可能一些對象和變量已經被卸載，注意引用關係
- resize事件
  - 區別：在DOM瀏覽器和IE環境有區別，event.target屬性的實際觸發對象不同，在DOM瀏覽器中,這個屬性指向document，可是在IE環境中，這個值沒有指定
  - 兼容性：在firefox瀏覽器，resize的過程不會持續觸發這個事件，只在開始和結束，兩個觸發，而在其餘瀏覽器，在拖拽的過程當中是會一直觸發這個事件
  - 觸發對象:window
  - 觸發事件：窗口大小發生1px的改變時候，最大最小化窗口的時候
  - 如何捕獲：參考load事件，能夠用window對象捕獲，也能夠用body標籤捕獲
- scroll事件
  - 觸發對象：window
  - 捕獲方式: 和load方法相似
  - 注意：根據document.compatMode渲染模式，有不一樣的表現，在compatMode==='CSS1Copat'標準模式時，除了Safari瀏覽器，全部的都會經過html這個元素反應這個變化，而在混雜模式時，是經過body元素的scrollLeft和scrollTop來獲取這個具體的bian'hua數值，而如今基本上混雜模式和標準模式已經混合了，區分沒有這麼詳細
焦點事件

在頁面元素失去或者得到焦點的時候觸發，能夠用來知曉用戶在頁面上的行蹤

主要用的比較多的是

focus,blur，這兩個事件表示，元素得到焦點和失去焦點，不會冒泡

focusin,focusout用來表示焦點進入和焦點失去事件，**這兩個事件會冒泡

雖然上述經常使用事件有的不會冒泡什麼，可是，仍然會走捕獲階段，因此仍然能夠經過捕獲階段進行一些外級操做，固然是瀏覽器支持捕獲階段

觸發元素：全部元素均可觸發

捕獲方式：DOM0級，DOM2級，或者HTML方法都可捕獲，IE瀏覽器環境方式也能夠
鼠標與滾輪事件

鼠標和滾輪事件也是在DOM3級事件中定義的，主要有，單擊，點擊，雙擊，鼠標移入，鼠標移出，等

除了鼠標移入mouseenter和鼠標移除mouseleave全部的鼠標事件都會冒泡，也是能夠取消的，而取消鼠標事件將會影響瀏覽器的默認行爲，取消鼠標事件的默認行爲還會影響其餘事件，由於鼠標事件可能和其餘事件是有聯繫的

一個click事件，前面包括了一個鼠標按下mousedown和鼠標放開兩個事件mouseup，也就是觸發click事件前會先觸發前兩個事件

同理，雙擊事件doubleclick事件包括兩個click事件，前面又有兩個mouseup和mousedown事件

主要用處
- 客戶區座標位置
  - event.clientX和event.clientY
  - 鼠標事件，相對於瀏覽器視口的位置
- 頁面座標位置
  - event.pageX和event.pageY
  - 鼠標事件，相對於頁面的位置
  - IE8及更早版本不支持這兩個屬性，可是也能夠經過鼠標相對於視口位置+頁面滾動屬性算出=鼠標相對於頁面的位置
- 屏幕座標位置
  - event.screenX和event.screenY
  - 鼠標事件，相對於整個屏幕的位置
- 修改鍵/點擊鼠標時同時按下了多功能鍵(ctrl,alt等)
  - 對應的鍵，直接在點擊事件的對應屬性上面
  - 例如：shift鍵就在 event.shiftKey這個屬性上
- 相關元素
  - 鼠標移入移出的來源元素和目標元素
  - 獲取方式： event.relatedTarget
  - 分別在mouseout和mouseenter時表示 目標獲取光標元素和目標失去光標元素
  - 在IE8以前的沒有這個屬性，可是分別有兩個fromElment和toElement用來獲取這兩個相關元素
- 鼠標按鈕
  - 鼠標事件（例如點擊事件時，點擊的是哪一個按鈕，左鍵，中鍵，右鍵等)
  - 屬性名：button
  - 屬性含義:0 : 左鍵按下，1:中鍵按下，2：右鍵按下
  - IE8及更早版本瀏覽器也有這個屬性，可是對應值有比較大的區別，區分的更爲細緻
- 更多事件信息
  - 屬性名: detail
  - 表示鼠標點擊次數
- 鼠標滾輪事件
  - 我真是沒想到支持的這麼詳細，hhh
- 觸摸設備
  - 這個還和後面的觸摸事件有必定的區別
  - 這個表示鼠標事件在一些移動設備中的區別表現
  - 例如：
  - 在移動設備中不支持dblclick事件，雙擊會放大畫面，並且不能改變該行爲
  - 輕擊可點擊單元會觸發mousemove事件，若是此事件會致使內容變化，將再也不發生其餘事件，若是不會觸發任何事件，那麼依次會發生mousedown,mouseup,click事件，可點擊單元表示一些會產生默認操做的元素：好比a標籤
- 無障礙性問題
  - 鼠標設備事件須要針對無障礙性考慮更多易用性和點擊操做邏輯
鍵盤與文本事件

主要是一些鍵盤輸入和文本鍵入的事件,是說DOM2級事件最初規定了鍵盤事件，可是後來刪掉了，因此目前主要支持的仍是DOM0級事件和DOM3級事件，可是DOM3級事件暫時沒有特別完善

主要事件keydown,keypress,keyup，理論上全部的元素都支持這三個事件，可是實際上只有文本輸入框支持最多

觸發順序keydown,keypress,keyup，而且keydown和keypress都是在文本框發生變化以前觸發，而keyup事件則是在文本框已經變化以後觸發，若是用戶一直按住一個字符不放，則會一直觸發keydown和keypress事件

還有一個新增的文本事件textInput，其實是對keypress的補充，用意是將文本顯示給用戶以前更加容易攔截文本，在文本插入文本框以前會觸發textInput事件

經常使用鍵盤事件屬性
- 鍵碼keyCode
  - 觸發時間：keydown和keyup時，event對象會有一個keyCode屬性
  - 表示：按下按鍵的對應的小寫字母或數字對應的ASCII碼相同
- 字符編碼charCode
  - 觸發時間：keypress事件觸發時
  - 使用方式: 首先檢查charCode是否可用，若是有的話則表示的是 按下鍵對應字符的ASCII碼，而IE8及更早版本，則是在keyCode表示字符對應的ASCII碼
  - 因此：字符對應的ASCII碼不必定在charCode，在IE8及老舊瀏覽器也可能在keyCode
  - 用法：若是charCode可用的話，能夠經過字符串類方法String.fromCharCode轉化爲實際的字符
- DOM3級新增了 char和key
  - 同時整合了charCode和keyCode
  - key:表示對應的文本字符，包括大小寫，就是實際的鍵入字符
  - char：表現形式在按下字符時表現和key一致，可是對於非字符時，char爲null
  - 新增了location屬性，表示按下了鍵盤什麼位置的同一個按鍵，例如鍵盤左邊的shift和右邊的shift
- textInput事件
  - 新增的文本輸入事件，只在可編輯區域觸發，主要用域監聽文本的變化，新增data屬性，表示修改實際文本
  - 新增屬性: inputMethod，用來區分輸入方式，是複製進來的，仍是拖放進來的，仍是手寫輸入，語音輸入等
DOM3級的鍵盤輸入事件很美好，可是不知道實際支持狀況，並且還要作兼容，以前遇到一個number類型的input輸入框，就累個夠嗆，候選字等，輸入法越作越優秀，事件愈來愈複雜
- 設備中的其餘按鍵事件
  - 例如一些手柄的事件，加號，減號等，暫時沒用到
複合事件

是DOM3級新增的一類事件，用域處理IME的輸入序列，暫時沒接觸，也是一類多功能輸入事件吧
變更事件

是DOM2級的變更事件

表示：DOM中某一部分發生變化時給出提示，變更事件是爲XML或者HTML DOM設計的，並不特定於某種語言。

主要有：
- 節點移除
- 節點插入
- 刪除節點等
HTML5事件
- contextmenu上下文菜單事件
  - 意義：經過鼠標右鍵，調出上下文菜單，鼠標右鍵顯示事件
  - 觸發元素：全部元素，
  - 是否冒泡：會冒泡
  - 注意：首先須要阻止默認事件處理程序，而後從新寫事件處理程序，有可能影響瀏覽器默認行文
- beforeunload事件
  - 意義：頁面卸載以前用來挽留頁面
  - 觸發元素: window對象
- DOMContentLoaded事件
  - 意義：DOM樹完整造成以後觸發
  - 觸發元素: window對象
- readystatechange事件
  - 意義：元素加載狀態發生變化時
  - 觸發元素：部分媒體元素,script標籤等
  - 每一個對象都有一個readystate的狀態屬性，會有如下狀態（但不是全部狀態都會正常變化）
    - uninitialized未初始化狀態
    - loading正在加載
    - loaded加載完畢
    - interactive能夠操做對象
    - complete完成
  - 可是不是全部對象都有這些完整的階段，可能會跳過
- pagehide和pageshow事件
  - 意義：從內存中取出/進入視野時觸發，不會觸發load事件，不會從新加載頁面，只是從頁面回顯
  - 通常發生在：前進/後退按鈕點擊的時候
  - 相關屬性event.persisted是否被緩存在bfcache中
  - 觸發元素：window
  。。。太多了，還有好多事件類型，回頭再填坑了，記錄不下去了