День 25 JavaScript 30 Веса Боса работал над концепцией прослушивателя событий и представил однажды.
Мы начали с трех вложенных div, выбрали их, и консоль зарегистрировала событие.
const divs = document.querySelectorAll('div');
function logText(e){
console.log(this.classList.value);
}
Если вы нажмете на самый внутренний div, все три div зарегистрируют событие click. Это происходит из-за «пузырьков», когда событие клика распространяется по всему документу, включая каждый вложенный элемент div.
Событие "захватывается" браузером, начинается с самого внешнего контейнера и захватывает событие, работающее внутри самого внутреннего контейнера. Затем происходит запуск события, направленного наружу из самого внутреннего контейнера наружу (пузырьковое срабатывание).
Метод addEventListener содержит аргумент capture.
divs.forEach(div => div.addEventListener('click', logText, {
capture:false}
Ложь — это настройка по умолчанию.
divs.forEach(div => div.addEventListener('click', logText, {
capture:true }
Если мы установим для захвата значение true, первый захват инициирует событие, то есть сначала из самого внешнего контейнера.
Если мы запустим метод stopPropagation, только щелчок по самому внутреннему контейнеру вызовет событие щелчка.
e.stopPropagation();
Наконец, Бос представил понятие «однажды».
divs.forEach(div => div.addEventListener('click', logText, {
capture:false
once: true;
}));
Метод eventListener прослушивает событие щелчка, а затем отвязывает себя, чтобы дальнейшие события щелчка не записывались. Таким образом, пользователь может щелкнуть элемент только один раз. Эта функция полезна в приложении для оформления заказа в интернет-магазине, где вы хотите, чтобы пользователь нажимал кнопку только один раз.
Интересные концепции, рассмотренные сегодня, должны оказаться полезными в будущих приложениях.
Следите за моими учебными заметками по мере того, как я продвигаюсь по JavaScript 30.
