Как повесить событие onclick для родительского элемента и дочерного?

У меня есть двухступенчатый список:

<ul>
  <li id="l1-1">
    1 Уровень
    <ul>
      <li id="l2-1">
        2 Уровень
      </li>
      <li id="l2-2">
       2 Уровень
      </li>
    </ul>
  </li>
</ul>

Для элемента с идентификатором "l1-1" поставил событие onclick, чтобы скрыть все дочерные элементы внутри себя. Также поставил событие onclick для "#l2-1" и "#l2-2", чтобы при нажатии в консоль выводилось содержание элемента.

document.querySelector("l1-1").addEventListener("click", hideElements);
document.querySelector("l2-1").addEventListener("click", printInConsole);
document.querySelector("l2-2").addEventListener("click", printInConsole);

Но при нажатии на элемент "#l2-1" и "l2-2" они исчезали, срабатывало событие для "#l1-1". Попытался обойти так:

if(event.srcElement == this) ...

Но тогда события для "#l2-1" и "#l2-2" вообще не срабатывают.

Подскажите как реализовать для каждого из элементов своё событие, чтобы на него не откликались другие элементы.