为了增加交互性,页面应该对用户的操作做出反应:点击按钮、填写表单等。用户的动作触发了 JavaScript 编写的用来处理的事件。这种编写程序的方式被称为事件驱动编程。它普遍用于程序需要与用户进行交互的时候。
第一个例子
点击按钮,弹出“hello”
<html>
<head>
</head>
<body>
<button id="myButton">Click me!</button>
</body>
</html>
js 代码:
const showMessage = () => {
alert("Hello!");
};
// Access the button
const buttonElement = document.getElementById("myButton");
// Listen to the "click" event
buttonElement.addEventListener("click", showMessage);
网页效果:
点击按钮的效果:
添加事件监听器
在调用 DOM 元素时,addEventListener() 方法会为特定事件添加一个处理程序。该方法以事件类型和相关函数作为参数。每当 DOM 元素出现相应类型的事件时,将调用此函数。为了得到相同的结果,可以使用匿名函数更简洁地重写上述 JavaScript 代码。
下面的代码使用匿名函数对上面的代码进行了重写,得到了相同的结果。
// Show a message when the user clicks on the button
document.getElementById("myButton").addEventListener("click", () => {
alert("Hello!");
});
移除事件监听器
在某些特殊的情况下,你可能希望停止对 DOM 元素上的时间做出反应。为了实现这个目的,可以在元素上调用 removeEventListener() 方法,它将用于处理时间的函数作为参数传递。
注意:这只能在处理函数不是匿名函数的情况下使用
// Show a message when the user clicks on the button
document.getElementById("myButton").addEventListener("click", () => {
alert("Hello!");
});
// Remove the handler for the click event
buttonElement.removeEventListener("click", showMessage);