Автор оригинала: Shruti Kapoor.
Что такое события?
События – это действия, которые происходят, когда пользователь взаимодействует со страницей – вроде нажатия на элемент, набрав в поле, или загрузка страницы.
Браузер уведомляет систему, что что-то произошло, и что она должна быть обработана. Он обрабатывается путем регистрации функции, называемой Обработчик событий
это слушает определенный тип события.
Что значит «справиться с событием»?
Чтобы поставить его в простые термины, рассмотрите это – давайте предположим, что вы заинтересованы в посещении событий встречи веб-разработки в вашем местном сообществе.
Для этого вы зарегистрируетесь на локальный встреч под названием «Женщины, которые код которых» и подписываются на уведомления. Таким образом, в любое время новая встреча запланирована, вы получаете предупреждение. Это обработка событий!
«Событие» здесь – новая встреча JS. Когда появится новый встреч, веб-сайт METUP.COM ловит это изменение, тем самым «обрабатывая» это событие. Затем он уведомляет вас, таким образом, принимая «действие» на мероприятии.
В браузере события обрабатываются аналогично. Браузер обнаруживает изменение и предупреждает функцию (обработчик событий), который слушает определенное событие. Эти функции затем выполняют действия по желанию.
Давайте посмотрим на пример Нажмите
обработчик события:
const buttonContainer = document.querySelector('.buttons'); console.log('buttonContainer', buttonContainer); buttonContainer.addEventListener('click', event => { console.log(event.target.value) })
Каковы различные типы событий?
Событие может быть запущено в любое время, когда пользователь взаимодействует со страницей. Эти события могут быть прокручиваться пользователем через страницу, нажав на элемент или загрузку страницы.
Вот некоторые общие события – OnClick
dblclick
Mousedown
мышцы
MouseMove
КДУЩЬЮ
keyup
TouchMove
Touchstart
трогать
oepload
Onfocus
ньюрур
OneRor
onscroll.
Различные фазы событий – захват, цель, пузырь
Когда событие перемещается через DOM – будь то пузыривание или пропитывание вниз – это называется распространение событий. Мероприятие распространяется через DOM.
События происходят в двух этапах: фаза для пузырьков и фаза захвата.
В фазе захвата, также называемую фазу оболочки, событие «обязывается» к элементу, вызвало событие.
Он начинается с элемента корневого уровня и обработчика, а затем распространяется до элемента. Фаза захвата завершена, когда событие достигает цель
Отказ
В пузырьковой фазе событие «пузырится» до DOM. Это сначала захвачено и обрабатывается самым внутренним обработчиком (тот, который ближе всего к элементу, на котором произошло событие). Затем он пузырится (или распространяется вверх) до более высоких уровней дерева Дома, в дальнейшем до его родителей, а затем, наконец, к его корню.
Ее трюк, чтобы помочь вам вспомнить это:
trickle down, bubble up
Вот инфографики из quirksmode Это очень хорошо объясняет:
/ \ ---------------| |----------------- | element1 | | | | -----------| |----------- | | |element2 | | | | | ------------------------- | | Event BUBBLING | ----------------------------------- | | ---------------| |----------------- | element1 | | | | -----------| |----------- | | |element2 \ / | | | ------------------------- | | Event CAPTURING | -----------------------------------
Одним из них следует отметить, что ли вы регистрируете обработчик событий в любой фазе, оба фаза всегда случаются. Все события пузырь по умолчанию.
Вы можете зарегистрировать обработчики событий для фазы, пузыри или захвата, используя функцию addeventListener (тип, слушатель, упреждай)
Отказ Если UseCapture
установлен на ложь
Обработчик событий находится в фазе пузыринга. В противном случае это в фазе захвата.
Порядок фаз события зависит от браузера.
Чтобы проверить, какой браузер почитает захват сначала, вы можете попробовать следующий код в jsfiddle:
Child One
const childOne = document.getElementById("child-one"); const childOneHandler = () => { console.log('Captured on child one') } const childOneHandlerCatch = () => { console.log('Captured on child one in capture phase') } childOne.addEventListener("click", childOneHandler); childOne.addEventListener("click", childOneHandlerCatch, true);
В Firefox, Safari и Chrome выход следующий:
Как слушать событие
Есть два способа послушать событие:
addeventListener.
- Встроенные события, такие как
по щелчку
//addEventListener document.getElementByTag('a').addEventListener('click', onClickHandler); //inline using onclick Click me
Что лучше – встроенное событие или addeventListener?
addeventListener
Дает вам возможность регистрировать неограниченные обработчики событий.RemoveeventListener
также можно использовать для удаления обработчиков событий-
UseCapture
Флаг можно использовать для обозначения того, необходимо ли обрабатывать событие в фазе захвата или в комплектной фазе.
Примеры кода и Live-Action
Вы можете попробовать эти события в jsfiddle, чтобы играть с ними.
Child One
Child Two
const wrapperDiv = document.getElementById("wrapper-div"); const childOne = document.getElementById("child-one"); const childTwo = document.getElementById("child-two"); const childOneHandler = () => { console.log('Captured on child one') } const childTwoHandler = () => { console.log('Captured on child two') } const wrapperDivHandler = () => { console.log('Captured on wrapper div') } const childOneHandlerCatch = () => { console.log('Captured on child one in capture phase') } const childTwoHandlerCatch = () => { console.log('Captured on child two in capture phase') } const wrapperDivHandlerCatch = () => { console.log('Captured on wrapper div in capture phase') } childOne.addEventListener("click", childOneHandler); childTwo.addEventListener("click", childTwoHandler); wrapperDiv.addEventListener("click", wrapperDivHandler); childOne.addEventListener("click", childOneHandlerCatch, true); childTwo.addEventListener("click", childTwoHandlerCatch, true); wrapperDiv.addEventListener("click", wrapperDivHandlerCatch, true);
TL; доктор
Фазы событий являются захват (DOM -> цель), пузырь (целевой> домо) и цель. События можно слушать, используя addeventListener
или встроенные методы, такие как OnClick
Отказ
addEventListener can add multiple events, whereas with onclick this cannot be done. onclick can be added as an HTML attribute, whereas an addEventListener can only be added within