ReactJS 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 ReactJS is the onBlurCapture event. In this article, we will explore what the onBlurCapture event is, how it works, and how it can be used in ReactJS applications.
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.
Prerequisite:
- Introduction and installation of ReactJS
- Phases of JavaScript Event
Syntax:
<input onBlurCapture={function}/>
Creating React Application:
Step 1: Create a react project folder, for that open the terminal, and write the command npm create-react-app folder name. If you have already installed create-react-app globally. If you haven’t then install create-react-app globally by using the command npm -g create-react-app or can install locally by npm i create-react-app.
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: It will look like this:
Example: In this example, we are creating an input field with the label “Enter your name:”, and we are adding a default value as “default” to it.
The onBlurCapture event will call onBlurCaptureHandler, a function that will show a text “you moved outside the text box, onBlurCapture is triggered” whenever we will click outside the input field in the console.
App.js
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:
