事件侦听器滚动或单击

Question

我有一个包含多个部分的网页。

要从一个部分切换到另一个部分，我不使用滚动，但一切都是通过单击来完成的（菜单、分页、箭头等...）

一旦用户进入一个部分，背景就会改变颜色，每个部分都变成它的颜色。

我创建这种函数没有问题，但我有一个性能问题。

或者也许这是我不知道的逻辑问题

如果我将我的事件绑定在滚动条上并在该部分处于正确位置后立即要求更改颜色会更好

window.addEventListener('scroll', requestAnimationFrame(function(){

    if ( sectionPosition === 0 ){

        // Do something...

    }

}))

或者如果我使用事件委托将我的事件绑定在不同的可点击元素上会更好

     window.addEventListener('click', function(event){

    let selector = event.target.getAttribute("href");

    if( selector === "#section-one"){

        //....

    }

    if(selector === "#section-two"){

        //....

    }

})

Answer 1

我认为第二个选项很好，在滚动时添加侦听器会导致在滚动的每个像素时调用回调，因此在许多不需要的调用中，使动作显式优于隐式最好的情况是，您需要在每个元素上而不是在整个窗口上添加单击事件侦听器，以避免通过任何单击触发单击回调。在目标项目上添加点击事件const sectionOneEl = document.querySelector('#section-one');sectionOneEl.addEventListener('click', ev => {  // section one click handler});