添加事件及Event对象的兼容写法

 

一、事件流

事件流描述的是从页面中接受事件的顺序。

IE的事件流是事件冒泡流,而Netscape的事件流是事件捕获流

1、事件冒泡

事件冒泡,即事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上转播至最不具体的节点(文档)。

2、事件捕获

事件捕获的思想是不太具体的节点应该更早接收到事件,而最具体的节点最后接收到事件。

二、事件处理程序

1、HTML事件处理程序

2、DOM0级事件处理程序

3、DOM2级事件处理程序

DOM2级事件定义了两个方法:用于处理指定和删除事件处理程序的操作:addEventListener()和removeEventListener()。它们都接收三个参数:要处理的事件名、作为事件处理程序的函数和一个布尔值。

4、IE事件处理程序

attachEvent()添加事件

detachEvent()删除事件

这两个方法接收相同的两个参数:事件处理程序名称与事件处理函数

5、跨浏览器的事件处理程序

三、事件对象

事件对象event

1、DOM中的事件对象

(1)、type:获取事件类型

(2)、target:事件目标

(3)、stopPropagation() 阻止事件冒泡

(4)、preventDefault() 阻止事件的默认行为

2、IE中的事件对象

(1)、type:获取事件类型

(2)、srcElement:事件目标

(3)、cancelBubble=true阻止事件冒泡

(4)、returnValue=false阻止事件的默认行为

 

var eventUtil={

           // 添加兼容句柄

           addHandler:function(element,type,handler){

               if(element.addEventListener){

                 element.addEventListener(type,handler,false);

               }else if(element.attachEvent){

                 element.attachEvent('on'+type,handler);

               }else{

                 element['on'+type]=handler;

               }

           },

           // 删除兼容句柄

           removeHandler:function(element,type,handler){

               if(element.removeEventListener){

                 element.removeEventListener(type,handler,false);

               }else if(element.detachEvent){

                 element.detachEvent('on'+type,handler);

               }else{

                 element['on'+type]=null;

               }

           },

            // 获取兼容事件对象

          getEvent:function(event){

            return event?event:window.event;

          },

// 获取兼容的事件类型

          getType:function(event){

            return event.type;

          },

// 获取兼容事件源,既触发事件的元素(事件的目标节点)

          getElement:function(event){

            return event.target || event.srcElement;

          },

// 取消兼容默认事件

          preventDefault:function(event){

            if(event.preventDefault){

              event.preventDefault();

            }else{

              event.returnValue=false;

            }

          },

// 防止兼容冒泡

         stopPropagation:function(event){

           if(event.stopPropagation){

             event.stopPropagation();

           }else{

             event.cancelBubble=true;

           }

         }

  }

 

上一篇:JS客户端判断


下一篇:深入Oracle优化器:一条诡异执行计划的解决之道