1. При заходе на синий — на нём сработает mouseover [target: blue].
2. При переходе с синего на красный — будет mouseout [target: blue] — уход с родителя.
3. И тут же mouseover [target: red] — как ни странно, «обратный переход» на родителя.
На самом деле, обратного перехода нет. Событие mouseover сработало на потомке (видно по target: red), а затем всплыло.
Почему выводиться target: red? Ведь на красном блоке нет обработчика. Событие всплыло на синий, на нем target должен быть blue, а не red.
Всплытие идёт прямо наверх. Обычно событие будет всплывать наверх и наверх, до элемента <html>, а затем до document, а иногда даже до window, вызывая все обработчики на своем пути.
Цитата:
event.target — это исходный элемент, на котором произошло событие, в процессе всплытия он неизменен.
this — это текущий элемент, до которого дошло всплытие, на нём сейчас выполняется обработчик.
