Question

我正在尝试将事件侦听器添加到HTML文档中的所有按钮。按下按钮时，我想显示一个简单的警报。我的代码目前还没有工作，如下：

var bns = document.getElementsByTagName("button");

function addtoev() {
  for (i = 0; i < bns.length; i++) {
    bns[i].addEventListener("click", function() {
        alert("you clicked"); 
    });
   }
}

通过调用方法或删除功能线，它在JSFiddle中的确如此，但它仍未在Chrome中执行（弹出窗口未被阻止）。我发布我的HTML，嵌套在表格中的按钮是否可能与单独的按钮不同？

  <tr>
  <td>John</td>
  <td>Doe</td>
  <td>john@doe.us</td>
   <td><button class="btn btn-default">X</button></td>
  </tr>

Answer 1

你需要监听load事件，如下所示：

function addtoev() {
  var bns = document.getElementsByTagName("button");
  for (i = 0; i < bns.length; i++) {
    bns[i].addEventListener("click", function() {
    alert("you clicked"); });
  }
}

window.addEventListener("load",function() {
  addtoev();
});

Answer 2

也许你应该调用方法addtoev()

Answer 3

使用jQuery：JS Fiddle

var bns = $("button");
bns.on("click", function() {
    alert("you clicked");
});

Answer 4

更好地使用JQuery：

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
        <input type="button" id="button1" value="button1" />
        <div>
            <input type="button" id="button2" value="button2" />
        </div>
        <input type="button" id="button3" value="button3" />

        <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script>
            $(":button").click(function (event) {
                alert(event.target.id + ' is click!');
            });
        </script>
    </body>
    </html>

Answer 5

似乎我的问题源于我在加载所有按钮之前在头文件中加载我的JS文件这一事实。我现在通过在身体末端加载我的JS来实现它。

Javascript，为所有按钮添加事件监听器

5 个答案: