Передача события вверх по иерархии DOM

Структура web-страниц иерархична — одни элементы находятся внутри других, те в свою очередь внутри еще в каких-то, итак до элемента body, который лежит внутри html. В связи с этим, когда на одном из элементов страницы происходит событие (например на него наведен курсор), то получается, что оно касается и содержащего его элемента (курсор же лежит и в его области тоже). Поэтому, событие в начале происходит на одном из элементов страницы, после чего передается родительскому элементу, потом прародительскому и так до верха иерархии DOM. Такое поведение еще называют всплытием события вверх по иерархии DOM.

Допустим, у нас имеется следующая страница:

<div>
  <ul class="l1">
    <li class="item"> Высоко </li>	
    <li class="item"> Быстро </li>	
    <li class="item"> Сильно </li>	
  </ul>
  <ul class="l2">
    <li class="item"> Выше </li>	
    <li class="item"> Быстрее </li>	
    <li class="item"> Сильнее </li>	
  </ul>
</div>

Если «кликнуть» по первому элементу первого списка, то событие типа click произойдет в начале на нем самом (элементе с текстом «Высоко»), затем на ul-элементе, содержащим его (тот, что с классом l1), после этого событие будет вызвано на элементе div и затем пойдет выше по иерархии. Благодаря такому поведению, когда например нужно отловить событие на всем списке, нам не придется устанавливать обработчики на все его элементы, а достаточно будет установить его только на элемент самого списка.