What is onMouseMoveCapture Event in ReactJS ?

The onMouseMoveCapture in React serves as an event handler activated when the mouse moves over an element. Unlike onMouseMove, it operates during the capture phase, contrasting with onMouseMove, which functions during the bubbling phase of an event.

Prerequisite:

• React JS
• Phases of JavaScript Event

Approach to implement onMouseMoveCapture Event:

• Mouse Movement Function: The React app defines a function named onMouseMoveCaptureHandler that logs a message when the mouse moves.
• User Greeting: The app displays a greeting “Hey Geek!” in an <h1> tag.
• Interactive Element: A paragraph encourages users to move their mouse on it, triggering the defined function (onMouseMoveCaptureHandler) when the mouse moves over the paragraph.

Syntax:

<element  onMouseMoveCapture={function}/>

Steps to Create React Application And Installing Module:

Step 1: Create a react project folder and write the command npm create-react-app folder name.

npx create-react-app project

Step 2: After creating your project folder(i.e. project), move to it by using the following command.

cd project

Project Structure:

Project Structure

Example: We are adding a text within the <p> tag i.e. ” Move your mouse on this line!”. The onMouseMoveCapture event will call onMouseMoveCaptureHandler, a function that will show a text “onMouseMoveCapture Event!” whenever we move the mouse over the element, in the console.

Javascript

function App() {
    const onMouseMoveCaptureHandler = () => {
        console.log("onMouseMoveCapture Event!");
    };
    return (
        <div className="App">
            <h1> Hey Geek!</h1>
            <p
                onMouseMoveCapture=
                    {onMouseMoveCaptureHandler}>
                Move your mouse on this line!
            </p>

        </div>
    );
}

export default App;

Step to Run the Application: Run the application using the following command from the root directory of the project.

npm start

Output:

Output