Javascript adjuntar un evento onclick a todos los enlaces

Question

Quiero adjuntar una función en cada enlace del sitio para cambiar un parámetro.

¿Cómo puedo hacer esto sin jQuery?

¿Cómo atravieso cada enlace (podría ser un elemento DOM) y llamo una función sobre ellos?

Answer 1

getElementsByTagName es soportado por todos los navegadores modernos y todo el camino de vuelta 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

Trate de usar getElementsByTagName('a')

Answer 3

Algo como esto debería ser útil para Usted:

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

Es extraño que nadie haya ofrecido una solución alternativa que utilice eventos burbujeantes

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

Las ventajas de esta solución es que cuando se agrega dinámicamente otro anclaje, no es necesario para unirse específicamente a un evento para él, así que todos los enlaces siempre se disparará esto, incluso si se agregaron después de estas líneas fueron ejecutados. Esto está en contraste con todas las otras soluciones publicadas hasta ahora. Esta solución también es más óptima cuando tienes una gran cantidad de enlaces en tu página.

Answer 6

mejor manera:

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

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