Javascript中的事件物件和事件型別

JJesson發表於2021-02-24
JavaScript事件物件型別

接上次看JS的事件冒泡和捕獲，所以順帶就把事件相關的知識都看完好了

而且想到一個好的學習方法，第一天自己看，第二天把前一天學習的東西寫下來，一方面可以當複習，一方面當重新整理並且分享

事件物件

事件處理程式函式在處理事件時，或者說DOM在觸發某個事件的時候，會產生一個包含事件相關資訊的event事件物件

對於不同瀏覽器環境，這個event事件物件有一些差距

  • DOM中的事件物件

    不管是DOM0級還是DOM2級

    相容DOM的瀏覽器會將一個event物件傳入事件處理程式中

    常用的event物件的一些屬性

    • type：表示事件的型別

      具體用法：可以通過type區分，在同一個事件處理函式實現多個事件的處理，減少事件監聽，優化效能

    • currentTarget：事件處理程式當前正在處理這個事件的元素

    • 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

      。。。太多了，還有好多事件型別，回頭再填坑了，記錄不下去了

相關文章