Skip to content
geeksforgeeks
  • Courses
    • DSA to Development
    • Get IBM Certification
    • Newly Launched!
      • Master Django Framework
      • Become AWS Certified
    • For Working Professionals
      • Interview 101: DSA & System Design
      • Data Science Training Program
      • JAVA Backend Development (Live)
      • DevOps Engineering (LIVE)
      • Data Structures & Algorithms in Python
    • For Students
      • Placement Preparation Course
      • Data Science (Live)
      • Data Structure & Algorithm-Self Paced (C++/JAVA)
      • Master Competitive Programming (Live)
      • Full Stack Development with React & Node JS (Live)
    • Full Stack Development
    • Data Science Program
    • All Courses
  • Tutorials
    • Data Structures & Algorithms
    • ML & Data Science
    • Interview Corner
    • Programming Languages
    • Web Development
    • CS Subjects
    • DevOps And Linux
    • School Learning
  • Practice
    • Build your AI Agent
    • GfG 160
    • Problem of the Day
    • Practice Coding Problems
    • GfG SDE Sheet
  • Contests
    • Accenture Hackathon (Ending Soon!)
    • GfG Weekly [Rated Contest]
    • Job-A-Thon Hiring Challenge
    • All Contests and Events
  • React Tutorial
  • React Exercise
  • React Basic Concepts
  • React Components
  • React Props
  • React Hooks
  • React Router
  • React Advanced
  • React Examples
  • React Interview Questions
  • React Projects
  • Next.js Tutorial
  • React Bootstrap
  • React Material UI
  • React Ant Design
  • React Desktop
  • React Rebass
  • React Blueprint
  • JavaScript
  • Web Technology
Open In App
Next Article:
What is onMouseOverCapture Event in React JS ?
Next article icon

What is onBlurCapture Event in React JS ?

Last Updated : 11 Dec, 2023
Comments
Improve
Suggest changes
Like Article
Like
Report

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



Next Article
What is onMouseOverCapture Event in React JS ?
author
aniluom
Improve
Article Tags :
  • ReactJS
  • Web Technologies
  • React-Questions

Similar Reads

  • What is onMouseOverCapture Event in React JS ?
    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. Synta
    1 min read
  • What is onCutCapture Event in ReactJS ?
    React onCutCapture is an event handler that gets triggered whenever we cut a text. like oncut, but the difference is that onCutCapture acts in the capture phase whereas onCut acts in the bubbling phase i.e. phases of an event. Prerequisites:NodeJS or NPMReactJSSyntax: <input onCutCapture={functio
    1 min read
  • What is onClickCapture Event in ReactJS?
    The onClickCapture event in React is part of React’s event handling system, and it is used to handle click events during the capture phase of event propagation. It is a variant of the standard onClick event, but it differs when it is triggered in the event lifecycle. In the event propagation model,
    5 min read
  • What is onCopyCapture Event in ReactJS ?
    React onCopyCapture is an event handler that gets triggered whenever we copy the text on the webpage. like onCopy, but the difference is that onCopyCapture acts in the capture phase whereas onBlur acts in the bubbling phase i.e. phases of an event. Prerequisites:NodeJS or NPMReact JSPhases of JavaSc
    1 min read
  • What is onPasteCapture Event in ReactJS ?
    React onPasteCapture is an event handler that gets triggered whenever we paste some text in an input field. like onpaste, but the difference is that onPasteCapture acts in the capture phase whereas onPaste acts in the bubbling phase i.e. phases of an event. Prerequisites:NodeJS or NPMReact JSPhases
    1 min read
  • What is onDoubleClickCapture Event in ReactJS ?
    React onDoubleClickCapture is an event handler that gets triggered whenever we double click the element. like ondblclick, but the difference is that onDoubleClickCapture acts in the capture phase whereas onDoubleClick acts in the bubbling phase i.e. phases of an event. Prerequisite: Introduction and
    2 min read
  • What is onBeforeInputCapture Event in ReactJS ?
    onBeforeInputCapture Event in ReactJS is an event handler that gets triggered when we make any modifications to the input file, like onBeforeInput, but the difference is that onBeforeInputCapture acts in the capture phase whereas onBeforeInput acts in the bubbling phase i,e. phases of an event. Prer
    2 min read
  • 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 capturin
    2 min read
  • What is onMouseDownCapture Event in ReactJS?
    React onMouseDownCapture is an event handler that gets triggered whenever we press the mouse button. like onMouseDown, but the difference is that onMouseDownCapture acts in the capture phase whereas onMouseDown acts in the bubbling phase i.e. phases of an event. Prerequisites:NodeJS or NPMReact JSPh
    1 min read
  • 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:React JSPhases of JavaScript EventApp
    2 min read
geeksforgeeks-footer-logo
Corporate & Communications Address:
A-143, 7th Floor, Sovereign Corporate Tower, Sector- 136, Noida, Uttar Pradesh (201305)
Registered Address:
K 061, Tower K, Gulshan Vivante Apartment, Sector 137, Noida, Gautam Buddh Nagar, Uttar Pradesh, 201305
GFG App on Play Store GFG App on App Store
Advertise with us
  • Company
  • About Us
  • Legal
  • Privacy Policy
  • In Media
  • Contact Us
  • Advertise with us
  • GFG Corporate Solution
  • Placement Training Program
  • Languages
  • Python
  • Java
  • C++
  • PHP
  • GoLang
  • SQL
  • R Language
  • Android Tutorial
  • Tutorials Archive
  • DSA
  • Data Structures
  • Algorithms
  • DSA for Beginners
  • Basic DSA Problems
  • DSA Roadmap
  • Top 100 DSA Interview Problems
  • DSA Roadmap by Sandeep Jain
  • All Cheat Sheets
  • Data Science & ML
  • Data Science With Python
  • Data Science For Beginner
  • Machine Learning
  • ML Maths
  • Data Visualisation
  • Pandas
  • NumPy
  • NLP
  • Deep Learning
  • Web Technologies
  • HTML
  • CSS
  • JavaScript
  • TypeScript
  • ReactJS
  • NextJS
  • Bootstrap
  • Web Design
  • Python Tutorial
  • Python Programming Examples
  • Python Projects
  • Python Tkinter
  • Python Web Scraping
  • OpenCV Tutorial
  • Python Interview Question
  • Django
  • Computer Science
  • Operating Systems
  • Computer Network
  • Database Management System
  • Software Engineering
  • Digital Logic Design
  • Engineering Maths
  • Software Development
  • Software Testing
  • DevOps
  • Git
  • Linux
  • AWS
  • Docker
  • Kubernetes
  • Azure
  • GCP
  • DevOps Roadmap
  • System Design
  • High Level Design
  • Low Level Design
  • UML Diagrams
  • Interview Guide
  • Design Patterns
  • OOAD
  • System Design Bootcamp
  • Interview Questions
  • Inteview Preparation
  • Competitive Programming
  • Top DS or Algo for CP
  • Company-Wise Recruitment Process
  • Company-Wise Preparation
  • Aptitude Preparation
  • Puzzles
  • School Subjects
  • Mathematics
  • Physics
  • Chemistry
  • Biology
  • Social Science
  • English Grammar
  • Commerce
  • World GK
  • GeeksforGeeks Videos
  • DSA
  • Python
  • Java
  • C++
  • Web Development
  • Data Science
  • CS Subjects
@GeeksforGeeks, Sanchhaya Education Private Limited, All rights reserved
We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox
Improvement
Suggest Changes
Help us improve. Share your suggestions to enhance the article. Contribute your expertise and make a difference in the GeeksforGeeks portal.
geeksforgeeks-suggest-icon
Create Improvement
Enhance the article with your expertise. Contribute to the GeeksforGeeks community and help create better learning resources for all.
geeksforgeeks-improvement-icon
Suggest Changes
min 4 words, max Words Limit:1000

Thank You!

Your suggestions are valuable to us.

What kind of Experience do you want to share?

Interview Experiences
Admission Experiences
Career Journeys
Work Experiences
Campus Experiences
Competitive Exam Experiences