JavaScript事件处理器

JavaScript事件处理器,说到事件处理器(event handler),意味着什么呢?事件处理器是当JavaScript检测到一个特定的事件时所执行的一段代码。如下是一些例子:

  • 当用户的鼠标悬停在输入按钮上时,该按钮的颜色改变了。
  • 当用户按下P键时,程序的执行暂停了。
  • 当页面完成加载时,菜单元素变得可见了。

还有几种不同的方式来给程序添加事件处理器。我们从最早的和最简单的开始,依次介绍这些方法。

内联事件处理器

当JavaScript初次引入Web页面时,事件处理器通常会内联地添加给页面元素,内联事件处理器(Inline event handler)通常是如下的形式:

handlername = "JavaScript code"

它们通常还会插入到一个HTML元素的开始标签中,如下所示:

<a href="https://www.coolcou.com/" onclick="alert(′hello coolcou!′)">World Wide Web Consortium (coolcou)</a>

提示:不同的方法
不同的事件处理器对于各种HTML标签有效。尽管onclick可以插入到很多的HTML标签中,但诸如onload这样的事件处理器则只能用于<body><img>元素。

作为DOM对象的属性的事件处理器

这种分配事件处理器的方法对于较小的示例也有效,但是它也有一些重要的缺点。最主要的一个缺点是,它将事物的外观(通常称为其表现层)和事物所做的事情混合到一起。这可能使得Web页面成为一个难以维护和更新的梦魇。

还有一种较好的方法来分配事件处理器。每个DOM对象都将它能够接受的事件存储为对象自身的属性。可以通过编程来把事件处理器分配给这些对象属性,而不是在HTML标签中直接将事件处理器编写到代码中。
这里来看一个简单的例子,首先,是在HTML页面中:

<a href="https://www.coolcou.com/" id="a1">World Wide Web Consortium (coolcou)</a>

如下是它在JavaScript代码中的样子:

var myLink = document.getElementById(′a1′);
myLink.onclick = function() {
    alert(′hello coolcou!′);
}

在前面的示例中,我们通过元素的id值来选择元素,然后用一个匿名函数把事件处理器代码添加给该元素。实际上,通过一个具名函数来添加该事件处理器也应该是同样有效的(只是更加烦琐一些):

var myLink = document.getElementById(′a1′);
function sayHello() {
    alert(′hello coolcou!′);
}
myLink.onclick = sayHello;

通过这种方式添加事件处理器,把事件处理器的所有代码都移入页面的JavaScript中,保持了HTML页面的干净和整洁。但是,还有一种新的、更加灵活的方式来添加事件处理器,那就是使用addEventListener()。

使用addEventListener()

前文介绍的两种方法都工作得很好,几乎每一种现代的浏览器都支持它们,并且几乎在整个Web中都在使用这两种方法。即便如此,有些方面还是可以做些改进。

在想要给一个元素添加多个事件处理器时,这些改进中最重要的一个就特别突出了。例如,可能想要提醒用户并且在每次点击一个按钮时都增加一个计数器。可以通过编写一个简单的事件处理器做到这一点,这个处理器两个函数都调用,但是这样会使代码快速变得很不整齐且难以维护。

现代浏览器支持一个名为addEventListener新的、更加灵活的方法。可以在所指定的任何DOM节点上调用addEventListener方法(而不只是页面元素上),并且当一个指定的事件发生时,触发所要执行的代码。通过添加多个这种类型的事件监听器,可以指定任意多个不同的事件。用addEventListener重新编写前面的示例,如下所示:

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

在addEventListener()函数内部,指定了第一个参数,这是我们想要注册这个处理器的事件的名称;第二个参数则指定了事件处理函数,我们想要运行该函数以响应被检测到的事件。

提示:回调函数
作为参数传递给另一个函数,以便随后在其他函数之中调用,像这样的一个函数,通常称为回调函数(callback function)。

removeEventListener()
还有另一个函数removeEventListener(),它将删除之前添加的一个监听器。例如,要删除前面示例中设置的监听器,可以使用

myLink.removeEventListener(′click′, sayHello);

使用和任何当前注册的监听器都不匹配的参数来调用removeEventListener(),并不会产生一个错误,但是这没有任何效果。

添加多个监听器

让我们回头来看看前面的示例:

var myLink = document.getElementById(′a1′);
function sayHello() {
    alert(′hello coolcou!′);
}
myLink.onclick = sayHello;

现在,假设想要在每次点击该链接时都提醒用户并且增加一个计时器。假设曾经尝试通过以下方式来添加两个事件监听器:

myLink.onclick = sayHello;
myLink.onclick = updateCounter;

第二条语句将会有效地覆盖前一行代码,使得在点击该链接时,updateCounter()作为唯一会触发的函数。然而,也可以使用addEventListener():

myLink.addEventListener(′click′, sayHello);
myLink.addEventListener(′click′, updateCounter);

通过这种方式,这两个事件处理器都将会执行。

提示:针对较旧的浏览器编写代码
如果需要支持较旧的浏览器(Internet Explorer 8之前的那些浏览器),你可能会遇到问题。这些较旧的浏览器使用与当前的浏览器不同的事件模式。如果必须支持这些浏览器的话,处理它们的一种最容易的方法是使用诸如jQuery这样的库,这个库设计用来消除掉跨浏览器的差异。

酷客网相关文章:

赞(0)

评论 抢沙发

评论前必须登录!