Support Passive Event Listeners

[sebmarkbage]

https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md

It would be good to have everything be passive by default and only opt-in to active when needed. E.g. you could listen to text input events but only preventDefault or used controlled behavior when you have active listeners.

Similarly, we could unify this with React Native's threading model. E.g. one thing we could do there is synchronously block the UI thread when there are active listeners such as handling keystrokes.

cc @vjeux @ide

[jhgg]

This landed in Chrome 51. Is there any updated plan to support this in React? :O

[aleksandar-b]

How is this possible if React has only one event listener on document, and then delegates to others?
@sebmarkbage

[followdarko]

What's the current status of issue with Passive Events ?

[radubrehar]

I just hit a warning in chrome about handling the wheel event, which could be optimized if it were registered as a passive event handler. So having this in React would be neat!

[nolanlawson]

You'll also want to handle arbitrary options, such as once which has already landed in Firefox nightly: https://twitter.com/mozhacks/status/758763803991474176. Full list: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

[sebmarkbage]

FWIW, Facebook listens to active wheel events to block outer scrolling when sidebars or chat windows are scrolled. We can't implement the UI without it. We still want to support this as an option but the problem space is still incomplete so there might evolve alternative solutions to this problem that doesn't involve passive event listeners. So it is still an active design space.

[romulof]

It's important to keep both active listeners and add support passive ones.
On desktop applications you don't see any difference, but on mobile apps passive scroll listeners give a great speed boost.

Little suggestion:

<SomeElement
  onScroll={this.onScrollThatCallsPreventDefault}
  onScrollPassive={this.onScrollThatJustListens}
  ...this.props
/>

[radubrehar]

@romulof yeah, this is how you register events on the capture phase as well

<SomeElement
  onClick={this.onClick}
  onClickCapture={this.onClickCapture}
  onScrollPassive={this.onScrollPassive}
/>

so I imagine this would be the proper API to support passive events as well.

Side note: a tricky question is - how would you register passive events for the capture phase? I suppose this is not possible, by the nature of passive events. Since they are even not allowed to call event.preventDefault(), so probably this is a non-issue.

[romulof]

@radubrehar, onScrollCapturePassive looks like the whole bible in camel-case.

[radubrehar]

:) It's not the case, since there are no passive events on the capture phase.

[romulof]

Sure it doesn't make sense, but I would't count on it. There's also other types event binding, such as once.

Another suggestion:

<SomeElement
  onScroll={this.onScrollThatCallsPreventDefault}
/>
<SomePassiveElement
  onScroll={{
    passive: true,
    capture: true,
    handler: this.onScrollThatJustListens,
  }}
/>

This way React would have to detect whether the event handler is a function (normal binding), or and object containing binding options and the handler function.

[lencioni]

I think the object approach with options makes more sense than onFooPassive, since there are other options that might be needed. If combined with @sebmarkbage's suggestion that events should be passive by default, this probably wouldn't be too cumbersome.

Another approach that comes to mind would be to attach properties to the event handler to allow them to opt out of passive mode (or toggle other options). Something like this:

class Foo extends React.Component {
  constructor() {
    this.handleScroll = this.handleScroll.bind(this);
    this.handleScroll.passive = false;
  }

  handleScroll() {
    ...
  }

  render() {
    return <div onScroll={this.handleScroll} />;
  }
}

In theory, this would work pretty nicely with decorators, once they land.