Всплытие событий

Рассмотрим следующую ситуацию

<div onclick="alert('div');" style="width:100px;height:100px; background:cornflowerblue">
    <button onclick="alert('button')">
        Не нажимать!
    </button>
</div>

Если мы кликаем на кнопку, то формально мы кликаем и на div. Где же определить событие onclick?

В JavaScript эта проблема решается следующим образом:

1. Событие onclick происходит на кнопке
2. Потом оно переходит("всплывает") к div'у
3. Событие переходит на внешние элементы. Если их нет, то к body.

В нашем примере выше сработают оба обработчика. И мы получим сначала 'button', а потом 'div'

event.target

Как отличить "оригинальное" событие от "всплывшего"? В объекте event есть свойство event.target, которое хранит ссылку на объект, в котором произошло событие изначально.

event.stopPropagation()

Если же мы хотим приостановить всплытие события то нам необходимо вызвать метод stopPropagation() из объекта event.

Практика:

1. Сделать блок и сделать вложенный в него блок. Поставить на оба блока обратботчики клика. Поэкспериментировать с кликами.

2. Есть четыре квадрата, при клике на один из них, он становится активным(то есть меняют цвет), остальные деактивируются

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