事件侦听器滚动或单击

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