Делегирование событий

Тренажер по работе с HTML DOM на JavaScript для пользователей с начальным и средним уровнем подготовки.

Опубликовано 03.03.2025
Просмотры 93
Автор
Рек. время прохождения 2 минуты
Упражнений 8
Комментарии 0
Тренажер JavaScript: Покоряем HTML DOM

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

Список тем

Изменение цвета фона элемента списка

id: 37050_delegation-1

Используйте делегирование событий, чтобы при клике на любой элемент списка `<li>` он менял свой цвет фона на красный. Вам нужно добавить обработчик событий на родительский элемент `<ul>` и определить, на каком именно элементе списка произошло событие.

HTML
Восстановить HTML
<ul id="myList">
  <li>Элемент 1</li>
  <li>Элемент 2</li>
  <li>Элемент 3</li>
</ul>
JavaScript
const list = document.getElementById("myList");

list.addEventListener("click", function(event) {
  if (event.target.tagName === input__1) {
    event.input__2.style.backgroundColor = input__3;
  }
});
Используйте `event.target`, чтобы получить элемент, на котором произошло событие. Затем измените его свойство `style.backgroundColor`.
Заполнить ответами все поля
Результат
Лог
Выполнить
Показать подсказку

Удаление элемента списка

id: 37050_delegation-2

Реализуйте делегирование событий так, чтобы при клике на любой элемент списка `<li>` он удалялся из списка. Используйте метод `remove()` для удаления элемента.

HTML
Восстановить HTML
<ul id="myList2">
  <li>Элемент 1</li>
  <li>Элемент 2</li>
  <li>Элемент 3</li>
</ul>
JavaScript
const list2 = document.getElementById("myList2");

list2.addEventListener(input__1, function(event) {
  if (event.target.tagName === "LI") {
    event.target.input__2();
  }
});
Используйте `event.target`, чтобы получить элемент, на котором произошло событие, и вызовите для него метод `remove()`.
Заполнить ответами все поля
Результат
Лог
Выполнить
Показать подсказку

Добавление класса при наведении

id: 37050_delegation-3

Сделайте так, чтобы при наведении курсора мыши на любой элемент списка `<li>` ему добавлялся класс "highlight", а при уходе курсора - класс удалялся. Используйте события `mouseover` и `mouseout`.

CSS
.highlight {
  background-color: yellow;
}
HTML
Восстановить HTML
<ul id="myList3">
  <li>Элемент 1</li>
  <li>Элемент 2</li>
  <li>Элемент 3</li>
</ul>
JavaScript
const list3 = document.getElementById("myList3");

list3.addEventListener("mouseover", function(event) {
  if (event.target.tagName === "LI") {
    event.target.classList.input__1("highlight");
  }
});

list3.addEventListener(input__2, function(event) {
  if (event.target.tagName === "LI") {
    event.target.classList.remove(input__3);
  }
});
Используйте `event.target` для доступа к элементу, на котором произошло событие. Используйте методы `classList.add()` и `classList.remove()` для добавления и удаления класса.
Заполнить ответами все поля
Результат
Лог
Выполнить
Показать подсказку

Переключение класса по клику

id: 37050_delegation-4

Реализуйте переключение класса "active" на элементах списка `<li>` при клике. Если класс есть, он должен удаляться, если класса нет - добавляться. Используйте метод `classList.toggle()`.

CSS
.active {
  font-weight: bold;
}
HTML
Восстановить HTML
<ul id="myList4">
  <li>Элемент 1</li>
  <li>Элемент 2</li>
  <li>Элемент 3</li>
</ul>
JavaScript
const list4 = document.getElementById(input__1);

list4.addEventListener("click", function(event) {
  if (event.target.tagName === "LI") {
    event.target.classList.input__2("active");
  }
});
Используйте `event.target` и метод `classList.toggle()`.
Заполнить ответами все поля
Результат
Лог
Выполнить
Показать подсказку

Обработка кликов на кнопках внутри списка

id: 37050_delegation-5

В каждом элементе списка есть кнопка. При клике на кнопку выведите в консоль текст, содержащийся внутри этой кнопки. Используйте делегирование и `event.target`.

HTML
Восстановить HTML
<ul id="myList5">
  <li>Элемент 1 <button>Кнопка 1</button></li>
  <li>Элемент 2 <button>Кнопка 2</button></li>
  <li>Элемент 3 <button>Кнопка 3</button></li>
</ul>
JavaScript
const list5 = document.getElementById("myList5");

list5.addEventListener("click", function(event) {
  if (event.target.tagName === input__1) {
    console.log(event.target.input__2);
  }
});
Проверьте, является ли `event.target` кнопкой (`tagName` равен "BUTTON"). Если да, выведите его `textContent` в консоль.
Заполнить ответами все поля
Результат
Лог
Выполнить
Показать подсказку

Изменение картинки по клику

id: 37050_delegation-6

В списке находятся картинки. При клике на картинку, замените ее `src` на другую картинку.

HTML
Восстановить HTML
<div id="imageContainer">
 <img src="https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike2-300x300.png" alt="Image 1">
 <img src="https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike-300x300.png" alt="Image 2">
</div>
JavaScript
const container = document.getElementById("imageContainer");

container.addEventListener("click", function(event) {
 if (event.target.tagName === "IMG") {
  event.target.src = input__1;
 }
});
Используйте `event.target` и проверьте `tagName`. Если это "IMG", измените его атрибут `src`.
Заполнить ответами все поля
Результат
Лог
Выполнить
Показать подсказку

Вложенное делегирование

id: 37050_delegation-7

Внутри списка есть вложенные списки. При клике на элемент вложенного списка, выведите в консоль его текст.

HTML
Восстановить HTML
<ul id="outerList">
 <li>Внешний элемент 1
 <ul class="innerList">
 <li>Внутренний элемент 1</li>
 <li>Внутренний элемент 2</li>
 </ul>
 </li>
 <li>Внешний элемент 2</li>
</ul>
JavaScript
const outerList = document.getElementById("outerList");

outerList.addEventListener("click", function(event) {
 if (event.target.tagName === input__1) {
 console.log(event.target.input__2);
 }
});
Добавьте обработчик на самый верхний `ul`. Используйте `event.target` и проверьте его `tagName`.
Заполнить ответами все поля
Результат
Лог
Выполнить
Показать подсказку

Остановка всплытия события

id: 37050_delegation-8

Добавьте обработчик события клика на контейнер. Внутри контейнера есть кнопка. При клике на кнопку, событие не должно всплывать до контейнера. Выведите в консоль сообщение при клике на кнопку и на контейнер (отдельные сообщения).

HTML
Восстановить HTML
<div id="container8">
  <button id="myButton8">Нажми меня</button>
</div>
JavaScript
const container8 = document.getElementById('container8');
const button8 = document.getElementById('myButton8');

container8.addEventListener('click', () => {
  console.log('Клик по контейнеру');
});

button8.addEventListener('click', (event) => {
  input__1;
  console.log('Клик по кнопке');
});
Используйте метод `stopPropagation()` объекта события, чтобы предотвратить дальнейшее всплытие события.
Заполнить ответами все поля
Результат
Лог
Выполнить
Показать подсказку
Предыдущая темаСледующая тема
НайтиКурс.Ру