• 键盘事件的类型相对应的操作 操作keyCode 不同于 操作charCode
• this代表的上下文
• 事件动作得到事件发起位置的相对坐标 与元素位置的相对坐标的不同
• 重要的事情说三遍 IE 的事件对象和 W3C 的事件体系不同，需要时时注意兼容性问题！！注意！！

本节索引

1. 事件对象 --事件函数
2. 事件类型 （鼠标事件 + 键盘事件）
3. event(作为参数传递)的属性和方法
4. 传统事件的绑定
5. W3C事件绑定

事件对象

1. 事件对象：事件对象是事件处理函数通过参数传递的（事件对象可以是隐藏的参数）

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

2. 事件处理函数

    1. 对象.事件处理函数 = function(evevt){}   event是可以隐藏的参数
    
    2. 事件处理函数(监听器) 事件类型 + 事件动作 onclick
    
    3. document.onclick = function(evevt) {}
   

3. this上下文对象

   this代表当前绑定事件的函数，this有上下文环境

基本事件处理函数 鼠标事件 + 键盘事件 + HTML事件

所有的事件处理函数都会都有两个部分组成,on + 事件名称

1. 鼠标事件

2. 键盘事件

3. HTML事件

事件类型 (鼠标事件 + 键盘事件)

1. 鼠标事件

   click 一般只有鼠标左键单击时触发

   mousedown/mouseup 会触发button属性

    button属性的值
    e.button == 0 主鼠标键（左键）
    e.button == 1 鼠标中键
    e.button == 2 次鼠标键 (右键)
   

2. 可视区域以及屏幕坐标（事件的坐标位置 与 元素的坐标位置不同） 元素的坐标位置稍后讲解

   event.clientX / event.clientY 表示事件发生位置相对于浏览器的坐标

   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 编码转换成实际的字符

   小写字母a 对应的键盘键码 与 字符编码
   

   键盘事件类型

event对象的事件和方法

事件冒泡 + 事件的默认行为 + 事件目标(target) + 事件的细节属性

• 事件冒泡

    e.bubbles               boolean     设置是否可以取消事件的冒泡行为
    
    e.stopPropagation()     方法(需要在 e.bubbles = true 时执行)
            阻止事件冒泡行为的方法 
  

• 事件默认行为

    e.cancelable            boolean     设置是否可以取消事件的默认行为
        
    e.preventDefault()      方法(需要在 e.cancellable = ture 时执行)
            取消是事件的默认行为的方法
  

• 事件目标 e.target

• 时间的细节属性

    e.detail            与事件相关的细节属性
        
    e.type              事件类型
        
    e.currentTarget     DOM元素   事件处理函数中当前正在处理的元素
  

• 事件冒泡的处理

  事件冒泡,是从里往外逐个触发。事件捕获,是从外往里逐个触发。那么现代的浏览器 默认情况下都是冒泡模型

  skitch.png

传统事件绑定 (已经不建议使用)

1. 传统事件绑定一般应用脚本模型 （讲一个事件处理函数绑定到函数上）

    objectDOM.onclick = function(){
        alert('传统事件绑定');
    }
   

2. 脚本模型的诸多问题

   • 相同 事件类型名称的 函数会被覆盖 (相同类型名称的事件后面的会将前面的事件覆盖)

   • 事件切换执行时的 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事件处理函数

1. DOM2 事件处理函数中包括 addEventListener() + removeEventListener() 两个方法.
2. 所有的DOM节点中都包括这两个方法。
3. 两个方法都接受三个参数  
    事件名称(标准的事件类型名称)，
    处理函数，
    冒泡或者捕获(true 表示捕获，false表示冒泡) 

1. 事件处理函数

   objectDOM.addEventListener(事件名，处理函数，冒泡或捕获)

   objectDOM.removeEventListener(事件名，处理函数，冒泡或捕获)

2. W3C事件绑定的特点

   • 不需要自定义函数的切换

   • 可以屏蔽相同得到函数

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

   • 可以设置冒泡或者捕获

   • 事件切换器 相当于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';
           // 在执行切换事件之前需要移除原来的同名的事件
           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对象
       }