Типы событий

События в JavaScript включают события мыши, клавиатуры, формы и окна.

// События мыши
document.addEventListener('click', function() {
    console.log('Клик по странице');
});

document.addEventListener('dblclick', function() {
    console.log('Двойной клик по странице');
});

// События клавиатуры
document.addEventListener('keydown', function(event) {
    console.log('Нажата клавиша:', event.key);
});

document.addEventListener('keyup', function(event) {
    console.log('Отпущена клавиша:', event.key);
});
            

Работа с событиями формы

События формы позволяют реагировать на ввод данных пользователем и изменение состояния элементов формы.

// Событие 'input' срабатывает при вводе данных в поле формы
let inputField = document.getElementById('myInput');
inputField.addEventListener('input', function() {
    console.log('Изменение значения:', inputField.value);
});

// Событие 'change' срабатывает при изменении значения элемента формы
let selectField = document.getElementById('mySelect');
selectField.addEventListener('change', function() {
    console.log('Выбранный вариант:', selectField.value);
});
            

Отмена действия по умолчанию

События в JavaScript могут иметь действия по умолчанию, которые можно отменить, используя метод preventDefault().

// Отмена отправки формы
let form = document.getElementById('myForm');
form.addEventListener('submit', function(event) {
    event.preventDefault(); // Отмена отправки формы
    console.log('Отправка формы отменена');
});

// Отмена перехода по ссылке
let link = document.getElementById('myLink');
link.addEventListener('click', function(event) {
    event.preventDefault(); // Отмена перехода по ссылке
    console.log('Переход по ссылке отменен');
});
            

Всплытие и захват событий

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

// Всплытие событий
document.getElementById('child').addEventListener('click', function() {
    console.log('Клик по элементу child');
});

document.getElementById('parent').addEventListener('click', function() {
    console.log('Клик по элементу parent');
});

// Захват событий
document.getElementById('parent').addEventListener('click', function() {
    console.log('Клик по элементу parent (захват)');
}, true);

document.getElementById('child').addEventListener('click', function() {
    console.log('Клик по элементу child (захват)');
}, true);