DOM事件探索

前端开发 JavaScriptD DOM

1.事件流

事件流描述的是从页面中接受事件的顺序。
IE的事件流是事件冒泡流，而Netscape的事件流是事件捕获流

• 事件冒泡：事件从最开始的最具体的元素接受，然后逐级向上传递，传递到最不具体的元素（节点，也就是文档）。打个比方就是从处理这件事的业务员传递到总经理的过程。
• 事件捕获：接受过程和事件冒泡相反，最不具体元素最先接受事件然后传递到最具体元素。也就是总经理想起一个什么事然后叫业务员办这个事。

2.事件处理程序

1.HTML事件处理程序
2.DOMO级事件处理程序
3.DOM2级事件处理程序

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

4.IE事件处理程序
attachEvent()添加事件
detachEvent()删除事件
这两个方法接收相同的两个参数：事件处理程序名称与事件处理函数

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

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;
           }
         }
  }

使用：

window.onload=function(){
  var go=document.getElementById('go'),
      box=document.getElementById('box');

  eventUtil.addHandler(box,'click',function(){
    alert('我是整个父盒子');
  });

  eventUtil.addHandler(go,'click',function(e){
    //e=eventUtil.getEvent(e);
    e=e || window.event;
    alert(eventUtil.getElement(e).nodeName);
    eventUtil.preventDefault(e);
    eventUtil.stopPropagation(e);
  });

}

3.事件对象

1.DOM中的事件对象
(1)、type:获取事件类型
(2)、target：事件目标
(3)、stopPropagation() 阻止事件冒泡
(4)、preventDefault() 阻止事件的默认行为
2.IE中的事件对象
(1)、type:获取事件类型
(2)、srcElement：事件目标
(3)、cancelBubble=true阻止事件冒泡
(4)、returnValue=false阻止事件的默认行为