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的属性包含了这一信息,并且它在冒泡的过程中是不会改变的。

酷客网相关文章:

赞(0)

评论 抢沙发

评论前必须登录!