Mouse Enter event fires on the descendents

When we set `mouseenter` event on the parent element and then call `e.stopPropagation();` ir `e.stopImmediatePropagation();` event still fires on the descendents.

HTML

<section id="parent" class="c-parent">
  <div class="c-parent__content">
    <h3 class="c-parent__title">Title</h3>
    <p class="c-parent__text">some text</p>
  </div>
</section>

CSS

.c-parent {
  width: 300px;
  height: 300px;
  padding: 1rem;
  border: 1px solid firebrick;
}

.c-parent__content {
  height: 100%;
  border: 1px solid blue;
}

.c-parent__title {
  padding: 1rem;
  border: 1px solid pink;
}

.c-parent__text {
  padding: 1rem;
  border: 1px solid green;
}

JavaScript

;(function () {
  "use strict";
  
  const parentElem = document.getElementById("parent"); 

  
  parentElem.addEventListener("mouseenter", parentOnMouseEnter, true);
  parentElem.addEventListener("mouseleave", parentOnMouseLeave, true);
  
  /*============================
        EVENT LISTENERS
  ==============================*/
  function parentOnMouseEnter (e) {
    const target = e.target;
    const currentTarget = e.currentTarget;
    const eventPhase = e.eventPhase;
    //debugger; 
    console.log("Mouse Enter -> target:", target.className);
    console.log("Mouse Enter -> currentTarget:", currentTarget.className);
    console.log("Mouse Enter -> EventPhase:", eventPhase); 
    e.stopPropagation();
    e.stopImmediatePropagation();
  };
  
  
  function parentOnMouseLeave (e) {
    const target = e.target;
    const currentTarget = e.currentTarget;
    const eventPhase = e.eventPhase;
    console.log("Mouse Leave -> target:", target.className);
    console.log("Mouse Leave -> currentTarget:", currentTarget.className);
    console.log("Mouse Leave -> EventPhase:", eventPhase);  
    //debugger; 
    e.stopPropagation();
  };

  
})();