javascript - EventListener 性能 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 个)EventListener？因为像我这样的新手会说第一种方法性能更高？!

Answer 1

因为点击事件冒泡，所以可以在<nav>中添加单次点击事件监听器元素并接收对其及其子元素的所有点击 <a>元素。这称为事件委托(delegate)，比向每个 <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');
    }
});