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

如果clicked元素不是链接，则我们搜索其父元素以检查link元素。

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

这样的事情应该对你有用：

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 6

更好的方法：

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

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

Answer 7

尝试使用getElementsByTagName('a')

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

7 个答案: