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

EventListener性能ByID与ByTagName

1 个答案: