javascript - 如何选择所有标签并注册 onclick 事件？

Answer 1

您将onclick属性设置为元素数组，而不是像您需要的那样单独设置每个元素。此外，您show在使用它之后进行定义。

var elts = document.getElementsByTagName('a');
var show = function() { alert('hahahha'); }
for (var i = elts.length - 1; i >= 0; --i) {
    elts[i].onclick = show;
}

向后遍历数组比elts.length每次都测试更有效。如果需要向前迭代，请将数组长度存储在变量中以提高效率。

Answer 2

您需要将 onclick 事件<a> tags分别分配给所有事件，如下所示：

var s=document.getElementsByTagName('a');
var show = function(){
   alert('hahahha');
}
for (var i=0;i<s.length;i++)  
{  
 s[i].onclick = show;      
} 

Answer 3

document.getElementsByTagName('a')返回一个数组，因此试试这个：

    var arr = document.getElementsByTagName('a');
    for(var key in arr){
      arr[key].onclick = show;
    }

还没有测试过，但它应该可以工作

Answer 4

Answer 5

是的，我们可以使用 java 脚本和 jquery 来解决上述问题：

Javascript：

   var aLinks=document.getElementsByTagName('a'); // returns array of all <a> link objects

    //Function to be bind with link object
    var show = function(){
          alert("Now Show function has been binded...hahahhaha..!");
    }

    //Now we have to bind click event with each link object. 
    for(var i=0;i<aLink.length;i++){
       aLinks[i].onclick=show;
    }

将所有链接标签与任何事件绑定的另一种替代方法是使用 jQuery，它为这种绑定问题提供了最简单的方法。

但首先我们必须包含 jquery.js javascript 文件（最好使用最新版本）。

jQuery：

$(function(){
    $("a").click(function(e){
             alert("Now Show function has been binded...hahahhaha..!");
      });
});

Answer 6

由于新的 JS 标准，这可以很容易地完成。我所有的 a 标签都有类导航链接。因此，我将它们全部选中（这给了我一个节点列表）并在它们上运行 forEach 并添加了一个函数，以便在选择其中一个节点时调用。希望这可以帮助！

let navLink = document.querySelectorAll('.nav-link');
const navbar = document.querySelector('#navbarNav');

closeNavBar = () => {
    navbar.classList.remove('show');
};

navLink.forEach((nav) => nav.addEventListener('click', closeNavBar));