Событийная модель в JavaScript

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

Форма записи

События могут быть записаны с помощью on-свойств DOM-элементов. Например, чтобы вызвать функцию при клике на кнопку, можно использовать следующий код:

const button = document.getElementById('my-button');

button.onclick = function() {
  alert('Button clicked!');
};

Здесь создается переменная button, которая содержит кнопку с идентификатором my-button. Затем устанавливается свойство onclick кнопки, которое вызывает функцию при клике.

Однако лучше использовать метод addEventListener(), который позволяет добавлять несколько обработчиков событий на один и тот же элемент. Например, чтобы добавить обработчик клика на кнопку, можно использовать следующий код:

const button = document.getElementById('my-button');

button.addEventListener('click', function() {
  alert('Button clicked!');
});

Здесь создается переменная button, которая содержит кнопку с идентификатором my-button. Затем с помощью метода addEventListener() добавляется обработчик события click, который вызывает функцию при клике на кнопку.

Описание работы

Функция-обработчик - это функция, которая вызывается при возникновении события. Обработчик может быть определен как функция или как ссылка на функцию. Например, в предыдущих примерах функция-обработчик определена как анонимная функция:

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

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

const inner = document.getElementById('inner');
const outer = document.getElementById('outer');

inner.addEventListener('click', function(event) {
  alert('Inner element clicked!');
  event.stopPropagation();
});

outer.addEventListener('click', function(event) {
  alert('Outer element clicked!');
});

Здесь создаются переменные inner и outer, которые содержат вложенные элементы. Обработчик события клика на внутреннем элементе устанавливается с помощью метода addEventListener(). Функция-обработчик вызывается при клике на внутренний элемент, а затем вызывается обработчик клика на внешнем элементе. Однако с помощью метода stopPropagation() остановка всплытия событий, который останавливает передачу события на родительские элементы.

Заключение

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