JavaScript 如何在点击某个类别的按钮时弹出警报？

在 JavaScript 中，警报是一个对话框，当需要通知用户一些重要信息或警告时会显示。它可能包含一条消息和一个确定按钮。单击“确定”按钮将关闭对话框。

点击按钮会触发事件处理程序，该处理程序调用一个函数，指示浏览器显示带有消息的对话框。在本文中，我们将探讨几种在用户点击按钮时显示警报的方法。

例如，单击下面的按钮以获取警报：

使用内联事件监听器

在这种方法中，我们将事件监听器直接嵌入到 HTML 元素中。这种类型的事件监听器以“on”前缀开头。在这里，我们使用onclick()事件在点击按钮时获取警报。

示例

使用内联事件监听器显示警报的 JavaScript 程序如下：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initialscale=1.0">
   <title>Alert</title>
</head>
<body>
   <button onclick="alert('Demo Alert Message')">Click Button</button>
</body>
</html>

运行上述代码后，将出现一个按钮，点击该按钮将弹出警报窗口。

使用 DOM 事件监听器

在这里，我们使用 addEventListener() 方法来关联事件处理程序（在本例中为警报）。当我们使用此方法时，JavaScript 代码将与 HTML 标记分离。

示例

让我们看看实际演示：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initialscale=1.0">
   <title>Document</title>
</head>
<body>
   <button class="clickTheButton">Click to get an alert</button>
   <script>
      for (var clickButton of
      document.getElementsByClassName("clickTheButton"))
      clickButton.addEventListener("click", alertMeessage);
      function alertMeessage() {
         alert("You have clicked the button");
      }
   </script>
</body>
</html>

单击编辑并运行后，将显示一个按钮。单击该按钮将显示警报。

更新于：2024年10月4日

1K+ 次浏览

启动您的 职业生涯

完成课程获得认证

开始学习
广告