编辑这个页面须要登录或更高权限！

JavaScript 事件监听

JavaScript事件处理程序的最新功能是事件监听。事件监听监视元素上的事件。

我们将使用addEventListener()方法来代替将事件直接分配给元素上的属性。

addEventListener()方法

addEventListener()方法将事件处理程序附加到指定的元素。

我们可以重写随机颜色示例（来自上一章），如下所示：

document.querySelector("button").addEventListener("click", bgChange);

function bgChange() {
   let color = "rgb(" + random(255) + "," + random(255) + "," + random(255) + ")";
   document.body.style.backgroundColor = color;
}
测试看看‹/›

我们仍然使用与以前相同的bgChange()函数。我们将addEventListener()方法附加到按钮上。

addEventListener() 接受两个必填参数-要监听的事件和监听器回调函数。

此方法与事件处理程序属性（上一章）相似，但是语法明显不同。

语法：

element.addEventListener(event, listener, useCapture)

第一个参数是事件的类型（例如“ click”或“ mousemove”）。

第二个参数是事件发生时我们要调用的监听函数。

第三个参数是一个布尔值，指定是使用事件冒泡还是使用事件捕获。此参数是可选的。

注意，不要为事件使用“ on”前缀。使用“ click”代替“ onclick”。

将事件监听添加到元素

请注意，将所有代码放入addEventListener()方法中的匿名函数中是非常合适的，如下所示：

let para = document.querySelector("#para");

para.addEventListener("click", function() {
this.innerHTML = "Hello world";
});
测试看看‹/›

您还可以引用外部“命名”函数：

let para = document.querySelector("#para");
para.addEventListener("click", changeText);

function changeText() {
   para.innerHTML = "Hello world";
}
测试看看‹/›

将多个事件监听添加到同一元素

乍一看，事件监听似乎与事件处理程序属性非常相似，但是它们有一些优点。我们可以在同一元素上设置多个事件监听，如以下示例所示：

document.querySelector("button").addEventListener("click", myFunc);
document.querySelector("button").addEventListener("click", anotherFunc);
测试看看‹/›

我们可以向元素添加不同类型的事件：

document.querySelector("button").addEventListener("mouseenter", myFunc1);
document.querySelector("button").addEventListener("click", myFunc2);
document.querySelector("button").addEventListener("mouseout", myFunc3);
测试看看‹/›

传递参数

传递参数值时，请使用匿名函数，该函数使用参数调用指定的函数：

var btn = document.querySelector("button");
btn.addEventListener("click", function() {
myFunc(x, y);
});
测试看看‹/›

将事件监听添加到Window对象

此外，您可以addEventListener()在文档和窗口对象上使用。

本示例使用以下addEventListener()方法将click事件附加到文档：

document.addEventListener("click", function() {
alert("Hello World!!!");
});
测试看看‹/›

本示例使用该addEventListener()方法将调整大小(resize)事件附加到窗口：

window.addEventListener("resize", function() {
box.innerHTML = Math.random();
});
测试看看‹/›

当前，事件监听是处理JavaScript中事件的最常见和首选方式。

removeEventListener()方法

也可以使用该removeEventListener()方法从元素中删除一个或所有事件。

var box = document.getElementById("para");

// Attach an event handler to a P element with id="para"
box.addEventListener("mousemove", myFunc);

// Remove the event handler from a P element with id="para"
box.removeEventListener("mousemove", myFunc);
测试看看‹/›

第一个参数是事件的类型（例如“ click”或“ mousemove”）。

第二个参数是事件发生时我们要调用的函数。

更多阅读

JavaScript参考：HTML DOM事件对象参考

JavaScript 事件传播JavaScript 事件(Events)

JavaScript菜鸟教程
JavaScript 对象
JavaScript 函数
JS HTML DOM
JS 浏览器BOM
AJAX 菜鸟教程
JavaScript 参考手册