Use Inline Event Handlers for trapBubbledEventsLocal and the iOS Safari Click Hack

[sebmarkbage]

We currently do a lot of work at the end of mount to find all the nodes and attach listeners after the fact. This is severely impacting initial rendering performance of <form />, <img /> and click handlers.

Instead we can just use inline event handlers in the innerHTML string. For the iOS Safari hack it should be trivial. The handler doesn't even have to do anything.

The inline event handler would need to either redispatch the event, or call into some other event handler system. Probably a global listeners.

window._handleReactEvent = ...;

<img onload="_handleReactEvent(event)">

Since there could potentially be multiple Reacts, they should probably chain the handler if there already is one registered. (Although multiple Reacts in the same document is already pretty broken in this regard.)

It doesn't have to be a global. Since inline event handlers gets the element added as a with(element) scope around itself. It is equivalent to add it to the prototype:

Element.prototype._handleReactEvent = ...;

or

HTMLImgElement.prototype._handleReactEvent = ...;

This makes them a bit more hidden, unobtrusive.

We still need to render this string for server-side rendering to avoid needing to change the HTML or wire up handlers after-the-fact on the client.

Since these events can fire before React has loaded, we need to check for the existence of the handler before it is used.

<img onload="this._handleReactEvent&&_handleReactEvent(event)">

It is critical that this string is short - for innerHTML string concat performance and network performance. Yet it needs to be unlikely to collide with anything else.

Is there a unicode character we could use?