Неблагодарная работа по прослушиванию нужных событий полностью обрабатывается функцией, называемой addEventListener. Эта функция всегда начеку, поэтому может в нужное время уведомить другую часть приложения о том, что произошло некоторое событие.
Используется она следующим образом:
source.addEventListener(eventName, eventHandler, false);
Наверняка так не совсем понятно, поэтому давайте разберем, что именно означает каждая часть этой функции.
Source (источник)
Мы вызываем addEventListener через элемент или объект, в котором мы хотим прослушивать события. Как правило, это будет элемент DOM, но им также может быть document, window или другой объект, специально созданный для запуска событий.
Event Name (имя события)
В виде первого аргумента для функции addEventListener мы указываем имя события, которое хотим прослушивать. Весь список событий, доступных нам, слишком велик, чтобы полностью его здесь привести, но некоторые из наиболее распространенных перечислены в табл. 31.1.
Табл. 31.1. Распространенные события
Событие
Событие срабатывает…
Click
…когда вы нажимаете и отпускаете основную кнопку мыши, сенсорной панели и т. п.
Mousemove
…при движении курсора мыши
Mouseover
…при наведении курсора мыши на элемент. Это событие используется для обнаружения наведения
Mouseout
…при перемещении курсора мыши за границы элемента
Dblclick
…при быстром двойном клике
DOMContentLoaded
…когда DOM документа полностью загрузилась. Подробнее об этом событии в следующей главе
Load
…когда загрузился весь документ (DOM, внешние изображения, сценарии и т. п.)
Keydown
…при нажатии клавиши клавиатуры
Keyup
…при прекращении нажатия клавиши клавиатуры
Scroll
…при прокрутке элемента
wheel and DOMMouseScroll
…при использовании колесика мыши для прокрутки
В последующих главах мы рассмотрим многие из этих событий более подробно. На данный момент просто взгляните на событие click. Именно его мы будет использовать в скором времени.
Обработчик событий
Во втором аргументе нужно указать функцию, которая будет вызвана, когда событие будет услышано. Эта функция (а иногда объект) в кругу семьи и друзей зовется обработчик событий. Через несколько мгновений мы узнаем о ней гораздо больше.
Захватывать или не захватывать, вот в чем вопрос!
Последний аргумент состоит из true либо false. Чтобы полноценно понять последствия определения того или иного значения, нам придется подождать до главы «Всплытие и погружение событий», которая как раз будет следующей.
Обобщая все сказанное
Теперь, когда мы разобрали функцию addEventListener, давайте все это свяжем в полноценном заполненном примере:
document.addEventListener("click", changeColor, false);
В этом примере addEventListener прикреплена к объекту document. Когда будет услышано событие click, она вызовет функцию changeColor (то есть обработчик событий), которая отреагирует на это событие. Теперь самое время перейти к следующему разделу, посвященному как раз реагированию на события.
2. Реагирование на события
Как мы видели в предыдущем разделе, за прослушивание событий отвечает addEventListener. За действия, производимые после того, как событие будет услышано, отвечает обработчик событий. И я не шутил про то, что обработчик событий — это не более чем функция или объект:
function normalAndBoring() {
// я люблю походы, щенков и многие другие вещи!
}
Единственным отличием между типичной функцией и установленной мной в качестве обработчика событий в том, что функция обработчика событий специально вызывается по имени в вызове addEventListener (и получает объект Event в виде аргумента):
document.addEventListener("click", changeColor, false);
function changeColor(event) {