JavaScript事件处理程序的最新功能是事件监听。事件监听监视元素上的事件。
我们将使用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); });测试看看‹/›
此外,您可以addEventListener()在文档和窗口对象上使用。
本示例使用以下addEventListener()方法将click事件附加到文档:
document.addEventListener("click", function() { alert("Hello World!!!"); });测试看看‹/›
本示例使用该addEventListener()方法将调整大小(resize)事件附加到窗口:
window.addEventListener("resize", function() { box.innerHTML = Math.random(); });测试看看‹/›
当前,事件监听是处理JavaScript中事件的最常见和首选方式。
也可以使用该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事件对象参考