javascript - React onFocus and onFocusCapture difference - Stack Overflow

admin管理员组

文章数量:1192330

I was wondering what is the difference between react events: onFocus and onFocusCapture. I could not find an appropriate answer on react's documentation page.

<OutlinedInput
    label="price from"
    onFocus={handlePriceFocus}
/>
<OutlinedInput
    label="price to"
    onFocusCapture={handlePriceFocus}
/>

In my case, it seems like onFocus and onFocusCapture do the same functionality because I have not noticed any difference when using those two events.

I was wondering what is the difference between react events: onFocus and onFocusCapture. I could not find an appropriate answer on react's documentation page.

<OutlinedInput
    label="price from"
    onFocus={handlePriceFocus}
/>
<OutlinedInput
    label="price to"
    onFocusCapture={handlePriceFocus}
/>

In my case, it seems like onFocus and onFocusCapture do the same functionality because I have not noticed any difference when using those two events.

• javascript
• reactjs
• dom-events

Share Improve this question Follow edited Mar 25, 2021 at 13:01 Brian Tompsett - 汤莱恩 5,8837272 gold badges6161 silver badges133133 bronze badges asked Mar 25, 2021 at 11:38 Ismoil ShokirovIsmoil Shokirov 3,01144 gold badges2323 silver badges3939 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 27

This is what React say in their documentation:

"The event handlers below are triggered by an event in the bubbling phase. To register an event handler for the capture phase, append Capture to the event name; for example, instead of using onClick, you would use onClickCapture to handle the click event in the capture phase." https://react.dev/learn/responding-to-events#capture-phase-events

So, I think there isn't anymore to say about that. What I understand it's like without 'capture' the code is executed after the event and with 'capture' it's executed before.

本文标签： javascriptReact onFocus and onFocusCapture differenceStack Overflow