Javascript，为所有按钮添加事件监听器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33724201/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript, add event listener to all buttons
提问by eabates
I am attempting to add event listeners to all of the buttons in an HTML document. When a button is pressed I'd like to display a simple alert. My code, which isn't working at the moment, follows:
我正在尝试向 HTML 文档中的所有按钮添加事件侦听器。当按下按钮时，我想显示一个简单的警报。我的代码目前不起作用，如下所示：
var bns = document.getElementsByTagName("button");
function addtoev() {
for (i = 0; i < bns.length; i++) {
bns[i].addEventListener("click", function() {
alert("you clicked");
});
}
}
It definitely works as such in JSFiddle by calling the method or eliminating the function line, but it's still not executing in Chrome (popups are not blocked). I post my HTML, is it possible that buttons nested in a table need to be referenced differently than buttons alone?
通过调用方法或消除函数行，它在 JSFiddle 中确实可以正常工作，但它仍然没有在 Chrome 中执行（弹出窗口没有被阻止）。我发布了我的 HTML，嵌套在表格中的按钮是否可能需要与单独的按钮不同地引用？
<tr>
<td>John</td>
<td>Doe</td>
<td>[email protected]</td>
<td><button class="btn btn-default">X</button></td>
</tr>
采纳答案by eabates
It seems that my problems were stemming from the fact that I was loading my JS file in the header, before all of the buttons were loading. I now have it working by loading my JS at the end of the body.
我的问题似乎源于这样一个事实，即在加载所有按钮之前，我正在标题中加载我的 JS 文件。我现在通过在正文的末尾加载我的 JS 来让它工作。
回答by nloomans
you need to listen of the load event, like this:
您需要监听 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();
});
回答by YongZPub
better to use JQuery:
最好使用 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>回答by Olivier Boissé
Maybe you should call the method addtoev()
也许你应该调用这个方法 addtoev()
