What is onBlurCapture Event in React JS ?

React JS is a popular JavaScript library for building user interfaces, and it provides a wide range of event-handling mechanisms to create interactive web applications. One such event in React JS is the onBlurCapture event. We will explore what the onBlurCapture event is, how it works, and how it can be used in React JS applications.

What is onBlurCapture Event in ReactJS?

The onBlurCapture event is triggered when an element loses focus. It differs from the regular onBlur event in that it is a capturing event, which means that it is fired on the capturing phase of the event propagation instead of the bubbling phase. The capturing phase occurs before the bubbling phase, during the process of event propagation through the DOM (Document Object Model) tree.

Syntax:

<input onBlurCapture={function}/>

Steps to Create React Application:

Step 1: Create a React application using the following command:

npx create-react-app project

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

cd project

Project Structure:

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: In this example, we are creating an input field with the label “Enter your name:”, and we are adding a default value “default” to it. 

• The onBlurCapture event will call onBlurCaptureHandler, a function that will show the text “you moved outside the text box, onBlurCapture is triggered” whenever we click outside the input field in the console.

Javascript

function App() {
    const onBlurCaptureHandler = () => {
        console.log("you moved outside the"
            + " text box, onBlurCapture is triggered");
    };
    return (
        <div className="App">
            <h1> Hey Geek!</h1>
            <label>Enter your name:</label>
            <input
                type="text"
                defaultValue="default"
                onBlurCapture={onBlurCaptureHandler}
            />
        </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