javascript中的事件对象和处理

---

• 键盘事件的类型相对应的操作 操作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. 鼠标事件

事件处理函数	影响的元素	发生时间
click	页面所有的元素都可能触发该事件	用户单击对象时触发
dblclick	链接、按钮、表单对象	用户双击主鼠标键
mousedown	链接、按钮、表单对象	当用户按下了鼠标还未弹起时触发
mouseup	链接、按钮、表单对象	当用户释放鼠标按钮时触发
mouseover	链接	当鼠标移到链接时
mouseout	链接	当鼠标移出某个元素上方时触发
mousemove	元素	当鼠标指针在元素上移动时触发

2. 键盘事件

事件处理函数	影响的元素	发生的时间
keydown	文档、图像、链接、表单	当按键被按下时 如果按住不放,会重复触发
keypress	文档、图像、链接、表单	当用户按下键盘上的字符键触发如果按住不放,会重复触发
keyup	文档、图像、链接、表单	当用户释放键盘上的键触发

3. HTML事件

事件处理函数	影响的元素	发生的时间
load	主题、框架集、图像	文档或图像加载后
unload	主题、框架集、图像	当页面完全卸载后触发
select	表单元素	当选择一个表单对象时
change	输入框,选择框和文本区域	当改变一个元素的值且失去焦点时
focus	窗口、框架、所有表单对象	当单击鼠标或者将鼠标移动聚焦到窗口或框架时
blur	窗口、框架、所有表单对象	当焦点从对象上移开时
submit	表单	当发送表格到服务器时
reset	表单复位按钮	单击表单的 reset 按钮
resize	窗口	当选择一个表单对象时
scroll	窗体对象	当用户滚动带滚动条的元素时触发

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

---

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对象
       }