Обработка событий в JavaScript

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

1. Назначение обработчиков событий

Обработчики событий могут быть назначены несколькими способами. Рассмотрим два основных.

1.1. Использование атрибутов HTML

Вы можете назначить обработчик события непосредственно в HTML-коде:

<button type="button" onclick="alert('Button clicked!')">Click me</button>

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

1.2. Использование метода `addEventListener`

Метод addEventListener предоставляет более гибкий и современный способ назначения обработчиков событий:

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

2. Основные типы событий

События бывают разных типов. Вот некоторые из них:

События мыши: click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout
События клавиатуры: keydown, keypress, keyup
События формы: submit, change, focus, blur
События документа: DOMContentLoaded, load, unload, resize, scroll
События касания: touchstart, touchmove, touchend

3. Использование объекта события

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

button.addEventListener('click', function(event) {
  console.log(event.type); // 'click'
  console.log(event.target); // элемент, на который было нажато
});

4. Всплытие и перехват событий

События могут распространяться по DOM-дереву двумя способами:

Всплытие (bubbling): Событие обрабатывается сначала самым внутренним элементом и поднимается вверх к родительским элементам.
Перехват (capturing): Событие обрабатывается сначала самыми внешними элементами и идет вниз к целевому элементу.

Пример кода:

const parent = document.querySelector('.parent');
const child = document.querySelector('.child');

parent.addEventListener('click', function() {
  console.log('Parent clicked');
}, true); // true означает использовать перехват

child.addEventListener('click', function() {
  console.log('Child clicked');
});

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

5.1. Остановка распространения события

Чтобы предотвратить дальнейшее распространение события, используйте event.stopPropagation():

child.addEventListener('click', function(event) {
  event.stopPropagation();
  console.log('Child clicked');
});

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

Чтобы отменить действие по умолчанию браузера (например, переход по ссылке), используйте event.preventDefault():

const link = document.querySelector('a');
link.addEventListener('click', function(event) {
  event.preventDefault();
  console.log('Link click prevented');
});

Пример объединения всех техник

<!DOCTYPE html>
<html lang="en">
    <head>    
    <meta charset="UTF-8">    
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>Document</title>
</head>
<body>    
    <div class="parent">        
        <button type="button" class="child">Click me</button>    
    </div>    
    <script>        
        const parent = document.querySelector('.parent');        
        const button = document.querySelector('.child');            
        
        parent.addEventListener('click', function() {            
            console.log('Parent clicked');        
        }, true); // Используем перехват            
        
        button.addEventListener('click', function(event) {            
            event.stopPropagation(); // Останавливаем всплытие            
            console.log('Button clicked');        
        });    
    </script>
</body>
</html>

В нашем телеграмм канале вы можете предложить тему для следующего мини урока