Brief introduction to mouseEnter and Mouseover, Mouseout and mouseleave

Introduction (MDN)

Mouseover: The mouseover event is raised when the pointer device moves to an element or its child that has a listener. Mouseenter: The MouseEnter event is triggered when a fixed point device (usually a mouse) moves over an element

Mouseout: The event is emitted when the pointer device (usually the mouse) moves out of the element attached to the listener or closes one of its children. Mouseleave: The Mouseleave event is triggered when the pointer to a pointing device (usually a mouse) moves out of an element.

Similarities and Differences (Abbreviated version)

Execution order

<div></div>
<script>
    var div = document.getElementsByTagName('div') [0]; eventBind(div,'mouseenter'.'mouseenter');
    eventBind(div, 'mouseover'.'mouseover');
    eventBind(div, 'mouseout'.'mouseout');
    eventBind(div, 'mouseleave'.'mouseleave');
    functionEventBind (ele, event, output){eventBind(ele, event, output){'event'.function(){ console.log(output); </script>Copy the code

The trigger condition

The mouseOver event is raised whenever the mouse pointer passes through the selected element or its children or grandchildren. The MouseEnter event is raised only when the mouse pointer passes through the selected element

<div> <h2> the bound <span class="eventType"></span> The event is triggered <span class="count">0</span></h2> </div> <div> <h2> The bound <span class="eventType"></span> The event is triggered <span class="count">0</span></h2>
</div>
<script>
    var div = document.getElementsByTagName('div');
    function bindEvent(ele, event, output){
        var eventType = ele.getElementsByClassName('eventType') [0]; var count = ele.getElementsByClassName('count') [0]; eventType.textContent = event; ele.addEventListener(event,function(){ count.textContent = parseInt(count.textContent)+1; })}bindEvent(div[0], 'mouseover'.'mouseover');
    bindEvent(div[1], 'mouseenter'.'mouseenter');
</script>
Copy the code

Tips: Each individual arrow in the diagram triggers the corresponding event

According to the definition given in the introduction, mouseleave events are emitted only when the mouse pointer passes over the selected element, whether the mouse pointer passes over the selected element or its children or grandchildren

/ /... Let me borrow the codebindEvent(div[0], 'mouseleave'.'mouseleave');
bindEvent(div[1], 'mouseout'.'mouseout'); // The test display is shown belowCopy the code

The bubbling

The mouseEnter event does not bubble

<div class="outer">
    <div class="inner">
    </div>
</div>
<script>
    var div = document.getElementsByTagName('div');
    function bindEvent(ele, event, output){
        ele.addEventListener(event,function(e){ console.log(output); })}bindEvent(div[0], 'mouseover'.'outer');
    bindEvent(div[1], 'mouseover'.'inner');
</script>
Copy the code

digression

There are two families. The couple in the first family are called “over” and “out”. They care about their children and grandchildren, who will help them with everything. The other couple, enter and Leave, are aloof, don’t interfere or participate in their children’s activities, and don’t bubble up in the family

If the article has what problem to still ask each see an officer to point out, thank!