DOM 事件

一、事件流

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

 

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

 

事件冒泡：

   事件最开始由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播至最不具体的那个节点（文档）。------由内到外

 事件捕获：

 不太具体的节点应该更早的接收到事件，具体的节点最后接收到事件。----由外到内

 

 

事件处理程序：

     HTML事件处理程序：

         缺点：html和js 紧密的耦合在一起。

     DOM0级事件处理程序：

         是一种较传统的方式，把一个函数赋值给一个事件处理程序的属性。在第四代web浏览器中出现。

        优势：  目前支持的比较好，用的比较多。简单，跨浏览器的优势。 

          元素.事件=null;//删除DOM0级事件

         

     DOM2级事件处理程序（IE不支持）：

        定义了两个方法：用于处理指定和删除时间处理程序的操作。

         addEventListener()和removeEventListener():接收三个参数：要处理的事件名（不带on）、作为事件处理程序的函数、boolean（true：在捕获阶段处理事件处理程序。false：在冒泡阶段处理事件处理程序。）

         可以添加多个事件处理程序。按顺序执行。

 

       IE事件处理程序：

         添加事件和删除事件分别是：attachEvent()和detachEvent()：接收两个参数：要处理的事件名（必须带on）、作为事件处理程序的函数。

        不使用第三个参数的原因是：IE8及其更早的浏览器版本只支持事件冒泡。所以默认冒泡。

        支持IE事件处理程序的浏览器：IE和OPERA.

        

       跨浏览器的事件处理程序：

          var  eventUtil={

               //添加

             addHandler:function(element,type,handler){

                 //是否支持dom2级

                 if(element.addEventListener){

                       element.addEventListener(type,handler,false);

                 //是否支持ie

                }else if(element.attachEvent){

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

                //dom0级

                }else{

                      //js中，所有用.的地方都可以用[]代替。element.onclick===element['onclick']此处不能用.,因此替换为[]

                       element['on'+type]=handler;

                  }

        },

 

        //删除

             delHandler:function(element,type,handler){

                 //是否支持dom2级

                 if(element.removeEventListener){

                       element.removeEventListener(type,handler,false);

                 //是否支持ie

                }else if(element.detachEvent){

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

                //dom0级

                }else{

                      //js中，所有用.的地方都可以用[]代替。element.onclick===element['onclick']此处不能用.,因此替换为[]

                       element['on'+type]=null;

                  }

        }

 

}

           

事件对象：

     在触发DOM上的事件时都会产生一个对象。

     事件对象EVENT.

     DOM中的事件对象：

         （1）type  获取事件类型（click,mouseover,mouseout....）

         （2）target  获取事件目标(即事件所在的dom元素)

         （3）stopPropagation()    阻止事件冒泡

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

                     eg：<a href='#'>超链接</a> 默认行为是点击跳转     

 

       IE中的时间对象：

          （1）type  获取事件类型（click,mouseover,mouseout....）     

          （2）srcElement 获取事件目标(即事件所在的dom元素)

          （3）cancelBubble属性   阻止事件冒泡  true 阻止冒泡，false 不阻止冒泡

          （4）returnValue属性    阻止事件的默认行为        false 阻止事件默认行为

                     eg：<a href='#'>超链接</a> 默认行为是点击跳转   

    

            eventUtil中再添加以下方法：

                getEvent:function(event){

                    //在ie8 之前的浏览器，必须用window.event才能获取到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;           

                            }

                           }

             

事件类型：

       鼠标事件，键盘事件。

    

      键盘事件：

        keyDown：按下键盘上任意键触发，如果按住不放的话，会重复触发此事件

        keyPress：按下键盘上字符键触发，如果按住不放，会重复触发此事件。

        keyUp:       释放键盘上的键时触发。

 

      event 对象的keyCode属性用于得到键盘对应键的键码值。