[13.事件]事件的基本要点

DOM级别理解：DOM分为1级、2级、3级，后一级是前一级的补充和扩展，IE4及Netscape Communicator4是浏览器发展的标志性里程碑，DOM 0级并不存在，只是用来指代这个时段的参照点。

事件流

• 1.事件冒泡。
• 2.事件捕获。
• DOM2级事件规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段。

事件监听

• IE8及以下版本：attachEvent('eventName',callback)、detachEvent('eventName',callback)
• 其它：addEventListener('eventName',callback,boolean)、removeEventListener('eventName',callback,boolean)，boolean为true时表示事件捕获阶段调用函数，boolean为false时表示事件冒泡阶段调用函数。

事件对象（event）

• DOM事件对象共有的属性和方法有：bubbles、cancelable、currentTarget、defaultPrevented、detail、eventPhase、preventDefault()、stopImmediatePropagation()、stopPropagation()、target、trusted、type、view
• IE中事件对象共有的属性和方法有：cancelBubble、returnValue、srcElement、type

• //制作事件监听和事件对象的兼容方法
  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.datachEvent('on'+type,handler);
          }else{
              element['on'+type]=null;
          }
      },
      //获得event对象
      getEvent:function(event){
      return event?event:window.event;
      },
      //获得event对象的target属性
      getTarget:function(event){
      return event.target||event.srcElement;
      }
      //取消事件的默认行为，前提cancelable为true
      preventDefault:function(event){
      if(event.preventDefault){
          event.preventDefault();
      }else{
          event.returnValue=false;
      }
      },
      //取消事件的进一步捕获或冒泡，前提bubbles为true
      stopPropagation:function(event){
          if(event.stopPropagation){
              event.stopPropagation();
          }else{
              event.cancelBubble=true;
          }
      }
  }
  //调用
  var btn=document.getElementById('mybtn');
  EventUtil.addHandler(btn,'click',handler);
  EventUtil.removeHandler(btn,'click',handler);