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

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

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

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

Список тем

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

Используйте делегирование событий, чтобы при клике на любой элемент списка `<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`.
Заполнить ответами все поля
Результат
Лог
Выполнить
Отметить решенным
Показать подсказку

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

Реализуйте делегирование событий так, чтобы при клике на любой элемент списка `<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()`.
Заполнить ответами все поля
Результат
Лог
Выполнить
Отметить решенным
Показать подсказку

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

Сделайте так, чтобы при наведении курсора мыши на любой элемент списка `<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()` для добавления и удаления класса.
Заполнить ответами все поля
Результат
Лог
Выполнить
Отметить решенным
Показать подсказку

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

Реализуйте переключение класса "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()`.
Заполнить ответами все поля
Результат
Лог
Выполнить
Отметить решенным
Показать подсказку

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

В каждом элементе списка есть кнопка. При клике на кнопку выведите в консоль текст, содержащийся внутри этой кнопки. Используйте делегирование и `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` в консоль.
Заполнить ответами все поля
Результат
Лог
Выполнить
Отметить решенным
Показать подсказку

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

В списке находятся картинки. При клике на картинку, замените ее `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`.
Заполнить ответами все поля
Результат
Лог
Выполнить
Отметить решенным
Показать подсказку

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

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

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`.
Заполнить ответами все поля
Результат
Лог
Выполнить
Отметить решенным
Показать подсказку

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

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

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()` объекта события, чтобы предотвратить дальнейшее всплытие события.
Заполнить ответами все поля
Результат
Лог
Выполнить
Отметить решенным
Показать подсказку
Предыдущая темаСледующая тема
НайтиКурс.Ру
Добавить комментарий