What is onChangeCapture Event in ReactJS ?

ReactJS, a popular JavaScript library for building user interfaces, provides a wide range of events that developers can utilize to create interactive and dynamic applications. One such event is the onChangeCapture event, which is specifically designed for handling changes to form inputs and capturing events in the capturing phase of the event propagation.

Prerequisites:

• NodeJS or NPM
• React JS
• Phases of JavaScript Event

Syntax:

<input onChangeCapture={function}/>

Steps to Create the React Application And Installing Module:

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: This example features an input field with the label "Please Enter your name:" and type text, utilizing the onChangeCapture event to trigger the onChangeCaptureHandler function, which logs the current input change to the console.

function App() {
    const onChangeCaptureHandler = (e) => {
        console.log(e.target.value);
    };
    return (
        <div className="App">
            <h1> Hey Geek!</h1>
            <label>Please Enter your name:</label>
            <input type="text"
                onChangeCapture={onChangeCaptureHandler} />
        </div>
    );
}

export default App;

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

npm start

Output: