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

Что такое события и обработчики событий?

При написании JavaScript сценария нам в большинстве случаев нужно чтобы определённые фрагменты нашего кода выполнялись при наступлении каких-то определённых событий.

Например, после загрузки DOM-дерева, клике пользователя на определённом элементе и т.д.

JavaScript - что такое событие?

Что такое событие? Событие – это сигнал о том, что с документом или некоторым его элементом что-то произошло. Например, браузер, генерирует событие, когда завершил загрузку DOM-дерева, когда пользователь кликнул на элемент на странице и т.д.

Если в JavaScript сценарии нам это событие на определённом элементе интересно, то мы можем создать для него обработчик.

Обработчик события – это функция, которая будет вызываться при наступлении этого события на указанном элементе.

При необходимости мы можем создать не один, а несколько обработчиков этого события на указанном элементе. В этом случае будет вызвана не одна, а несколько созданных функций при наступлении данного события на этом элементе.

Тип и цель события

Каждое генерируемое браузером событие имеет тип или имя.

Тип события – это строка, определяющая что произошло.

Например, тип «click» означает, что пользователь выполнил клик мышью.

События бывают простыми и сложными. Примером простого события является «mousedown». Данное событие возникает в момент времени, когда пользователь нажал левую кнопку мыши, но её ещё не отпустил. Оно соответствует моменту замыкания электрического контакта кнопки. Другое простое событие — это «mouseup», оно возникает в момент времени, когда пользователь отпустил левую кнопку мыши, т.е. в момент размыкания электрического контакта кнопки.

Сложные события — это совокупность нескольких простых событий. Примером сложного события является «click», оно является результатом двух событий mousedown и mouseup, т.е. оно возникает после того, когда пользователь нажал и отпустил кнопку мыши.

Примером ещё одного сложного события является dblclick, оно возникает, когда пользователь нажал 2 раза левой кнопкой мыши. Данное событие является результатом следующей цепочки событий: mousedown -> mouseup -> click -> mousedown -> mouseup -> click -> dbclick. Данные события возникают последовательно, т.е. сначала возникает событие mousedown, потом mouseup, потом click и т.д.

Цель события — это объект, в котором возникло событие или с которым оно связано.