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属性用于得到键盘对应键的键码值

      

 

 

 

 

 

 

 

 

猜你喜欢

转载自yhgogo.iteye.com/blog/2299295