---

layout: post title: Event Handling and Synthetic Events date: 2018-04-24 —

Event Handling and Synthetic Events

With React you simply pass your event handler as a camelCased prop similar to how you’d do it in normal HTML. React ensures that all events behave similarly in all browsers by implementing a synthetic event system. That is, React knows how to bubble and capture events according to the spec, and the events passed to your event handler are guaranteed to be consistent with the W3C spec, regardless of which browser you’re using.

Under the Hood: Auto binding and Event Delegation

Under the hood, React does a few things to keep your code performant and easy to understand. Auto binding: When creating callbacks in JavaScript, you usually need to explicitly bind a method to its instance such that the value of this is correct. With React, every method is automatically bound to its component instance (except when using ES6 class syntax). React caches the bound method such that it’s extremely CPU and memory efficient.

Event delegation: React doesn’t actually attach event handlers to the nodes themselves. When React starts up, it starts listening for all events at the top level using a single event listener. When a component is mounted or unmounted, the event handlers are simply added or removed from an internal mapping. When an event occurs, React knows how to dispatch it using this mapping. When there are no event handlers left in the mapping, React’s event handlers are simple no-ops.