JS事件监听器 – JavaScript高级教程

上一章JavaScript教程请查看：JS类型转换

在本教程中，你将了解JavaScript中的DOM事件监听器。

理解事件监听器

事件监听器与事件处理程序类似，不同之处是可以为特定元素上的特定事件分配任意数量的事件监听器。

为了理解事件监听器是如何工作的，我们来看一个简单的例子。假设你已经创建了两个函数，并尝试使用onclick事件处理程序在单击按钮时执行这两个函数，如下面的示例所示:

<button id="myBtn">点击</button>
 
<script>
// 定义自定义函数
function firstFunction() {
    alert("第一个函数执行成功!");
}
 
function secondFunction() {
    alert("第二个函数执行成功");
}
 
// 选择按钮元素
var btn = document.getElementById("myBtn");
 
// 将事件处理程序分配给按钮
btn.onclick = firstFunction;
btn.onclick = secondFunction; // 这个覆盖了第一个
</script>

如果你运行上面的例子中, 单击按钮元素, 只有secondFunction()将被执行, 因为分配覆盖第一个第二个事件处理程序。

这是这个经典的事件模型的主要缺点只能分配一个事件处理程序到一个特定的事件在一个特定的元素即一个函数/事件/元素。处理这个问题引入W3C事件模型更加灵活称为事件监听器器。

任何HTML元素可以有多个事件侦听器,因此可以分配多个功能相同的事件同样的元素, 如下所示的例子:

<button id="myBtn">点击</button>
 
<script>
// 定义自定义函数
function firstFunction() {
    alert("第一个函数执行成功!");
}
 
function secondFunction() {
    alert("第二个函数执行成功");
}
 
// 选择按钮元素
var btn = document.getElementById("myBtn");
 
// ，为按钮分配事件监听器
btn.addEventListener("click", firstFunction);
btn.addEventListener("click", secondFunction);

现在，如果运行上面的示例并单击按钮，两个函数都将执行。

除了事件类型和侦听器函数参数外，addEventListener()还接受一个布尔参数useCapture。这是一个可选参数，指定是使用事件冒泡还是事件捕获。它的基本语法是:

target.addEventListener(event, function, useCapture);

事件冒泡和捕获是传播事件的两种方式，我们将在接下来的章节中详细学习事件传播。

为不同的事件类型添加事件监听器

与事件处理程序一样，可以为同一元素上的不同事件类型分配不同的事件监听器。下面的示例将为按钮元素的“click”、“mouseover”和“mouseout”事件分配不同的事件侦听器函数。

<button id="myBtn">点击</button>
 
<script>
// 选择按钮元素
var btn = document.getElementById("myBtn");
 
// 定义自定义函数
function sayHello() {
    alert("Hi, 你好不?");
}
 
function setHoverColor() {
    btn.style.background = "yellow";
}
 
function setNormalColor() {
    btn.style.background = "";
}
 
// 将事件监听器分配给按钮
btn.addEventListener("click", sayHello);
btn.addEventListener("mouseover", setHoverColor);
btn.addEventListener("mouseout", setNormalColor);
</script>

向窗口对象添加事件监听器

addEventListener()方法允许你向任何HTML DOM元素、文档对象、窗口对象或任何其他支持事件的对象(例如XMLHttpRequest对象）。下面是一个将事件监听器附加到窗口“调整大小”事件的例子:

<div id="result"></div>
 
<script>
// 定义事件监听器函数
function displayWindowSize() {
    var w = window.innerWidth;
    var h = window.innerHeight;
    var size = "Width: " + w + ", " + "Height: " + h;
    document.getElementById("result").innerHTML = size;
}
 
// 将事件监听器函数附加到窗口的调整大小事件
window.addEventListener("resize", displayWindowSize);
</script>

删除事件监听器

你可以使用removeEventListener()方法来删除先前与addEventListener()连接的事件监听器。这里有一个例子：

<button id="myBtn">点击</button>
 
<script> 
// 定义函数
function greetWorld() {
    alert("Hello World!");
}
 
// 选择按钮元素
var btn = document.getElementById("myBtn");
 
// 添加事件监听器
btn.addEventListener("click", greetWorld);
 
// 删除事件监听器
btn.removeEventListener("click", greetWorld);
</script>

注意: 所有主流浏览器都支持addEventListener()和removeEventListener()方法。ie8及更早版本不支持，Opera 6.0及更早版本也不支持。