EventListener performance ByID与ByTagName

Question

假设我的DOM如下所示

<nav id="nav">
    <a>link</a>
    <a>link</a>
    <a>link</a>
</nav>

为了检查点击Javascript中的链接，我可以这样写

var nav = document.getElementByID("nav")
nav.addEventListener("click", function(event){})

或者也可以

var links = document.getElementsByTagName("a");
links.addEventListener("click", function (e){});

现在我想知道，既然第二个方法(ElementsByTagName)返回一个元素数组，这是否也意味着这将初始化多个(在本例中是3个) EventListeners？因为像我这样的新手会说第一种方法性能更好？！

Answer 1

因为单击事件是冒泡的，所以可以向<nav>元素添加一个单击事件侦听器，并接收对该元素及其子<a>元素的所有单击。这称为事件委派，比向每个<a>添加不同的侦听器性能更高。

document.querySelector('nav').addEventListener('click', function (e) {
    if (e.target.nodeName.toLowerCase() === 'a') {
        // One of the nav's child a elements was clicked.
        // Now you can do something with it:
        e.target.classList.add('clicked');
    }
});