JavaScript將onclick事件附加到所有鏈接

我想在網站的每個鏈接上附加一個函數來更改參數。JavaScript將onclick事件附加到所有鏈接

如何在沒有jQuery的情況下做到這一點？

如何遍歷每個鏈接（可能是一個DOM項）並調用它們的函數？

2011-12-13 John Smith

getElementsByTagName是所有現代瀏覽器，並回到IE 6

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

來源

2011-12-13 16:13:46 Joe

@馬爾西奧完全取決於具體的使用情況，可能不是最優化的解決方案。 – zatatatata

-1

一路支持的請嘗試使用getElementsByTagName('a')

來源

2011-12-13 16:13:47 Neal

像這樣的東西應該對您有用：

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

來源

2011-12-13 16:14:33 jabclab

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

來源

2011-12-13 16:15:12

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

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

該方案的優點是，當你動態添加另一個錨，你並不需要一個事件特異性結合，所以所有的鏈接會一直觸發此，即使他們這些行後添加被執行。這與迄今爲止公佈的所有其他解決方案形成對比。當您的網頁上有大量鏈接時，此解決方案也更爲優化。

來源

2011-12-13 22:09:16 zatatatata

最近有人添加另一個答案，將添加事件偵聽器的負載，但不會做的添加到DOM代碼執行後錨任何事情。這樣一個簡單的原則，但很多人似乎完全沒有意識到。 – HMR

我也認爲這個解決方案更好，因爲它只增加一個事件，而不增加數十個事件。這個解決方案也更好，因爲如果你動態添加更多的鏈接，它也可以爲他們工作！ – Ignas2526

當有人傾向於深思熟慮時，這真是太棒了！ – hex494D49

更好的辦法：

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

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

來源

2018-02-15 15:39:16

JavaScript將onclick事件附加到所有鏈接

回答

相關問題