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:
Approach to implement onMouseMoveCapture Event:
- Mouse Movement Function: The React app defines a function named
onMouseMoveCaptureHandlerthat 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
