JSFiddle - React, Tailwind, and code Playground

HTML

<p>When using jquery (edge) the event.type reports "mouseenter" in a "mouseover" event listener, when the mouse is moved over the purple box.
This only occurs when the element also has a mouseenter event listener attached. 
</p>
<p>
Same is true for the combination "mouseleave" / "mouseout"
</p>
<p>
    <br>
    Count event.type in mouseover / mouseout listeners:
</p>
<div class="node">
    <p>mouseenter event</p>
    <p class="mouseenter">0</p>
    <p>mouseover event</p>
    <p class="mouseover">0</p>
    <p>mouseleave event</p>
    <p class="mouseleave">0</p>
    <p>mouseout event</p>
    <p class="mouseout">0</p>
</div>

</div>

CSS

div {
    margin: 20px;
    border:1px solid #000;
    background-color:#c3c;
    color: #fff;
}

JavaScript

var counters = [];

$(".node").bind("mouseenter", function() { });
$(".node").bind("mouseleave", function() { });

function counterCallback(event) {
    var type = event.type;
    var count = (counters[type] || 0)+1;
    counters[type] = count;
    $("."+type).text(count);
}

$(".node").bind("mouseover", counterCallback);
$(".node").bind("mouseout", counterCallback);