事件侦听器滚动或单击

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

我认为第二个选项很好，在滚动时添加侦听器会导致在滚动每个像素时调用回调，因此显式操作比隐式操作好很多不需要的调用

为了最好，您需要在每个元素而不是整个元素上添加点击事件侦听器 window 以避免在任何点击时触发点击回调。

在目标项目上添加点击事件

const sectionOneEl = document.querySelector('#section-one');

sectionOneEl.addEventListener('click', ev => {
  // section one click handler
});

事件侦听器滚动或单击

Event Listener Scroll or Click

javascript

html

eventhandler