Почему parent node не реагирует на однотипное событие child node в этом куске кода (пример из eloquent JavaScript 2 ed. 14 глава)?

Question

[0x4d59]

Не могу понять как работает эта штука. Каким образом здесь реализована эта защита от баббл-эффекта?
Заранее спасибо!

<p>Hover over this <strong>paragraph</strong>.</p>
<script>
    var para = document.querySelector("p");
    function isInside(node, target) {
      for (; node != null; node = node.parentNode)
        if (node == target) return true;
    }
    para.addEventListener("mouseover", function(event) {
      if (!isInside(event.relatedTarget, para))
        para.style.color = "red";
    });
    para.addEventListener("mouseout", function(event) {
      if (!isInside(event.relatedTarget, para))
        para.style.color = "";
    });
</script>

Answer 1

[Mykola Dzedzinskyi]

а здесь разве есть защита от bubble эффекта? Вы же вешаете слушателя на параграф, поэтому при mouseover/out на все что есть внутри, благодаря bubblin код срабатывает. Без той проверки, все так же работает.
if (!isInside(event.relatedTarget, para)) проверяет, не находиться ли элемент, с которого только что ушел курсор внутри параграфа