Mouse Events: onMouseOut and onMouseLeave in React
Tags: beginners, javascript, react
Published: 2023-02-24 13:07:40

JavaScript events enable us to interact with the webpage in a dynamic manner. There are wide variety of interaction events such as clicking a button, hovering over a dropdown, pressing a key on the keyboard etc. 

Mouse Events are the events that occur when the mouse interacts with the HTML document. Here, we will distinguish between 2 mouse events that are used when a mouse hovers over an HTML element or React component.


### 1. onMouseOut Event: 
This event will trigger when a mouse cursor is no longer within the element or one of its children. It will also trigger when the cursor enters any of the child element, because the child element hides the visible area of the parent.

<b>Behaviour of onMouseOut Event</b>
<br>
<img alt='Mouse Out Flow Diagram' src='https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseleave_event/mouseout.png'>
<br>

A single onMouseOut event is applied on the deepest nested `div` in the above image. Now, when it triggers, it starts from that `div` and start bubbling up the hierarchy until it is canceled by a handler or reaches the root.

###2. onMouseLeave Event:
The onMouseLeave event is fired when the mouse cursor of a pointing device is moved out of the HTML or React element.


<b>Behaviour of onMouseLeave Event</b>
<br>
<img alt='Mouse Out Flow Diagram' src='https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseleave_event/mouseleave.png'>
<br>

In this image, One onMouseLeave event is applied to each of the `div` element. Now, when the pointer moves from the text to an area outside of the most outer div represented here, four events are triggered with respect to each of the four `div` elements in the hierarchy.

### Difference b/w onMouseOut and OnMouseLeave
The following example illustrates the difference between onMouseOut and onMouseLeave events. In this example video, when we move the cursor to one of the child `<li>` elements and after that exit from parent `<ul>`:

* The onMouseLeave event fires only 1 time, giving `<ul>` an orange bg-color for 1s. 

* The onMouseOut event fire 3 times. First, when we enter the child element because it hides the visible area of underlying `ul` item. Second, when we exit from the child `<li>` element and the third time when we exit from the parent `<ul>` element.

![onMouseOut and OnMouseLeave Event](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gbgl6cucfqy9hcacr9qd.gif)

#### Javascript ####
``` Javascript
// src/App.js
import React from "react";
import "./styles.css";

export default function App() {
  const bullets = ['Item 1', 'Item 2', 'Item 3', 'Item 4'];
  const handleMouseEvent = (e) => {
    e.persist();
    e.target.style.backgroundColor = "orange";

    setTimeout(() => {
      e.target.style.backgroundColor = "";
    }, 1000);
  };


  return (
    <div className="App">
      <h3>onMouseOut Event:</h3>
      <ul className="menu" onMouseOut={handleMouseEvent}>
        {bullets.map((item) => (
          <li className="menu-item">{item}</li>
        ))}
      </ul>

      <h3>onMouseLeave Event:</h3>
      <ul className="menu" onMouseLeave={handleMouseEvent}>
        {bullets.map((item) => (
          <li className="menu-item">{item}</li>
        ))}
      </ul>
    </div>
  );
}

```

### Takeaway
It's very easy to get confused between these two handlers when applying it on hovering a dropdown menu or any other element. I hope this article has helped you understand these handlers clearly. Additionally, when using other event handlers, we need to have a clear understanding of them before applying in our project.

*Happy Coding!*