JavaScript------使用addEventListener

最新推荐文章于 2024-04-26 15:38:04 发布

原创最新推荐文章于 2024-04-26 15:38:04 发布 · 482 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript

本文详细介绍了如何使用JavaScript的querySelectorAll方法选择页面上的所有按钮，并通过addEventListener为每个按钮添加点击事件处理器，实现动态绑定效果，无论按钮数量如何变化，代码可维护性高。

querySelectorAll() 函数，可以选择页面上的所有按钮。

然后可以循环遍历这些按钮，使用 addEventListener() 为每个按钮分配一个处理器。

const buttons = document.querySelectorAll("button");

for (let i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener("click", createParagraph);
}

这样写会对页面上所有按钮生效，无论多少个，或添加或删除，完全无需修改 JavaScript 代码。

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
           document.addEventListener("DOMContentLoaded", () => {
              function createParagraph() {
              const para = document.createElement("p");
              para.textContent = "你点击了按钮！";
              document.body.appendChild(para);
              }
              const buttons = document.querySelectorAll("button");
              for (const button of buttons) {
                    button.addEventListener("click", createParagraph);
              }
});

    const buttons = document.querySelectorAll("button");
    for (let i = 0; i < buttons.length; i++) {
         buttons[i].addEventListener("click", createParagraph);
    }
    </script>
</head>
<body>
    <p>拜拜了</p>
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
</body>
</html>

结果展示：