javascript 中 事件流和事件冒泡

一、事件流

是描述页面接受事件的顺序，
IE 使用的是时间冒泡流;而Netscape的事件采用的是事件捕获流。
1、事件冒泡
JS 和 HTML是通过事件的方式实现交互。
事件冒泡 开始元素，将事件逐级传递，（例子：当你点击一个按钮的时候你就点击了html一直document）。

二、事件处理

1、DOM0 级事件处理

  var btn2 = document.getElementById('btn2');
  btn2.onclick=function(){
   alert('holle word!');
  }

//清除DOM0级事件处理
btn2.onclick=null；

2、DOM2级事件处理可以绑定多个事件

//非IE DOM2事件处理
  var btn3 = document.getElementById('btn3');
  btn3.addEventListener('click',function(){
    alert('btn3');
  },false);
  btn3.addEventListener('click',showMessge
  },false);
  fucntion showMessge(){
    alert('text01');
  }
 btn3.removeEventListener('click',showMessge,false);

 //IE DOM2事件处理
  btn3.attachEvent('onclick',showMessge);
  btn3.detachEvent('onclick',showMessge);

三、事件对象

1、DOM中的事件对象
（1）、type:获取事件类型
（2）、target：事件目标
（3）、stopPropagation() 阻止事件冒泡
（4）、preventDefault() 阻止事件的默认行为

2、IE中的事件对象
（1）、type属性获取事件类型
（2）、srcElement属性 获取事件的来源
（3）、cancelBubble 属性
（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;
     }
    }
  }