Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Table of contents
1.
Introduction
2.
Mouseover and Mouseout
3.
Mouseout When Leaving for a Child
4.
Mouseenter
5.
Event Delegation
6.
Frequently Asked Questions
7.
Conclusion
Last Updated: Mar 27, 2024
Easy

Mouse Events- Mouseover/out/enter

Create a resume that lands you SDE interviews at MAANG
Speaker
Anubhav Sinha
SDE-2 @
12 Jun, 2024 @ 01:30 PM

Introduction

When a user interacts with a pointing device (such as a mouse), the events are known as MouseEvents. Click, dblclick, mouseup, and mousedown are all common events in this interface. MouseEvent is derived from UIEvent, which in turn is derived from Event.

Such events can occur on devices other than the mouse, such as phones and tablets, where they are emulated for compatibility. This blog will go over mouse events such as mouseover/out/enter and their properties in greater depth. So without any further delay, let’s dive deeper into the topic!

Also Read, Javascript hasOwnProperty

Mouseover and Mouseout

Source: Kirupa

When a mouse cursor passes over an element, the mouseover event occurs, and when it passes over an element, the mouseout event occurs.

These events are unique in that they have the relatedTarget property. This property is useful in conjunction with target. When a mouse moves from one element to another, one becomes the target, while the other becomes relatedTarget.

For the mouseover event:

  • The element where the mouse landed is called Event.target.
  • The element from which the mouse originated (relatedTarget target) is represented by Event.relatedTarget.

The reverse is true for mouseout:

  • The element that the mouse left is represented by event.target.
  • The new under-the-pointer element that the mouse left for (target relatedTarget) is event.relatedTarget.

Note: relatedTarget may or may not be null.

It is possible for the relatedTarget property to be null.

That's normal, because it only signifies the mouse came from outside the window, not from another element. Or that it had walked away from the window.

When utilising Event.relatedTarget in our code, we should keep that option in mind. There will be an error if we try to access Event.relatedTarget.tagName.

Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

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!

Previous article
Dispatching custom events
Next article
Drag and Drop with Mouse
Live masterclass