JS—事件对象

在触发DOM上的某个事件时，会产生一个事件对象event。这个对象中包含着所有与事件有关的信息。包括导致事件的元素，事件的类型以及其他与特定事件相关的信息。

• 举例
  鼠标操作导致的事件对象中，会包含鼠标位置的信息，
  键盘操作导致的事件对象中，会包含按下的键有关的信息，

所有浏览器都支持event对象，event对象会传入DOM0级，DOM2级，HTML指定，的事件处理程序中，但支持的方式不同，所以也会涉及跨浏览器的部分。

• 兼容DOM的浏览器
  function handler(){
  alert(event.type);
  };
  EventUtil.addHandler(btn,'click',handler);//接上篇笔记
  event：在支持至少DOM2级的浏览器内，无论使用html特性指定，dom0级，2级，该对象都是该事件内置对象，可以在事件处理函数内直接使用。
  this：在支持至少DOM2级的浏览器内，无论使用html特性指定，dom0级，2级，都是指向当前正在处理事件的那个元素。
• 列举所有事件的事件对象，都会有的成员。

• • • 成员中有两个成员比较相似：
      currentTarget:this对象始终等于他的值，随着事件冒泡或者捕获，他得值等于捕获或冒泡到的上级元素的值。
      target：只包含事件的实际目标。

  • type
    可以利用type属性为一个元素同时添加多类事件处理程序。
    采用dom0级试试
    var btn=document.getElementById('d1');
    var handler=function(){
    switch(event.type){
    case "click":
    alert("clicked");
    break;

           case "mouseover":
               event.target.style.background='red';
               break;
           case "mouseout":
               event.target.style.background='yellow';
               break;
       }
     };
     btn.onclick=handler;
     btn.onmouseover=handler;
     btn.onmouseout=handler;
    

  • cancelable、preventDefault()
    只有cancelable为true时，才可以使用preventDefault()方法，来取消其默认行为。
    <a href="http://www.baidu.com/" id="myherf">百度</a>
    var Link=document.getElementById("myherf");
    Link.onclick=function(){
    event.preventDefault();
    }
    这样单击百度时，并不会跳转到百度的页面。

  • stopPropagation()
    立即停止事件在dom层次中的传播，即取消进一步的事件捕获或冒泡。
    function handler(){
    alert(event.type);
    event.stopPropagation();
    };

  • eventPahse
    用来确定事件当前位于事件流的哪个阶段
    var btn=document.getElementById('d1');//body内的div
    var wrap=document.getElementById('wrap');//body
    function handler(){
    alert(event.eventPhase)
    };
    //单击btn
    btn.addEventListener('click',handler,false);//2处于目标对象
    wrap.addEventListener('click',handler,false);//3冒泡阶段
    wrap.addEventListener('click',handler,true);//1捕获
    event对象只有在事件处理程序执行期间，才会存在，执行完毕即销毁。

• IE中的事件对象
  在IE8及其以前版本的浏览器是不兼容DOM2级的，但是还是可以使用dom0级的方法添加事件处理程序。
• event
  • dom0级方法中：
    var div=document.getElementById("test");
    div.onclick=function(){
    var event=window.event;//event为window对象
    alert(event.type);
    }
  • 使用IE的专属添加事件的方法，event对象作为事件处理程序的内部对象。可以直接使用event.type。
  • html指定：event对象同样也包含于创建他的事件相关的属性和方法。
• this
  • dom0级方法中
    this等于正在处理事件的那个元素。
  • 使用IE的专属
    this等于全局对象
  • html指定
    如果是在标签上直接使用this，那么等于正在处理事件的那个元素。如果是使用标签上指定函数，那么函数内的this指的是window。

看到了分歧，结果是必然要编写一个可以跨浏览器的。

• IE的event包含的对象与方法

• • returnvalue
    var div=document.getElementById("test");
    div.onclick=function(){
    window.event.returnValue=false;
    }
    但是没有办法判定默认事件能否被取消。
• cancelBubble
  var div=document.getElementById("test");
  div.onclick=function(){
  alert('ok')
  window.event.cancelBubble=true;
  }
  因为IE8及以前只支持冒泡所以只能取消冒泡。

• 跨浏览器的事件对象
  这个面试会问道的，写一个通用的事件侦听函数！就写下面的就可以！bingo！
  var EventUtil={
  getEvent:function(event){
  return event||window.event;
  },
  getTarget:function(event){
  return event.target||event.srcElement;
  },
  preventDefault:function(){
  if(event.preventDefault){
  event.preventDefault();
  }else{
  event.returnValue=false;
  }
  },
  stopPropagation:function(){
  if(event.stopPropagation){
  event.stopPropagation();
  }else{
  event.cancelBubble=true;
  }
  },
  addHandler:function(element,type,handler){
  if(element.addEventListener){
  element.addEventListener(type,handler,false);
  }else if(element.attachEvent){
  element["e"+type]=function(){
  handler.call(element)
  }
  element.attachEvent("on"+type,element["e"+type]);
  }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,element["e"+type]);
  element["e"+type]=null;
  }else{
  element["on"+type]=null;
  }
  }

    };