Mouse Events- Mouseover/out/enter

Mouseout When Leaving for a Child

When the pointer travels from one element to its descendent, such as from parent to child, mouseout is triggered.

<div id="parent">
 <div id="child">...</div>
</div>

We get mouseout on parent if we're on parent and then move the cursor deeper into child!

That may appear unusual, but it's simple to explain. The mouse cursor can only be over one element at a time, according to browser logic — the most nested one and top by z-index.

If it moves on to another element (even a descendant), the previous one is dropped.

Mouseenter

When a pointing device (typically a mouse) is first moved so that its hotspot is within the element at which the event was fired, the mouseenter event is fired. Mouseenter differs from mouseover in that it does not bubble, and if a pointer moves to its own physical space from one of its descendants' physical space, it is not conveyed to any descendants.

However, there are two significant differences:

• Transitions to and from descendants within the element are not counted.
• The mouseenter is not bubbled.

These occurrences are quite straightforward. Mouseenter is triggered when the pointer enters an element. It makes no difference where the pointer is inside the element or its descendants.

Event Delegation

Mouseenter events are very basic and straightforward to use. It does not, however, bubble. As a result, we won't be able to employ event delegation with it. Consider the case where we need to handle mouse enter for table cells. There are hundreds of cells in total.

Setting the handler on <table> and processing events there would be the natural answer. However, mouseenter does not cause a bubble. If such an event occurs on <td>, only that <td> handler will be able to capture it.

Mouseenter on <table> handlers only fires when the pointer enters the table as a whole. It's difficult to get any information regarding transitions within it.

Let's employ the mouseover/mouseout method:

// let's highlight an element under the pointer
table.onmouseover = function(event) {
  let target = event.target;
  target.style.background = 'pink';
};

table.onmouseout = function(event) {
  let target = event.target;
  target.style.background = '';
};

Practice it on an online javascript compiler.

Frequently Asked Questions

1. When does the mouseover event occur?
   When a mouse cursor passes over an element, the mouseover event occurs.
    
2. Is it possible to employ event delegation with mouseenter?
   No, it is not possible to employ event delegation with mouseenter.
    
3. How does mouseenter differ from mouseover?
   Mouseenter differs from mouseover in that it does not bubble, and if a pointer moves to its own physical space from one of its descendants' physical space, it is not conveyed to any descendants.

Conclusion

In this article, we have extensively discussed mouse events mouseover, mouseout and mouseenter and event delegation.

We hope that this blog has helped you enhance your knowledge regarding mouse events mouseover, mouseout and mouseenter. You can also read our blog on Drag and Drop with the Mouse. If you want to learn more, check out our articles on Code studio.

Do upvote our blog to help other ninjas grow.
 

Happy Coding!