JavaScript event对象

JavaScript event对象，有时，如果事件处理代码能够获知与检测到的事件相关的更多详细的信息，这真的会很有用。例如，如果按下了一个键，那么按下的是哪一个键呢?

DOM提供了一个event对象，其中包含了这种类型的信息。在一个事件处理函数中，可能会看到表示这个event的一个参数（通常用一个诸如event的名字来指定，或者直接用e来指定，尽管可以选择任何名称）。这个event对象将会自动传递给事件处理器。

假设有一个表单，并且已经告诉用户在某个字段中按下Escape键以打开帮助信息：

myInputField = document.getElementById("form_input_1");
function myFunction(e) {
    var kc = e.keyCode;
    if (kc == 27) {
        alert ("Possible values for this field are: .... ");
    }
}
myInputField.addEventListener(′onkeydown′, myFunction);

在这个示例中，event对象有一个keyCode属性，它表示按下了哪个键（keyCode值为27表示Escape键）。

阻止默认行为

event对象也有很多的方法。其中一个方法是preventDefault()方法，正如其名称所示，它阻止事件做其通常所做的事情。

考虑之前的一个示例：

var myLink = document.getElementById(′a1′);
function sayHello() {
    alert(′hello W3C!′);
}
myLink.addEventListener(′click′, sayHello);

假设想要修改一条消息以通知用户—不允许他们打开点击过的链接，则可以像这样提供一个可替换的函数：

function refuseAccess() {
    alert(′Sorry, but you are not yet authorized to follow this link.′);
}
myLink.addEventListener(′click′, refuseAccess);

遗憾的是，只要一个用户清除了警告消息，该链接的默认操作还是会出现。一旦点击了，就会打开该链接。

然而，可以通过调用该事件对象的preventDefault()方法来阻止这种结果：

var myLink = document.getElementById(′a1′);
function refuseAccess(e) {
    alert(′Sorry, but you are not yet authorized to follow this link.′);
    e.preventDefault();
}
myLink.addEventListener(′click′, refuseAccess);

事件冒泡和捕获

嵌套在另一个页面元素中的页面元素是很常见的，有时还会嵌套很多层。

试考虑这样一种情况，一个链接位于一个<span>元素中，而该<span>元素位于一个<div>元素中：

<div id="d1">
    <span id="sp1">
        <a href="https://www.google.com" id="a1">Google</a>
    </span>
</div>

给链接的点击事件以及它们的包含元素<span>和<div>元素都添加事件监听器，这也是很有可能的。当点击该链接时，应该按照什么样的顺序来触发事件处理器呢？

在这样一种情况下，处理事件的通常的方式称为冒泡（bubbling）。假设内部元素上的事件先发生，然后“向上冒泡”到外围的元素，在这个例子中，就是通过<span>元素，然后是<div>元素。那么，应该按照这个顺序来触发事件处理器。

然而，可以对addEventListener()使用一个可选的第三个参数，来改变这种安排。这个第三个参数可以接受布尔值true或false。如果没有提供第三个参数，就像当前这个示例的样子，JavaScript将会假设它拥有默认值false，并且冒泡将会先从最内层的元素开始发生，直到最后一个最外层的元素。

document.getElementById("a1").addEventListener(′click′, myFunction(), false);

然而，通过将第三个参数设置为true，可以使用所谓的捕获（capture）方法。使用捕获，将先触发和最外层的元素相关联的事件处理器，最后触发和最内存元素相关的事件处理器。

关闭冒泡和捕获

如果确定已经完全处理了一个事件，则可以很容易地阻止它进行任何进一步的冒泡或捕获，这可能会避免浏览器不必要地使用资源。event对象中有一个名为stopPropagation()的方法，它就是干这件事情的——阻止任何进一步的冒泡或捕获。如下是前面的捕获一个按键按下事件的例子：

myInputField = document.getElementById("form_input_1");
function myFunction(e) {
    var kc = e.keyCode;
    if (kc == 27) {
        alert ("Possible values for this field are: .... ");
    }
}
myInputField.addEventListener(′onkeydown′, myFunction);

可以看到，这段代码允许onkeydown事件冒泡到外层的元素，例如，冒泡到<form>元素，它可能包含myInputField。可以添加额外的一行代码来阻止这种行为发生：

myInputField = document.getElementById("form_input_1");
function myFunction(e) {
    var kc = e.keyCode;
    e.stopPropagation(); // 阻止进一步冒泡
    if (kc == 27) {
     alert ("Possible values for this field are: .... ");
        }
        }
     myInputField.addEventListener(′onkeydown′, myFunction);

在如下这行代码

e.stopPropagation(); // 阻止进一步冒泡

执行以后，对于事件e来说，就不会有进一步的冒泡发生。

提示：了解事件从哪里开始
有时，对于包围元素中的某个事件处理器来说，它可能需要知道一个事件最初是在哪一个嵌套的元素中检测到的。event对象的一个名为target的属性包含了这一信息，并且它在冒泡的过程中是不会改变的。

酷客网相关文章：

• JavaScript事件处理器
• JavaScript事件的类型
• JavaScript三点表示法
• JavaScript如何遍历数组