What is onMouseOverCapture Event in React JS ?

Last Updated : 08 Dec, 2023

onMouseOverCapture is like a detective that watches for when your mouse pointer hovers over an element or its children on a webpage. It’s similar to onMouseOver, but the key difference is that onMouseOverCapture is like a spy in the early phase, while onMouseOver is more like a late responder.

Syntax:

<element onMouseOverCapture={function}/>

Steps to Create the React Application:

Step 1: Create a react project folder.

npm 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:

The updated dependencies in package.json file will look like:

"dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4",
}

Example: We are adding a text within the <p> tag. The onMouseOverCapture event will call onMouseOverCaptureHandler, a function that will show a text “onMouseOverCapture Event!” whenever we move the pointer of the mouse over the element, in the console.

Javascript

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