• 鍵盤事件的類型相對應(yīng)的操作 操作keyCode 不同于 操作charCode
• this代表的上下文
• 事件動作得到事件發(fā)起位置的相對坐標 與元素位置的相對坐標的不同
• 重要的事情說三遍 IE 的事件對象和 W3C 的事件體系不同瓜晤，需要時時注意兼容性問題Ｆ枧ā浦旱！注意！能庆！

本節(jié)索引

1. 事件對象 --事件函數(shù)
2. 事件類型 （鼠標事件 + 鍵盤事件）
3. event(作為參數(shù)傳遞)的屬性和方法
4. 傳統(tǒng)事件的綁定
5. W3C事件綁定

事件對象

1. 事件對象：事件對象是事件處理函數(shù)通過參數(shù)傳遞的（事件對象可以是隱藏的參數(shù)）

    document.onclick = function(){
        alert(arguments[0]);
    }
   

2. 事件處理函數(shù)

    1. 對象.事件處理函數(shù) = function(evevt){}   event是可以隱藏的參數(shù)
    
    2. 事件處理函數(shù)(監(jiān)聽器) 事件類型 + 事件動作 onclick
    
    3. document.onclick = function(evevt) {}
   

3. this上下文對象

   this代表當前綁定事件的函數(shù)施禾，this有上下文環(huán)境

基本事件處理函數(shù) 鼠標事件 + 鍵盤事件 + HTML事件

所有的事件處理函數(shù)都會都有兩個部分組成,on + 事件名稱

1. 鼠標事件

2. 鍵盤事件

3. HTML事件

事件類型 (鼠標事件 + 鍵盤事件)

1. 鼠標事件

   click 一般只有鼠標左鍵單擊時觸發(fā)

   mousedown/mouseup 會觸發(fā)button屬性

    button屬性的值
    e.button == 0 主鼠標鍵（左鍵）
    e.button == 1 鼠標中鍵
    e.button == 2 次鼠標鍵 (右鍵)
   

2. 可視區(qū)域以及屏幕坐標（事件的坐標位置 與 元素的坐標位置不同） 元素的坐標位置稍后講解

   event.clientX / event.clientY 表示事件發(fā)生位置相對于瀏覽器的坐標

   event.screen / event.screenY 表示事件相對于屏幕的坐標

3. 鍵盤事件 單獨的鍵盤敲擊 / 組合鍵盤敲擊(shift/comment/ctrl)

   • 修改鍵事件屬性 得到 boolear 值

       e.shiftKey
       e.ctrlKey
       e.altKey
       e.metaKey    `判斷是否按下window / comment鍵`
     

   • 鍵盤事件的兩種類型的事件 操作鍵碼 / 操作字符編碼（ACSII編碼）

     1. keydown / keyup 得到鍵盤的鍵碼keyCode

         document.keyDown = function(e){
             console.log(e.keyCode);
         }
        

     2. keyPress 得到鍵盤的字符編碼charCode

         document.keyPress = function(){
             console.log(e.charCode);
         }
        

     可以使用 String.fromCharCode()將 ASCII 編碼轉(zhuǎn)換成實際的字符

   小寫字母a 對應(yīng)的鍵盤鍵碼 與 字符編碼
   

   鍵盤事件類型

event對象的事件和方法

事件冒泡 + 事件的默認行為 + 事件目標(target) + 事件的細節(jié)屬性

• 事件冒泡

    e.bubbles               boolean     設(shè)置是否可以取消事件的冒泡行為
    
    e.stopPropagation()     方法(需要在 e.bubbles = true 時執(zhí)行)
            阻止事件冒泡行為的方法 
  

• 事件默認行為

    e.cancelable            boolean     設(shè)置是否可以取消事件的默認行為
        
    e.preventDefault()      方法(需要在 e.cancellable = ture 時執(zhí)行)
            取消是事件的默認行為的方法
  

• 事件目標 e.target

• 時間的細節(jié)屬性

    e.detail            與事件相關(guān)的細節(jié)屬性
        
    e.type              事件類型
        
    e.currentTarget     DOM元素   事件處理函數(shù)中當前正在處理的元素
  

• 事件冒泡的處理

  事件冒泡,是從里往外逐個觸發(fā)足删。事件捕獲,是從外往里逐個觸發(fā)寿谴。那么現(xiàn)代的瀏覽器 默認情況下都是冒泡模型

  skitch.png

傳統(tǒng)事件綁定 (已經(jīng)不建議使用)

1. 傳統(tǒng)事件綁定一般應(yīng)用腳本模型 （講一個事件處理函數(shù)綁定到函數(shù)上）

    objectDOM.onclick = function(){
        alert('傳統(tǒng)事件綁定');
    }
   

2. 腳本模型的諸多問題

   • 相同 事件類型名稱的 函數(shù)會被覆蓋 (相同類型名稱的事件后面的會將前面的事件覆蓋)

   • 事件切換執(zhí)行時的 this 傳值問題

       box.onclick = function () {
           toRed();
           toBlue.call(this);      // 必須將this傳遞到切換器中
       };
     
       function toRed() {
           this.className = 'red';
           this.onclick = toBlue;
       }
     
       function toBlue() {
           this.className = 'blue';
           this.onclick = toRed;
       }
     

W3C事件處理函數(shù)

1. DOM2 事件處理函數(shù)中包括 addEventListener() + removeEventListener() 兩個方法.
2. 所有的DOM節(jié)點中都包括這兩個方法。
3. 兩個方法都接受三個參數(shù)  
    事件名稱(標準的事件類型名稱)失受，
    處理函數(shù)讶泰，
    冒泡或者捕獲(true 表示捕獲，false表示冒泡) 

1. 事件處理函數(shù)

   objectDOM.addEventListener(事件名贱纠，處理函數(shù)峻厚，冒泡或捕獲)

   objectDOM.removeEventListener(事件名，處理函數(shù)谆焊，冒泡或捕獲)

2. W3C事件綁定的特點

   • 不需要自定義函數(shù)的切換

   • 可以屏蔽相同得到函數(shù)

       window.addEventListener('load',init,flase);    //第一次被執(zhí)行
       window.addEventListener('load',init,flase);    //第二次被屏蔽
       function init(){
           alert("W3C");
       }
     

   • 可以設(shè)置冒泡或者捕獲

   • 事件切換器 相當于JQuery中的事件的toggle()的方法

       window.addEventListener('load', function() { 
           var box = document.getElementById('box');
           box.addEventListener('click', function() {
                   alert('Lee');
               }, false);
           box.addEventListener('click', toBlue, false);
       }, false);
     
       function toRed() {
           this.className = 'red';
           // 在執(zhí)行切換事件之前需要移除原來的同名的事件
           this.removeEventListener('click', toRed, false); 
           this.addEventListener('click', toBlue, false);
       }
     
       function toBlue() {
           this.className = 'blue';
           this.removeEventListener('click', toBlue, false);               this.addEventListener('click', toRed, false);
       }
     

   • 冒泡和捕獲

       document.addEventListener('click', function () { 
           alert('document');
       }, true);               //布爾值 true 代表捕獲
       
       box.addEventListener('click', function () {
           alert('Lee'); 
       }, flase);              //布爾值為 flase 代表冒泡 
     

3. W3C的鼠標移動事件

   鼠標移動時間的獲取 mouseover/mouserout

   • e.target 用于獲取當前正在操作的事件的對象

   • W3C 提供了一個屬性:relatedTarget 用于獲取從哪里移入和從哪里移出的 DOM 對象

       objectDOM.ommouseover = function(e) {
               e.relatedTarget     //獲取移入該DOM對象的上一個DOM對象
       }
       
       objectDOM.onmouserout = function(e){
           e.relatedTarget     //用于獲取移出 該 DOM 對象的下一個 DOM對象
       }