What is onClickCapture Event in ReactJS ?

Last Updated : 10 Nov, 2023

React onClickCapture is an event handler that gets triggered whenever we click on an element. like onclick, but the difference is that onClickCapture acts in the capture phase whereas onClick acts in the bubbling phase i.e. phases of an event.

Syntax:

<button onClickCapture={function}/>

Prerequisite:

Approach:

To show the working of onClickCapture we will pass a callback function that log the occurrence on the console when the click capture event triggers.

Steps to Create React Application:

Step 1: Initialise the React Project using this command in the terminal.

npm create-react-app project

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

cd project

Project Structure:

Example: This example implements onClickCapture event and log it on the console window.

Javascript

function App() {
    const onClickCaptureHandler = () => {
        console.log("onClickCapture!");
    };
    return (
        <div className="App">
            <h1> Hey Geek!</h1>
            <label>Please click on the button</label>
            <button onClickCapture={onClickCaptureHandler}>
                click Me!
            </button>
        </div>
    );
}
 
export default App;