W3C DOM2 Event规范

DOM 事件？

 

    就是浏览器检测到某种操作并执行相应事件的过程。

 

事件类型： 

 

    1. 对象事件  

           load和unload  

                    a)  适用于javascript对象和dom对象

                    b)  load的涵义 ：       页面或者图片载入成功  

                    c)  window.onload   缺陷必须等在页面所有元素加载完成才能执行，如果包含很多图片执行脚本时就会有明显的停顿。使用css引入则不会有这个问题。

           error  

                    a)  图片载入失败会执行的函数

                    b)  和load事件配合使用监听图片载入

 

          示例代码:

var img = document.createElement("img");
addEvent(img,load,function(){alert("ok")});
addEvent(img,error,function(){alert("error")});
img.setAttribute("src",......);

 

 

    2.  鼠标事件

            a)  mousemove   鼠标移动时会一直触发  

            b)  mouseover 和  mouseout 

        html结构

<div id="first">
  <div id="second"></div>
</div>

       对于这种结构如果都注册了mouseover和mouseout事件就会发生问题， 如果鼠标从first移动到second就会触发first的mouseout事件但实际second还是在first中的。

 

             c)   mousedown   鼠标单击是也会触发move

             d)   如果在mousedown和mouseup事件之间移动了鼠标则不会触发click事件。

 

   3. 键盘事件

 

             只是用于document   

 

   4. 表单事件

 

             a)   submit 和 reset

             b)   blur  和 focus

             c)    change  适用于 select  input  textarea等

 

   5. DOM事件  

 

             ie不支持

 

事件流和事件监听器

 

     两个阶段：冒泡阶段和捕获阶段

 

     三种模型

 

              IE浏览器： 采用的事件流是冒泡阶段

 

              Netscape： 采用的是捕获阶段

 

              W3C标准： 为了屏蔽差异将两个阶段结合起来 先执行捕获阶段，在执行冒泡阶段。

                                用户在事件注册时可以  通过false选择捕获阶段

                                                                通过true选择冒泡阶段

 

     阻止默认事件:

          javascript代码

if(event.preventDefault){
   event.preventDefault();
}else{
   event.returnValue = false;
}

 

     阻止事件冒泡：

         javascript代码

   if(event.stopPropagation){
       event.stopPropagation();  //W3C标准
   }else{
       event.cancelBubble = true; //IE浏览器
   }

 

    事件注册：

 

            a)  嵌入的事件注册  为标签的属性指定一个函数值

                    例如：

<div οnclick="test()">test</div>

                     好处： 所有的浏览器都支持这种事件注册的方法。

 

                     缺点：  

                               1.  不符合W3C的标记与行为分开的准则

                               2.  不能注册多个方法

                               3.  如果要为多个标签注册相同事件  会有大量重复代码

 

           b)   传统的事件模型   为DOM节点的属性添加一个方法

            例如

var div = document.getElementById("test");
div.onclick = function(){}  //注册事件
div.onclick = null  //注销事件

                          好处：    比起之前的嵌入式注册 将标记和行为进行了分离。

                                       也是不针对特定的浏览器

 

                          缺点：     如果监听器多了 代码会比较混乱 不容易维护

                                        没办法指定事件流顺序

 

           c)   后来ie提出了一种事件注册的机制

                  示例代码

element.attachEvent("type",listener);//注册事件
element.detachEvent("type",listener);//注销事件

 

                          好处 ：  思路清晰  可以绑定多个事件

 

                          缺点：   这种模型只在ie浏览器下可以使用

                                      于标准相比 ie中的listener只是一个引用this指针还是指向定义的环境 大多数是window对象

                                       不支持捕获模型

 

            d)  W3C DOM事件模型

                  示例代码

element.addEventListener("type",listener,boolean); //注册事件
element.removeEventListener("type",listener,boolean); //注销事件

 

 

            e)   多种模型下的手工模拟事件

                     示例代码

element.onclick() //传统事件中 可以通过直接调用这个方法模拟click 但是没有event对象

element.fireEvent("onclick"); // ie浏览器中 这种方法有event对象

var event = document.createEvent("MouseEvent"); //W3C的的事件模拟
event.initMouseEvent(.......); //具体参数请查阅W3C可以通过event.data设置event的值

element.dirpatchEvent(event);
 

 

  事件绑定：

 

          W3C中：

addEventListener

         IE中：

               attachEvent

          二者的不同之处在于对于事件句柄的处理，W3C中事件句柄的执行环境就是绑定的对象，而Ie中执行环境则是window。换句话说，函数中得this指向不同，W3C中指向node，ie中执行window。

 

     因此需要在ie中进行一个事件转换。

 

 

  访问事件对象

 

         每次发生一个事件时都会有一个事件对象，在W3C 事件模型中事件监听器取得一个表示事件本身的对象参数而在ie中则会将事件放入window.event属性中。

 

          W3C事件的属性：

                    currentTarget  表示当前事件目标

                    target              最早调用事件的目标

                    type               

          MouseEvent    

                    button属性        

                    获取鼠标位置

                            clientY 指的是鼠标相对浏览器顶端的距离

                            pageY 只能在safari中使用 鼠标相对于文档顶端的距离