JavaScript将onclick事件附加到所有链接

Question

我想在网站的每个链接上附加一个函数来更改参数。

如何在没有jQuery的情况下做到这一点？

如何遍历每个链接（可能是一个DOM项）并调用它们的函数？

Answer 1

getElementsByTagName是所有现代浏览器，并回到IE 6

var elements = document.getElementsByTagName('a'); 
for(var i = 0, len = elements.length; i < len; i++) { 
    elements[i].onclick = function() { 
     // stuff 
    } 
} 

Answer 2

一路支持的请尝试使用getElementsByTagName('a')

Answer 3

像这样的东西应该对您有用：

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' 
} 

Answer 4

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]); 
} 

Answer 5

奇怪的是，没有人提供了使用事件冒泡的替代解决方案

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); 

该方案的优点是，当你动态添加另一个锚，你并不需要一个事件特异性结合，所以所有的链接会一直触发此，即使他们这些行后添加被执行。这与迄今为止公布的所有其他解决方案形成对比。当您的网页上有大量链接时，此解决方案也更为优化。

Answer 6

更好的办法：

const item = document.querySelectorAll(".nav__item"); 

item.forEach(link => { 
    link.addEventListener("click", function() { 
    link.classList.add("nav__item--active"); 
    }); 
});