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

Всплытие событий и свойство event.target дают нам возможность воспользоваться техникой делегирования событий

Допустим мы делаем редактор графических объектов. Мы хотим, чтобы при клике на объект выводился его цвет.

Что мы делали раньше?

Делали обработчик под каждый объект. Затем каждому объекту его устанавливали.

После изучения this, мы смогли сделать универсальный обработчик. Но приходилось все-равно его добавлять к каждому объекту.

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

1. Делаем внешний блок. Помещаем все объекты внутрь него.
2. Ставим обработчик на внешний блок.
3. За счет всплытия события, происходящие на вложенных объектах, будут распространяться на внешний блок и запускать обработчик.
4. В обработчике получаем объект event. В свойстве event.target хранится ссылка на объект, на котором произошло событие.

<div id="outer">
  <div id="inner">
  </div>
</div>

<script>
var outer = document.getElementById("outer");

outer.onclick=function(event) {
  if (event.target==this) {
    console.log('Родительский элемент');
  } else {
    console.log('Кликнули на ребенка');
  }
}

</script>

Практика:

1. Есть разноцветные квадраты. При клике на квадрат нужно вывести его цвет (через делегирование).
2. Пользователь кликает на блок, выводится цвет предыдущего блока.
3. Внутри квадратов слова. При клике на div – выводим внутреннее слово.
4. Есть круги с нулями. При клике на круг счет растет. Реализовать через делегирование.
5. Есть набор объектов (кружочки, квадратики). При клике мы делаем объект «активным», при этом с остальных элементов «фокус» убирается
6. Есть разные кружки, с числами внутри. При клике на кружок число внутри уменьшается на единицу. Когда число становится нулем кружок исчезает. Ведем подсчет сколько кружков и какого цвета было убрано.
7. Есть список. В каждом пункте есть подпункты, но изначально они скрыты. Реализовать сворачивание/разворачивание подпунктов при клике.
8. Сделать галлерею картинок