事件就是用户或浏览器自身执行的某种动作。诸如 click
、load
和 mouseover
,都是事件的名字。而响应某个事件的函数就叫做事件处理程序(或事件侦听器)。事件处理程序的名字以"on"
开头,因此 click
事件的事件处理程序就是 onclick
,load
事件的事件处理程序就是 onload
。为事件指定处理程序的方式有好几种。
1.HTML 事件处理程序
某个元素支持的每种事件,都可以使用一个与相应事件处理程序同名的 HTML 特性来指定。这个特性的值应该是能够执行的 JavaScript 代码。例如,要在按钮被单击时执行一些 JavaScript,可以像下面这样编写代码:
1 | <input type="button" value="Click Me" onclick="alert('Clicked')" /> |
当单击这个按钮时,就会显示一个警告框。这个操作是通过指定 onclick
特性并将一些 JavaScript代码作为它的值来定义的。由于这个值是 JavaScript,因此不能在其中使用未经转义的 HTML 语法字符,例如和号(&
)、双引号(""
)、小于号(<
)或大于号(>
)。为了避免使用 HTML 实体,这里使用了单引号。如果想要使用双引号,那么就要将代码改写成如下所示:
1 | <input type="button" value="Click Me" onclick="alert("Clicked")" /> |
在 HTML 中定义的事件处理程序可以包含要执行的具体动作,也可以调用在页面其他地方定义的脚本,如下面的例子所示:
1 | <script type="text/javascript"> |
在这个例子中,单击按钮就会调用 showMessage()
函数。这个函数是在一个独立的 <script>
元素中定义的,当然也可以被包含在一个外部文件中。事件处理程序中的代码在执行时,有权访问全局作用域中的任何代码。
这样指定事件处理程序具有一些独到之处。首先,这样会创建一个封装着元素属性值的函数。这个函数中有一个局部变量 event,也就是事件对象。
1 | <!-- 输出 "click" --> |
通过 event
变量,可以直接访问事件对象,你不用自己定义它,也不用从函数的参数列表中读取。在这个函数内部,this
值等于事件的目标元素,例如:
1 | <!-- 输出 "Click Me" --> |
关于这个动态创建的函数,另一个有意思的地方是它扩展作用域的方式。在这个函数内部,可以像访问局部变量一样访问 document
及该元素本身的成员。这个函数使用 with
像下面这样扩展作用域:
1 | function(){ |
如此一来,事件处理程序要访问自己的属性就简单多了。下面这行代码与前面的例子效果相同:
1 | <!-- 输出 "Click Me" --> |
如果当前元素是一个表单输入元素,则作用域中还会包含访问表单元素(父元素)的入口,这个函数就变成了如下所示:
1 | function(){ |
实际上,这样扩展作用域的方式,无非就是想让事件处理程序无需引用表单元素就能访问其他表单字段。例如:
1 | <form method="post"> |
在这个例子中,单击按钮会显示文本框中的文本。值得注意的是,这里直接引用了 username
元素。
不过,在 HTML 中指定事件处理程序有两个缺点。首先,存在一个时差问题。因为用户可能会在 HTML 元素一出现在页面上就触发相应的事件,但当时的事件处理程序有可能尚不具备执行条件。以前面的例子来说明,假设 showMessage()
函数是在按钮下方、页面的最底部定义的。如果用户在页面解析 showMessage()
函数之前就单击了按钮,就会引发错误。为此,很多 HTML 事件处理程序都会被封装在一个 try-catch
块中,以便错误不会浮出水面,如下面的例子所示:
1 | <input type="button" value="Click Me" onclick="try{showMessage();}catch(ex){}"> |
这样,如果在 showMessage()
函数有定义之前单击了按钮,用户将不会看到 JavaScript 错误,因为在浏览器有机会处理错误之前,错误就被捕获了。
另一个缺点是,这样扩展事件处理程序的作用域链在不同浏览器中会导致不同结果。不同 JavaScript 引擎遵循的标识符解析规则略有差异,很可能会在访问非限定对象成员时出错。
通过 HTML 指定事件处理程序的最后一个缺点是 HTML 与 JavaScript 代码紧密耦合。如果要更换事件处理程序,就要改动两个地方:HTML 代码和 JavaScript 代码。而这正是许多开发人员摒弃 HTML 事件处理程序,转而使用 JavaScript 指定事件处理程序的原因所在。
2.DOM0 级事件处理程序
通过 JavaScript 指定事件处理程序的传统方式,就是将一个函数赋值给一个事件处理程序属性。这种为事件处理程序赋值的方法是在第四代 Web 浏览器中出现的,而且至今仍然为所有现代浏览器所支持。原因一是简单,二是具有跨浏览器的优势。要使用 JavaScript 指定事件处理程序,首先必须取得一个要操作的对象的引用。
每个元素(包括 window 和 document)都有自己的事件处理程序属性,这些属性通常全部小写,例如 onclick
。将这种属性的值设置为一个函数,就可以指定事件处理程序,如下所示:
1 | var btn = document.getElementById("myBtn"); |
在此,我们通过文档对象取得了一个按钮的引用,然后为它指定了 onclick
事件处理程序。但要注意,在这些代码运行以前不会指定事件处理程序,因此如果这些代码在页面中位于按钮后面,就有可能在一段时间内怎么单击都没有反应。
使用 DOM0 级方法指定的事件处理程序被认为是元素的方法。因此,这时候的事件处理程序是在元素的作用域中运行;换句话说,程序中的 this
引用当前元素。来看一个例子。
1 | var btn = document.getElementById("myBtn"); |
单击按钮显示的是元素的 ID,这个 ID 是通过 this.id
取得的。不仅仅是 ID,实际上可以在事件处理程序中通过 this
访问元素的任何属性和方法。以这种方式添加的事件处理程序会在事件流的冒泡阶段被处理。
也可以删除通过 DOM0 级方法指定的事件处理程序,只要像下面这样将事件处理程序属性的值设置为 null 即可:
1 | btn.onclick = null; // 删除事件处理程序 |
将事件处理程序设置为 null
之后,再单击按钮将不会有任何动作发生。
3.DOM2 级事件处理程序
“DOM2级事件”定义了两个方法,用于处理指定和删除事件处理程序的操作:addEventListener()
和 removeEventListener()
。所有 DOM 节点中都包含这两个方法,并且它们都接受 3 个参数:要处理的事件名、作为事件处理程序的函数和一个布尔值。最后这个布尔值参数如果是 true
,表示在捕获阶段调用事件处理程序;如果是 false
,表示在冒泡阶段调用事件处理程序。
要在按钮上为 click
事件添加事件处理程序,可以使用下列代码:
1 | var btn = document.getElementById("myBtn"); |
上面的代码为一个按钮添加了 onclick
事件处理程序,而且该事件会在冒泡阶段被触发(因为最后一个参数是 false
)。与 DOM0 级方法一样,这里添加的事件处理程序也是在其依附的元素的作用域中运行。使用 DOM2 级方法添加事件处理程序的主要好处是可以添加多个事件处理程序。来看下面的例子。
1 | var btn = document.getElementById("myBtn"); |
这里为按钮添加了两个事件处理程序。这两个事件处理程序会按照添加它们的顺序触发,因此首先会显示元素的 ID,其次会显示 "Hello world!"
消息。
通过 addEventListener()
添加的事件处理程序只能使用 removeEventListener()
来移除;移除时传入的参数与添加处理程序时使用的参数相同。这也意味着通过 addEventListener()
添加的匿
名函数将无法移除,如下面的例子所示。
1 | var btn = document.getElementById("myBtn"); |
在这个例子中,我们使用 addEventListener()
添加了一个事件处理程序。虽然调用 removeEventListener()
时看似使用了相同的参数,但实际上,第二个参数与传入 addEventListener()
中的那一个是完全不同的函数。而传入 removeEventListener()
中的事件处理程序函数必须与传入 addEventListener()
中的相同,如下面的例子所示。
1 | var btn = document.getElementById("myBtn"); |
重写后的这个例子没有问题,是因为在 addEventListener()
和 removeEventListener()
中使用了相同的函数。
大多数情况下,都是将事件处理程序添加到事件流的冒泡阶段,这样可以最大限度地兼容各种浏览器。最好只在需要在事件到达目标之前截获它的时候将事件处理程序添加到捕获阶段。如果不是特别需要,我们不建议在事件捕获阶段注册事件处理程序。
IE9、Firefox、Safari、Chrome 和 Opera 支持 DOM2 级事件处理程序
4.IE事件处理程序
IE 实现了与 DOM 中类似的两个方法:attachEvent()
和 detachEvent()
。这两个方法接受相同的两个参数:事件处理程序名称与事件处理程序函数。由于 IE8 及更早版本只支持事件冒泡,所以通过 attachEvent()
添加的事件处理程序都会被添加到冒泡阶段。
要使用 attachEvent()
为按钮添加一个事件处理程序,可以使用以下代码。
1 | var btn = document.getElementById("myBtn"); |
注意,attachEvent()
的第一个参数是 "onclick"
,而非 DOM 的 addEventListener()
方法中的 "click"
。
在 IE 中使用 attachEvent()
与使用 DOM0 级方法的主要区别在于事件处理程序的作用域。在使用 DOM0 级方法的情况下,事件处理程序会在其所属元素的作用域内运行;在使用 attachEvent()
方法的情况下,事件处理程序会在全局作用域中运行,因此 this
等于 window
。来看下面的例子。
1 | var btn = document.getElementById("myBtn"); |
在编写跨浏览器的代码时,牢记这一区别非常重要。
与 addEventListener()
类似,attachEvent()
方法也可以用来为一个元素添加多个事件处理程序。来看下面的例子。
1 | var btn = document.getElementById("myBtn"); |
这里调用了两次 attachEvent()
,为同一个按钮添加了两个不同的事件处理程序。不过,与 DOM 方法不同的是,这些事件处理程序不是以添加它们的顺序执行,而是以相反的顺序被触发。单击这个例子中的按钮,首先看到的是 "Hello world!"
,然后才是 "Clicked"
。
使用 attachEvent()
添加的事件可以通过 detachEvent()
来移除,条件是必须提供相同的参数。与 DOM 方法一样,这也意味着添加的匿名函数将不能被移除。不过,只要能够将对相同函数的引用传给 detachEvent()
,就可以移除相应的事件处理程序。例如:
1 | var btn = document.getElementById("myBtn"); |
这个例子将保存在变量 handler
中的函数作为事件处理程序。因此,后面的 detachEvent()
可以使用相同的函数来移除事件处理程序。