Javascript 将 onclick 事件附加到所有链接
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8492344/
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 attach an onclick event to all links
提问by John Smith
I want to attach a function on every link on the site to change a parameter.
我想在网站上的每个链接上附加一个函数来更改参数。
How can I do this without jQuery?
如果没有 jQuery，我怎么能做到这一点？
How do I traverse every link (it might be a DOM item) and call a function on them?
我如何遍历每个链接（它可能是一个 DOM 项）并在它们上调用一个函数？
回答by zatatatata
It's weird that nobody offered an alternative solution that uses event bubbling
奇怪的是没有人提供使用事件冒泡的替代解决方案
function callback(e) {
var e = window.e || e;
if (e.target.tagName !== 'A')
return;
// Do something
}
if (document.addEventListener)
document.addEventListener('click', callback, false);
else
document.attachEvent('onclick', callback);
The pros of this solution is that when you dynamically add another anchor, you don't need to specifically bind an event to it, so all links will always fire this, even if they were added after these lines were executed. This is in contrast to all the other solutions posted so far. This solution is also more optimal when you have a large number of links on your page.
这个解决方案的优点是，当你动态添加另一个锚点时，你不需要专门绑定一个事件到它，所以所有的链接总是会触发这个，即使它们是在这些行被执行之后添加的。这与迄今为止发布的所有其他解决方案形成对比。当您的页面上有大量链接时，此解决方案也更为理想。
回答by Joe
getElementsByTagNameis supported by all modern browsers and all the way back to IE 6
所有现代浏览器都支持getElementsByTagName并且一直回到 IE 6
var elements = document.getElementsByTagName('a');
for(var i = 0, len = elements.length; i < len; i++) {
elements[i].onclick = function () {
// stuff
}
}
回答by Phil Klein
function linkClickHandler(a) {
console.log(a.host);
}
var links = document.getElementsByTagName('a');
for (var i = 0; i < links.length; i++) links[i].onclick = function() {
linkClickHandler(links[i]);
}
回答by Leandro RR
better way:
更好的方法：
const item = document.querySelectorAll(".nav__item");
item.forEach(link => {
link.addEventListener("click", function () {
link.classList.add("nav__item--active");
});
});
回答by jabclab
Something like this should be useful for you:
像这样的东西应该对你有用：
var elements = document.getElementsByTagName("a"),
i,
len,
el;
for (i = 0, len = elements.length; i < len; i++) {
el = elements[i];
// Do what you need on the element 'el'
}
回答by Naftali aka Neal
Try using getElementsByTagName('a')
尝试使用getElementsByTagName('a')
