Объект событие – event

Объект событие всегда передается обработчику и содержит массу полезной информации о том, где и какое событие произошло.

function doSomething(event) {

// event - будет содержать объект события

}

Из объекта события обработчик может узнать, на каком элементе оно произошло, каковы были координаты мыши (для событий, связанных с мышью), какая клавиша была нажата (для событий, связанных с клавиатурой), и извлечь другую полезную информацию.

Например, для события по клику мыши (onclick), свойство event.target содержит DOM-элемент, на котором этот клик произошел.

Примечательно, что на одно событие может реагировать не только тот элемент, на котором произошло событие, но и элементы над ним. Это очень удобно, например если в элементе содержатся много дочерних HTML-тегов - не обязательно ставить обработчик на каждый, достаточно указать один обработчик на родителе и в нем ловить все события. Рассмотрим ситуацию, когда у вас есть три элемента "вложенных" друг в друга.

<div class="d1" >1<!-- самый верхний, в представлении DOM, элемент -->

<div class="d2">2

<div class="d3">3</div><!-- самый глубокий элемент -->

</div>

</div>

В этой модели сначала будет выполнен обработчик на элементе 3, затем на элементе 2, и последним будет выполнен обработчик на элементе 1. Такой порядок называется "всплывающим", потому что событие поднимается с самых "глубоких" элементов в представлении DOM, к самым "верхним", как пузырек воздуха в воде.