JS学习之事件对象

JS学习之事件对象理解

在触发DOM上的某个事件时，会创建一个event对象，该对象中包含着与事件相关的信息，包括事件的类型，导致事件的元素以其他的与事件有关的信息。

DOM中的事件对象

兼容DOM的浏览器会在事件触发时传一个event对象到事件处理程序中。不论指定事件处理程序时使用哪种方法（DOM0级 或者 DOM2级)。

接下来我们看一个例子：

//假设有个按钮，id为btn

前面说了event对象中包含着与事件有关的信息，那么，不可缺少的，event对象会有一些特定的属性和方法。我们只介绍几个常用的。

• bubbles 表示事件是否冒泡
• currentTarget 表示事件处理程序当前正在处理事件的那个元素（简单来说，就是你把事件设置给的那个元素）
• detail 与事件有关的详细信息
• eventPhase 表示事件所处的阶段 1 表示事件捕获 2 表示“处于目标”阶段 3 表示事件冒泡
• target 事件的目标
• type 事件的类型

事件流：从页面接收事件的顺序
IE中的事件流叫做事件冒泡，即事件开始时由最具体的元素（文档中嵌套层次最深的元素）接收，逐级向上传播到最不具体的节点（文档）。
Netscape提出的一种事件流叫事件捕获，即事件由最不具体的节点先接收，然后逐级向下，知道最具体的节点。
DOM2级事件 规定的事件流分为三个阶段 ：事件捕获，处于目标，事件冒泡

在事件处理程序中，this的值始终等于currentTarget的值，而target的值为实际目标。

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()是在全局作用域中运行。