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

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