JavaScript 给所有链接附加一个 onclick 事件

Question

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

如何在没有jQuery的情况下实现此功能？

我该如何遍历每个链接（可能是DOM元素）并对它们调用一个函数？

- John Smith

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

这种解决方案的优点是，当您动态添加另一个锚点时，您不需要专门将事件绑定到它，因此所有链接都将始终触发此事件，即使它们在执行这些行之后添加。这与到目前为止发布的所有其他解决方案形成对比。这种解决方案在页面上有大量链接时也更加优化。

- zatatatata

---

最近有人添加了另一个答案，它将添加大量的事件监听器，但对于在代码执行后添加到DOM中的锚点不会有任何作用。这是一个如此简单的原则，但似乎很多人完全没有意识到。 - HMR

我认为这个解决方案更好，因为它只添加了一个事件，而不是可能会增加十几个事件。此外，如果你动态地添加更多的链接，这个解决方案也能够适用于它们！ - Ignas2526

当有人倾向于深入思考时，这是非常棒的！ - hex494D49

仅当您的 A 标签中没有嵌套元素时才有效。 - Spoeken

不奇怪，例如Youtube网站有很多嵌套元素的A标签，这种方法行不通。 - user924

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

- Joe

---

完全取决于具体的用例，可能不是最优解。 - zatatatata

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

如果所点击的元素不是链接，我们会查找其父元素以检查是否存在链接元素。

- jazmit

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

- Phil Klein

Answer 5

更好的方式：

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

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

- Joe RR

---

你如何确保所有链接都具有.nav__item类，以便绑定每个锚链接？ - Akash

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

- jabclab

Answer 7

尝试使用getElementsByTagName('a')

- Naftali