可以说,网页跟事件是分不开的。事件是一件太平常的事情,让很多人很多时候会忽略它的存在。然而我们还是很有必要了解一下事件。
事件就是用户或浏览器自身执行的某种动作。比如常见的click,load和mouseover,都是事件。相应某个事件的函数叫做事件处理程序,也叫事件监听器。事件监听器以on开头,如常见的onclick。
监听事件
监听事件的方法有多种:
html事件监听器
也就是常见的HTML内联属性的写法。即用与相应事件监听器同名的html特性来指定监听事件。
<div onclick="alert(‘Clicked‘)">
值得注意的是,事件监听器中的代码再执行时,有权访问全局作用域中的任何代码,所以在onclick里,我们可以使用定义在全局作用域中的javascript函数。
还有,我们可以通过event变量,访问到事件对象,而不用定义它。
<input type="button" value="Click Me" onclick="alert(event.type)">
而,在html中指定事件监听器有几个缺点:
- 时差问题。考虑一种情况:在我们触发某个事件时,可能事件处理程序中尚不具备执行条件,如用到的函数还未被解析。
- 耦合问题。这样的写法,html和JavaScript代码耦合了,需要修改时,也许需要修改多个地方。
DOM属性绑定
即将一个函数赋值给一个事件处理程序属性。
例子:
var btn = document.getElementById("myBtn");
btn.onclick = function(){
alert("Clicked");
};
首先我们要取得对象的引用,然后才可以为它指定事件处理程序。
通过将事件处理程序属性的值设置为null可以删除事件处理程序。
通过addEventListener()和removeEventListener()
el.addEventListener(eventName,callback,flag)
所有的DOM节点都包含这两个方法,它有三个参数,分别是要处理的事件名,作为事件处理程序的函数,和一个布尔值(true和false分别表示在捕获阶段和冒泡阶段调用事件处理程序,默认是false)。
var btn = document.getElementsByTagName(‘button‘);
btn[0].addEventListener(‘click‘, function() {
alert(‘Clicked‘);
}, false);
值得注意的是,这种方法可以添加多个事件处理程序。通过这种方式添加的事件处理程序也只能通过removeEventListener()来去掉。特殊的是,如果我们指定事件处理程序时用的是匿名函数,将无法去除这个事件处理程序。