Javascript 将 onclick 事件附加到所有链接

Question

我想在网站上的每个链接上附加一个函数来更改参数。

如果没有 jQuery，我怎么能做到这一点？

我如何遍历每个链接（它可能是一个 DOM 项）并在它们上调用一个函数？

Answer 1

奇怪的是没有人提供使用事件冒泡的替代解决方案

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 2

所有现代浏览器都支持getElementsByTagName并且一直回到 IE 6

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

Answer 3

我想对@zatatatata 的答案进行改进，该答案也适用于带有嵌套元素的链接。

function findLink(el) {
    if (el.tagName == 'A' && el.href) {
        return el.href;
    } else if (el.parentElement) {
        return findLink(el.parentElement);
    } else {
        return null;
    }
};

function callback(e) {
    const link = findLink(e.target);
    if (link == null) { return; }
    e.preventDefault();
    // Do something here
};

document.addEventListener('click', callback, false);

如果被点击的元素不是链接，我们会搜索它的父元素来检查链接元素。

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

更好的方法：

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

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

Answer 6

像这样的东西应该对你有用：

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 7

尝试使用getElementsByTagName('a')