Рубрики
Без рубрики

JavaScript события обработчики – как обрабатывать события в JS

Что такое события? События – это действия, которые происходят, когда пользователь взаимодействует со страницей – вроде нажатия на элемент, набрав в поле, или загрузка страницы. Браузер уведомляет систему, что что-то произошло, и что она должна быть обработана. Это обрабатывается путем регистрации

Автор оригинала: 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 выход следующий:

Как слушать событие

Есть два способа послушать событие:

  1. addeventListener.
  2. Встроенные события, такие как по щелчку
//addEventListener
document.getElementByTag('a').addEventListener('click', onClickHandler);

//inline using onclick
Click me

Что лучше – встроенное событие или addeventListener?

  1. addeventListener Дает вам возможность регистрировать неограниченные обработчики событий.
  2. RemoveeventListener также можно использовать для удаления обработчиков событий
  3. 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