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