JS按钮点击事件|极客笔记

JS按钮点击事件

在网页开发中，按钮点击事件是非常常见的一种交互方式。通过JavaScript可以很方便地为按钮添加点击事件，实现各种功能。本文将详细介绍如何使用JavaScript为按钮添加点击事件。

添加按钮

首先，我们需要在HTML文件中添加一个按钮元素，示例代码如下：

<button id="myButton">点击我</button>

这里我们给按钮设置了一个id为”myButton”，以便之后通过JavaScript来获取这个按钮元素。接着我们来编写JavaScript代码为按钮添加点击事件。

添加点击事件

// 获取按钮元素
var button = document.getElementById("myButton");

// 添加点击事件
button.addEventListener("click", function() {
  alert("按钮被点击了");
});

以上代码首先通过getElementById方法获取了id为”myButton”的按钮元素，然后使用addEventListener方法为按钮添加了一个点击事件。当按钮被点击时，会弹出一个提示框显示”按钮被点击了”。

示例代码

下面是完整的示例代码，包括HTML和JavaScript部分：

<!DOCTYPE html>
<html>
<head>
  <title>按钮点击事件示例</title>
</head>
<body>

<button id="myButton">点击我</button>

<script>
  // 获取按钮元素
  var button = document.getElementById("myButton");

  // 添加点击事件
  button.addEventListener("click", function() {
    alert("按钮被点击了");
  });
</script>

</body>
</html>