Javascript associa un evento onclick a tutti i collegamenti

Question

Desidero associare una funzione a ogni collegamento nel sito per modificare un parametro.

Come posso fare questo senza jQuery?

Come si attraversa ogni collegamento (potrebbe trattarsi di un elemento DOM) e si chiama una funzione?

Answer 1

getElementsByTagName è supportato da tutti i browser moderni e tutta la strada fino a IE 6

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

Answer 2

Provare a utilizzare getElementsByTagName('a')

Answer 3

Qualcosa del genere dovrebbe essere utile per voi:

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

È strano che nessuno abbia offerto una soluzione alternativa che utilizza l'evento 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); 

I pro di questa soluzione è che quando si aggiunge dinamicamente un'altra ancora, non c'è bisogno di legarsi in modo specifico un evento ad esso, in modo da tutti i link sarà attivo sempre presente, anche se sono stati aggiunti dopo queste righe sono stati giustiziati Questo è in contrasto con tutte le altre soluzioni postate finora. Questa soluzione è anche più ottimale quando si dispone di un numero elevato di collegamenti nella pagina.

Answer 6

modo migliore:

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

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