Событийная модель браузера (bubbling, capturing)

Пользовательские события внутри браузера бывают разных типов:

click клик по элементу
keydown и keyup нажатие клавиш
scroll прокрутка страницы

Эти события работают согласно правилам событийной модели браузера.

Цель события (currentTarget)

Это элемент к которому прикреплен слушатель:

<div onclick="clickHandler(event)" className="parent">     
    <div>            
        <button>Button</button>        
    </div>    
</div>

function clickHandler(event) {    
    console.log(event.currentTarget)
}

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

Вызов события

Событие можно вызвать двумя способами

В свойстве on в DOM-элементе onclick onscroll и т.д.

В свойство нужно записать анонимную функцию, она будет срабатывать каждый раз при вызове события
Чтобы отписаться от вызова в свой нужно записать null
Можно добавить только одну функцию вызова

В методе addEventListener()

Вызывается у DOM-элемента
Аргуметом передается тип события click scroll и т.д.
У метода есть третий необязательный параметр — useCapture. Когда его значение равняется false (по умолчанию), событие начинается с фазы всплытия. Когда его значение равняется true, событие начинается с фазы погружения

Распространение события (event propagation)

Фаза погружения (capturing phase)

Срабатывает после вызова события
Заставляет цепочку событий погружаться вниз по window через всех родителей до event.currentTarget — целевого элемента вызвавшего событие

Целевая фаза (target phase)

Срабатывает когда событие дошло до целевого элемента.

Всплытие (bubbling phase)

Срабатывает после целевой фазы
Заставляет цепочку событий подниматься вверх от event.currentTarget через всех родителей до объекта window

Прекращение всплытия

Любой промежуточный обработчик может остановить цепочку всплытия.

Метод event.stopPropagation() останавливает всплытие, но на текущем элементе все обработчики будут вызваны
Метод event.stopImmediatePropagation() останавливает всплытие и обработку событий на текущем элементе

Отключение действия по-умолчанию

Метод event.preventDefault() отключает поведение элемента по умолчанию.

Свойство event.defaulPrevented служит индикатором применения к элементу метода и позволяет узнать что event.preventDefault() сработал

Вопросы

В чем разница event.currentTarget и eventTarget?

currentTarget это элемент на который мы повесили обработчик событий
target это элемент на котором произошло событие