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"}btn.addEventListener("click",function(event){ alert(event.type); //"click"},false);</script>前面说了event对象中包含着与事件有关的信息，那么，不可缺少的，event对象会有少量特定的属性和方法。我们只详情几个常用的。
- bubbles 表示事件能否冒泡
- currentType 表示事件解决程序当前正在解决事件的那个元素（简单来说，就是你把事件设置给的那个元素）
- 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>
1566032819(1).png
当我们点击最外面的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()是在全局作用域中运行。
