Прослушивание событий прокрутки или нажмите - PullRequest
0 голосов
/ 11 ноября 2019

У меня есть веб-страница с несколькими разделами.

Для переключения с одного раздела на другой я не использую прокрутку, но все делается нажатием (меню, нумерация страниц, стрелки и т. Д.)

Как только пользователь переходит к разделу, фон меняет цвет, каждый раздел на свой цвет.

У меня нет проблем с созданием такого рода функции, но у меня есть вопрос производительности.

Или, возможно, это вопрос логики, я не знаю

Было бы лучше, если бы я связал свое событие на свитке и попросил изменить цвет, как только секция окажется в правильном положении

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"){

        //....
    }
})

1 Ответ

0 голосов
/ 11 ноября 2019

Я думаю, что второй вариант в порядке, добавление слушателя при прокрутке вызовет обратный вызов с каждым прокручиваемым пикселем, поэтому явное действие лучше, чем неявное, со многими ненужными вызовами

Для лучшего вам нужнодобавьте прослушиватель событий щелчка для каждого элемента, а не для всего окна, чтобы избежать повторного вызова щелчка при любом щелчке.

Чтобы добавить событие щелчка по целевому элементу

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

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