JS中的事件对象

在触发DOM上的某个事件时，会产生一个事件对象event，这个对象包括着所有与事件有关的信息。包括导致事件的元素，事件的类型及其他与特定事件相关的信息。例如，鼠标操作导致的事件对象中，会包含鼠标位置的信息，而键盘操作导致的事件中，会包含与按下的键有关的信息。所有浏览器都支持event事件，但支持方式不同。

DOM中得事件对象

var btn=document.getElementById("mybtn");
btn.onclick=function(event){
alert(event.type);
};
btn.addEventListener("click",function(event){
alert(event.type)
})

这两个事件处理程序都引入了一个event对象，弹出由event.type实行表示的事件类型。event对象包含与创建他的特定事件有关的属性和方法。

bubbles:表明事件是否冒泡

cancelable：表明是否可以取消事件的默认行为

currentTarget：其事件处理程序当前正在处理时间的那个元素

eventPhase：调用事件处理程序的阶段：1表示捕获阶段，2表示“处于目标”，3表示冒泡阶段

preventDefault():取消事件的默认行为，如果cancelable为true

stopPropagation():取消事件进一步捕获或冒泡，如果bubbles为true

target:事件的目标

type:被触发事件的类型

① currentTarget，target和this

这里最头疼的就是currentTarget，target和this的区别。

在事件处理程序中，this始终指向currentTarget的值，而target则只包含事件的实际目标。来看下面的例子：

//html文档
<div id="box" style="background-color:red ; width:100px; height:100px;">
<input type="button" value="提交"  id="mybtn"/>

//js
var div=document.getElementById("box");
div.onclick=function(event){
alert("div上的事件触发了。")

alert("currentTraget等于div吗？ "+(event.currentTarget===div))

alert("target等于mybtn吗？ "+(event.target===document.getElementById("mybtn")))

alert("this等于div吗？ "+(this===div))
}

当我点击提交按钮后，按钮上没有注册事件处理程序，通过事件冒泡向上寻找到div上找到事件，分别弹出 “div上的事件触发了”“true”“true”“true”。由于click事件的目标是按钮，而事件在div上绑定，因此this和 currentTraget都等于div,而target等于按钮对象。

当我点击红色区域后，分别弹出“div上的事件触发了”“true”“false”“true”。这里改变的是target，由于事件仍然绑定在div上，所以this和 currentTraget不变，而事件的目标变化了，变成个刚才点击的红色区域，也就是div区域，所以target等于div,弹出false。

②type属性

通过type属性，可以通过一个函数处理多个事件：

var btn=document.getElementById("mybtn");
var hander=function(event){
switch(event.type){
case "click":
alert("clicked");
break;
case "mouseover":
event.target.style.backgroundColor="blue";
break;
case "mouseout":
event.target.style.backgroundColor="";
break;
}
}
btn.onclick=hander;
btn.onmouseover=hander;
btn.onmouseout=hander;

这个例子定义了一个名为hander的函数，用于处理三种事件：click,mouseover和mouseout。当鼠标移动到按钮上时，触发mouseover事件，背景变成蓝色；点击按钮触发click事件，弹出“clicked”, 鼠标移除按钮，触发mouseout事件，恢复原样。

③ perventDefault()阻止特定事件的默认行为

例如：点击a标签后会打开另一个链接，通过perventDefault(）可以阻止打开新链接。

var link=document.getElementById("aid");
link.onclick=function(event){
event.preventDefault();
}

注意：只有cancelable属性设置为true的事件才可以使用。

④stopPropagation()立即停止时间在DOM层次的传播

stopPropagation()立即停止时间在DOM层次的传播，即取消进一步的事件捕获或冒泡。

//stopPropagation阻止事件捕获或冒泡
var btn=document.getElementById("mybtn");
btn.onclick=function(event){
alert("clicked");
alert(event.target.value)//获取发生事件元素的value
//event.preventDefault();  //不行！
event.stopPropagation();
}   */

如果不调用stopPropagation()，事件冒泡向上寻找到div，触发绑定在div上的事件。调用后会停止冒泡，结果不会弹出 “div上的事件触发了”。

**

2.IE中的事件对象

**

**

3.跨浏览器的事件对象

**