React事件处理器传递event对象的正确方式及相关疑问

Great question! Let's break this down step by step to clear up your confusion about event objects and proper event propagation in React.

1. Why does Option #2 log an event at all? #

In your Option #2 code:

<S.Inner_DIV2 onClick={()=>handleInnerDivClick(event,'>>> INNER DIV EVENT HANDLER')} >

The event variable here isn't passed by the arrow function—it’s actually pulling from the global window.event object. This is a leftover from older DOM event models (DOM0), where browsers automatically attach the active event to the global window context when an event fires.

Even without explicitly accepting the event in your arrow function, the browser makes this global object available, which is why your handler can still access and log it.

2. Are the event objects in Option #2 and #3 different? #

Yes, they’re completely distinct:

• Option #3’s event: This is a React SyntheticEvent object. React wraps native browser events into these synthetic events to provide a consistent API across all browsers, and they power React’s event delegation system.
• Option #2’s event: This is the raw native browser event object from window.event. It hasn’t been processed by React’s synthetic event layer.

If you uncomment the console.log(event) line (even with the 10-second delay), you’ll see totally different object structures confirming this.

3. What’s the correct way to pass the event object to a handler? #

The only reliable, React-recommended approach is Option #3:

<S.Inner_DIV3 onClick={(event) => handleInnerDivClick(event, '>>> INNER DIV EVENT HANDLER')} >

An alternative is using Function.prototype.bind (just adjust your handler’s parameter order):

// Update handler to accept the message first, then event
function handleInnerDivClick(msg, event) {
  event.stopPropagation();
  console.log(msg);
}

// Bind the message argument—React will pass the event as the final parameter
<S.Inner_DIV3 onClick={handleInnerDivClick.bind(null, '>>> INNER DIV EVENT HANDLER')} >

Why this works (and Option #2 doesn’t for propagation): #

• Consistency: SyntheticEvents smooth out cross-browser quirks, ensuring your code behaves the same everywhere.
• Proper bubbling control: Calling event.stopPropagation() on a SyntheticEvent correctly stops the event from propagating through React’s event delegation system. In Option #2, calling stopPropagation() on the native window.event doesn’t affect React’s synthetic event flow—so your outer div’s handler still fires!
• No global dependencies: Relying on window.event is fragile. It can be overwritten by other concurrent events, leading to hard-to-debug bugs.

Quick Recap #

• Option #2 works by accident (thanks to the global window.event), but it’s unreliable and not recommended.
• Option #3 uses React’s intended synthetic event system, giving you full control over event behavior.

内容的提问来源于stack exchange，提问作者cbdeveloper