Javascript đính kèm một sự kiện onclick cho tất cả các liên kết

Question

Tôi muốn đính kèm một chức năng trên mọi liên kết trên trang web để thay đổi một tham số.

Tôi làm cách nào để thực hiện điều này mà không cần jQuery?

Làm cách nào để duyệt qua mọi liên kết (nó có thể là một mục DOM) và gọi một hàm trên chúng?

Answer 1

getElementsByTagName được hỗ trợ bởi tất cả các trình duyệt hiện đại và tất cả các cách trở lại IE 6

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

Answer 2

Hãy thử sử dụng getElementsByTagName('a')

Answer 3

Something như thế này sẽ có ích cho bạn:

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

Thật lạ khi không ai cung cấp giải pháp thay thế sử dụng sự kiện 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); 

Các ưu của giải pháp này là khi bạn tự động thêm neo khác, bạn không cần phải đặc biệt gắn một sự kiện vào nó, vì vậy tất cả các liên kết này sẽ luôn bắn này, ngay cả khi họ đã được thêm vào sau khi những dòng này Đã được thực hiện. Điều này trái ngược với tất cả các giải pháp khác được đăng cho đến thời điểm này. Giải pháp này cũng tối ưu hơn khi bạn có một số lượng lớn các liên kết trên trang của mình.

Answer 6

cách tốt hơn:

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

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