JS学习之事件对象理解
在触发DOM上的某个事件时，会创建一个event对象，该对象中包含着与事件相关的信息，包括事件的类型，导致事件的元素以其他的与事件有关的信息。
DOM中的事件对象
兼容DOM的浏览器会在事件触发时传一个event对象到事件处理程序中。不论指定事件处理程序时使用哪种方法（DOM0级 或者 DOM2级)。
接下来我们看一个例子：
//假设有个按钮，id为btn
<script>
var btn = document.getElementById("btn");
//DOM0级
btn.onclick = function (event)
{
alert(event.type); //"click"
}
//DOM2级
btn.addEventListener("click",function(event)
{
alert(event.type); //"click"
},false);
</script>
前面说了event对象中包含着与事件有关的信息，那么，不可缺少的，event对象会有一些特定的属性和方法。我们只介绍几个常用的。
- bubbles 表示事件是否冒泡
- currentTarget 表示事件处理程序当前正在处理事件的那个元素（简单来说，就是你把事件设置给的那个元素）
- detail 与事件有关的详细信息
- eventPhase 表示事件所处的阶段 1 表示事件捕获 2 表示“处于目标”阶段 3 表示事件冒泡
- target 事件的目标
- type 事件的类型
事件流：从页面接收事件的顺序
IE中的事件流叫做事件冒泡，即事件开始时由最具体的元素（文档中嵌套层次最深的元素）接收，逐级向上传播到最不具体的节点（文档）。
Netscape提出的一种事件流叫事件捕获，即事件由最不具体的节点先接收，然后逐级向下，知道最具体的节点。
DOM2级事件 规定的事件流分为三个阶段 ：事件捕获，处于目标，事件冒泡
在事件处理程序中，this的值始终等于currentTarget的值，而target的值为实际目标。
<div id = "Div" class="Father">
<div id = "son" class="Son">
<input type = "number" value = "0" id = "Input" class="input">
</div>
</div>
<script type="text/javascript">
var div = document.getElementById("Div");
div.addEventListener("click",function(event)
{
alert(this === event.target);
})
</script>
当我们点击最外面的div时，结果显示为true。当点击内部的两个div块时，结果均是显示false.
这是因为，正如上面所说，target 是事件的实际目标，而this 等于currentTarget。currentTarget的值是由事件处理程序的对象决定的,在这段代码中，我们把onclick事件添加到最外面的div块上面，因此，currentTarget的值为div (或者 document.getElementById("Div"))
也就是说，只有直接将事件处理程序指定给了目标元素，则this, currentTarget, target的值相同
var btn = document.getElementById("btn");
btn.onclick = function(event)
{
//省略代码
}
IE中的事件对象
与在DOM中访问event对象不同，IE中访问event对象有几种不同的方式，取决于指定事件处理程序的方式。当通过DOM0级方式添加事件处理程序时，event对象作为window对象的一个属性存在。
var btn = document.getElementById("btn");
btn.onclick = function()
{
var event = window.event;
alert(event.type); //"click"
}
IE中的事件处理函数：attachEvent()，detachEvent();
当使用attachEvent()来添加事件处理程序时，则会有一个event对象作为参数被传入事件处理函数中。当然也可以用window对象来访问event对象。
btn.attachEvent("onclick",function(event)
{
//省略代码
});
可以看到这里我们的匿名函数是有一个参数的：event。此处要注意：attachEvent()函数第一个参数是onclick而不是click
IE中event对象的属性和方法：
- cancelBubble 默认为false,设置为true即可取消事件冒泡（IE中不支持事件被捕获，因此只能取消事件冒泡）
- type 事件的类型
- srcElement 事件的目标（与DOM中的target相同）
注意：
- 采用DOM0级添加事件，事件处理程序均是在其依附元素的作用域下运行。
- 对于DOM2级方式添加事件，DOM2级方法addEventListener(), removeEventListener()是在其依附元素的作用域中运行，而对于IE来说，attachEvent()，detachEvent()是在全局作用域中运行。
