Для более четкого понимания давайте начнем сразу с примера.
У вас есть несколько вложенных друг в друга блоков:
При клике на самый внутренний блок, вы попадаете и на внешние блоки так как "самый внутренний блок" блок находится внутри других Событие onclick возникает сначала во внутреннем блоке, а затем срабатывает в его родителе, в родителе его родителя и так далее, пока не дойдет то тега body и далее до тега html (затем до document и до window).
Давайте убедимся в этом на следующем примере: у нас есть 3 блока, к каждому из них привязано событие onclick:
Нажмите на самый внутренний красный блок - и вы увидите, как сначала сработает onclick красного блока, потом синего, потом желтого.
Такое поведение называется всплытием событий.
event.target
Свойство event.target содержит элемент, на котором сработало событие. Это Самый глубокий тег, на который непосредственно был, в примере, совершен клик.
Пусть у нас есть два элемента: div и абзац p, лежащий внутри этого дива. Пусть onlick мы привязали в диву:
Когда мы кликаем на этот див, мы можем попасть по абзацу, а можем попасть в div.
Тем не менее хотелось бы знать - где произошел клик непосредственно по диву или по абзацу. Этот вопрос решает объект Event и его свойство event.target - именно там хранится информация о том на каком элементе произошел клик.
В следующем примере у нас есть div, внутри него лежит p, а внутри него - span.
Давайте привяжем событие onclick самому верхнему элементу (диву) и будем кликать на разные элементы: на div, на p, на span. С помощью event.target и tagName получим самый нижний элемент, в котором случилось событие и выведем его название.
Прекращение всплытия
Все события всплывают до самого верха (до тега html, а затем до document, а затем до window). Когда нам нужно всплытие остановить это можно сделать на любом элементе, через который всплывает событие. Для этого в коде элемента следует вызвать метод event.stopPropagation().