1. Пример счётчика нажатий:

HTML-код:

<p id="counter">Количество: 0</p>

<button id="increase">Увеличить</button>

JavaScript-код:

let count = 0;

const counter = document.querySelector("#counter");

const button = document.querySelector("#increase");

button.addEventListener("click", function() {

count++;

counter.textContent = "Количество: " + count;

});

Результат:

При первом нажатии отображается «Количество: 1».

При втором нажатии — «Количество: 2».

Каждое следующее нажатие увеличивает число на единицу.

2. Пример отображения вводимого текста:

HTML-код:

<label for="textInput">Введите текст:</label>

<input type="text" id="textInput">

<p id="output"></p>

JavaScript-код:

const input = document.querySelector("#textInput");

const output = document.querySelector("#output");

input.addEventListener("input", function() {

output.textContent = input.value;

});

Результат:

Когда пользователь вводит текст в поле, он сразу появляется в абзаце под полем.

3. Пример делегирования события:

HTML-код:

<ul id="subjects">

<li>Математика</li>

<li>Информатика</li>

<li>Физика</li>

</ul>

<p id="selectedSubject"></p>

JavaScript-код:

const list = document.querySelector("#subjects");

const selected = document.querySelector("#selectedSubject");

list.addEventListener("click", function(event) {

if (event.target.matches("li")) {

selected.textContent =

"Выбран предмет: " + event.target.textContent;

}

});

Результат:

При нажатии на элемент «Информатика» отображается сообщение:

«Выбран предмет: Информатика».

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