Событийная модель в JavaScript – это механизм, который позволяет реагировать на действия пользователя, такие как клики, нажатия клавиш, скроллинг и т.д. В данной статье мы рассмотрим, как создавать события, какие свойства имеют объекты событий и приведем несколько примеров использования.

Создание событий в JS

Событие можно создать с помощью метода addEventListener() объекта, на который мы хотим повесить событие. Метод addEventListener() принимает три аргумента: тип события, функцию-обработчик и флаг (опционально). Например, давайте создадим обработчик клика на кнопку:

const button = document.querySelector('#myButton');
button.addEventListener('click', function() {
  console.log('Кнопка нажата');
});

В этом примере мы получили кнопку с помощью метода querySelector(), а затем повесили на нее обработчик клика. Когда пользователь кликнет на кнопку, функция-обработчик будет выполнена и в консоли появится сообщение "Кнопка нажата".

Свойства объектов событий

Когда происходит событие, браузер создает объект события, который содержит информацию о произошедшем событии. Рассмотрим основные свойства объекта события:

• type: тип события (например, click).
• target: элемент, на который было повешено событие.
• currentTarget: элемент, на котором произошло событие.
• timeStamp: время, когда произошло событие.
• preventDefault(): метод, который отменяет действие по умолчанию (например, переход по ссылке или отправку формы).

Примеры использования

Давайте рассмотрим несколько примеров использования событий в JavaScript.

Пример 1: Обработка кликов на ссылках

<a href="#" id="myLink">Нажми на меня</a>

const link = document.querySelector('#myLink');
link.addEventListener('click', function(event) {
  event.preventDefault();
  console.log('Ссылка нажата');
});

В этом примере мы повесили обработчик клика на ссылку и отменили ее стандартное поведение с помощью метода preventDefault(). Вместо перехода по ссылке в консоли появится сообщение "Ссылка нажата".

Пример 2: Изменение цвета при наведении мыши

<div id="myDiv">Наведи на меня мышь</div>

const div = document.querySelector('#myDiv');

div.addEventListener('mouseover', function() {
  div.style.backgroundColor = 'red';
});

div.addEventListener('mouseout', function() {
  div.style.backgroundColor = 'blue';
});

console.log(div);

В данном коде создается переменная div, которая получает элемент соответствующий селектору #myDiv с помощью метода querySelector(). Затем на этот элемент добавляются два обработчика событий, которые реагируют на события mouseover и mouseout соответственно.

В первом обработчике происходит изменение цвета фона элемента на красный, а во втором - на синий.

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

Пример 3. Создание и удаление обработчиков событий

Чтобы создать обработчик события, нужно выбрать элемент, на который он будет привязан, и вызвать метод addEventListener() на этом элементе. Первым параметром этого метода является тип события (например, click), а вторым параметром - функция-обработчик. Функция-обработчик должна быть определена заранее и передана в качестве аргумента.

const button = document.querySelector('#myButton');

function handleClick() {
  alert('Button clicked!');
}

button.addEventListener('click', handleClick);

Чтобы удалить обработчик события, нужно вызвать метод removeEventListener() на элементе с теми же параметрами, что были переданы при его добавлении.

button.removeEventListener('click', handleClick);

Виды событий в JS

В JavaScript существует множество событий, которые могут быть обработаны с помощью обработчиков событий. Некоторые из наиболее часто используемых событий перечислены ниже:

Клавиатурные события

• keydown: событие происходит, когда клавиша на клавиатуре нажимается.
• keyup: событие происходит, когда клавиша на клавиатуре отпускается.
• keypress: событие происходит, когда клавиша на клавиатуре нажимается и отпускается.

События связанные с мышкой

• click: событие происходит, когда пользователь нажимает на элемент левой кнопкой мыши.
• dblclick: событие происходит, когда пользователь дважды щелкает на элементе левой кнопкой мыши.
• mousedown: событие происходит, когда пользователь нажимает на элемент левой кнопкой мыши.
• mouseup: событие происходит, когда пользователь отпускает кнопку мыши над элементом.
• mousemove: событие происходит, когда пользователь перемещает указатель мыши над элементом.
• mouseover: событие происходит, когда указатель мыши входит в область элемента.
• mouseout: событие происходит, когда указатель мыши покидает область элемента.

События элементов формы

• submit: событие происходит, когда пользователь отправляет форму.
• reset: событие происходит, когда пользователь сбрасывает значения формы.
• focus: событие происходит, когда элемент получает фокус ввода.
• blur: событие происходит, когда элемент теряет фокус ввода. События окна
• load: событие происходит, когда страница полностью загружена.
• unload: событие происходит, когда пользователь покидает страницу.
• resize: событие происходит, когда размер окна браузера изменяется.
• scroll: событие происходит, когда пользователь прокручивает страницу.

События документа

• DOMContentLoaded: событие происходит, когда документ загружен и пройдена первоначальная обработка DOM.

Это только некоторые из множества событий, доступных в JavaScript. Каждый элемент на веб-странице может обрабатывать различные события.

Заключение

В заключение, события играют важную роль во взаимодействии пользователей с веб-приложениями. Они позволяют обрабатывать действия пользователей и реагировать на них соответствующим образом. JavaScript предоставляет множество встроенных событий, таких как клик мыши, нажатие клавиши, загрузка страницы и другие.