简单介绍 JavaScript 中的事件

最新推荐文章于 2024-08-27 15:59:21 发布

kllo__

最新推荐文章于 2024-08-27 15:59:21 发布

阅读量445

点赞数

分类专栏： javascript 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/kllo__/article/details/122874125

版权

javascript 专栏收录该内容

56 篇文章 0 订阅

订阅专栏

为了增加交互性，页面应该对用户的操作做出反应：点击按钮、填写表单等。用户的动作触发了 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);

kllo__

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简单介绍 JavaScript 中的事件

为了增加交互性，页面应该对用户的操作做出反应：点击按钮、填写表单等。用户的动作触发了 JavaScript 编写的用来处理的事件。这种编写程序的方式被称为事件驱动编程。它普遍用于程序需要与用户进行交互的时候。第一个例子点击按钮，弹出“hello”<html> <head> </head> <body> <button id="myButton">Click me!</button>...
复制链接

扫一扫

专栏目录