DOM事件对象、IE事件对象、旧浏览器事件对象的JavaScript区别

事件流：

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

事件捕获：不太具体的节点应该更早接收到事件，而最具体的节点最后接收到事件。

DOM2级事件处理程序：

     .addEventListener();      .removeEventListener();

         在IE浏览器中不起作用！IE事件处理程序：

                .attachEvent();     .detachEvent();

   跨浏览器常用事件处理程序：

       var eventUtil = {

              //添加句柄

             addHandler:function(element,type,handler){

                  if(element.addEventListener){                              //DOM2级事件监听

                     element.addEventListener(type,handler,false);

                 }else if(element.attachEvent){                              //IE浏览器事件监听

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

                 }else{                                                                //旧版浏览器事件监听

                     element['on'+type]=handler;

                 }

         },

         //删除句柄

             removeHandler:function(element,type,handler){

                  if(element.removeEventListener){                              //DOM2级事件监听

                     element.removeEventListener(type,handler,false);

                 }else if(element.detachEvent){                              //IE浏览器事件监听

                     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;

                  }

         }

}                        

            使用举例：eventUtil.addHandler(元素ID,'click',函数名);

                          eventUtil.removeHandler(元素ID,'click',函数名);

    DOM.preventDefault()方法：阻止事件的默认行为，比如：<a href='#'>超链接</a>

     IE中用returnValue属性阻止事件的默认行为：设置为false表示阻止事件的默认行为

         获取事件目标：

                      DOM.target.                       IE.srcElement.

               比如：  event = event || window.event ;           //因为与旧版浏览器的区别

                           var ele = event.target || event.srcElement ;       //因为DOM与IE的区别

        DOM .stopPropagation()方法：用于阻止事件冒泡

           IE用cancelBubble属性阻止时间冒泡：设置为true表示阻止冒泡，设置为false表示不阻止冒泡

 

转载于:https://www.cnblogs.com/sandyclaire1990/p/4553363.html