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

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