React17 Event Mechanism Deep Dive: Propagation, Binding, and Delegation

React17 introduces significant changes to event handling compared to React16. The article details the three-phase event propagation (capture, target, bubble) and how React handles it. It compares different event binding methods: inline HTML, DOM0, and addEventListener, highlighting React's use of addEventListener for better flexibility. Event delegation is explained as a technique to manage numerous event listeners efficiently by delegating to a parent element. The article also addresses browser event differences, noting that React normalizes events to ensure consistent behavior across browsers. Key points include the removal of scroll event bubbling in React17 and the use of synthetic events for cross-browser compatibility.

The content covers React's event classification into plugins like SimpleEventPlugin and BeforeInputEventPlugin, which manage specific event types. It explains how React collects events through plugins and processes them during rendering. The article also discusses the removal of event pooling in React17 and the shift from document-level to root-level event delegation, improving compatibility with multiple React applications.

Code examples demonstrate event binding techniques, including inline HTML, DOM0, and addEventListener. The article emphasizes React's approach to handling browser inconsistencies, such as normalizing event properties and providing synthetic events with consistent APIs. It concludes with the importance of event delegation in React for performance and maintainability.