JavaScript事件对象详解

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

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

所有浏览器都支持event对象，event对象会传入DOM0级，DOM2级，HTML指定的事件处理程序中，但支持的方式不同，所以也会涉及跨浏览器的部分。我们可以结合HTML DOM Event 对象来学习。
我们知道，特定的事件会有自己独特的属性，我们这里只看一些共有的属性

---

1.标准浏览器

event：在支持至少DOM2级的浏览器内，无论使用html特性指定，dom0级，2级，该对象都是该事件内置对象，可以在事件处理函数内直接使用。
this：在支持至少DOM2级的浏览器内，无论使用html特性指定，dom0级，2级，都是指向当前正在处理事件的那个元素。
列举所有事件的事件对象，都会有的成员。

列举所有事件的事件对象，共同拥有的成员。

属性方法	类型	读写	描述
bubbles	Blooean	只读	表明事件是否是起泡事件类型
cancelable	Blooean	只读	表明是否可以取消事件的默认行为
currentTarget	Element	只读	其事件处理程序当前正在处理事件的那个元素
target	Element	只读	事件的目标
eventPhase	Integar	只读	调用事件处理程序的阶段：1表示捕获阶段2表示处于目标3表示冒泡阶段
trusted	Blooean	只读	为true表示事件是浏览器生成的，为false表示事件是由开发人员通过js创建的
type	String	只读	被触发的事件的类型
stopPropagation()	Function	只读	取消事件的进一步捕获或冒泡，如果bubbels为true，则可以使用这个方法
preventDefault()	Function	只读	取消事件的默认行为，如果cancelable为true，则可以使用这个方法
initEvent()	Event	只读	初始化新创建的 Event 对象的属性

• currentTarget：始终等于this对象，随着事件冒泡或者捕获，他的值等于捕获或冒泡到的上级元素。

• target ：触发此事件的元素。

• type
  可以利用type属性为一个元素同时添加多类事件处理程序。
  采用dom0级测试

var btn=document.getElementById('myBtn');
 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;

• eventPahse
  用来确定事件当前位于事件流的哪个阶段

var btn=document.getElementById('Mybtn');//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捕获

• cancelable、preventDefault()
  只有cancelable为true时，才可以使用preventDefault()方法，来取消其默认行为。
  ie低版本通过：event.returnValue=false来实现

百度
  var Link=document.getElementById("myherf");
  Link.onclick=function(){
     event.preventDefault();
  }

这样单击百度时，并不会跳转到百度的页面。

• stopPropagation()
  立即停止事件在dom层次中的传播，即取消进一步的事件捕获或冒泡。
  ie通过event.cancelBubble=true;阻止传播

 function handler(){
     alert(event.type);
     event.stopPropagation();
 };

event对象只有在事件处理程序执行期间，才会存在，执行完毕即销毁。

---

2.IE中的事件对象

在IE8及其以前版本的浏览器是不兼容DOM2级的，但是还是可以使用dom0级的方法和自带的方法添加事件处理程序。
event：

var div=document.getElementById("test");
  div.onclick=function(){
      var event=window.event; //event为window对象
      alert(event.type);
  }

event 对象必须作为 window 对象的一个属性。event对象作为事件处理程序的内部对象。可以直接使用event.type。
html指定：event对象同样也包含于创建他的事件相关的属性和方法。

this：
html指定
html标签上直接使用this，那么等于正在处理事件的那个元素。如果是使用标签上指定函数，那么函数内的this指的是window。
dom0级方法中
this等于正在处理事件的那个元素。
使用IE的专属 attachEvent()
this等于window

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

属性方法	类型	读写	说明
cancelBubble	Blooean	读/写	默认值为false，但将其设置为true就可以取消事件冒泡，与DOM中stopPropagation()的方法作用相同
returnvalue	Blooean	读/写	默认值为true，但将其设置为fasle，就可以取消事件的默认行为，与DOM中的preventDefault()方法的作用相同
srcElement	Element	只读	事件的目标，与DOM中的target属性相同

• 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及以前只支持冒泡所以只能取消冒泡。

既然事件对象存在浏览器兼容问题，那么封装一个跨浏览器的事件对象就很有必要！
跨浏览器的事件对象我在前面的JavaScript事件——事件冒泡，事件捕获，事件绑定与解绑，事件委托的文章末尾已经给出过了。

谢谢观看！！！