Passive Event Listeners (EventListenerOptions)

An extension to the DOM event pattern to allow listeners to disable support for preventDefault, primarily to enable scroll performance optimizations. See the explainer document for an overview. This work is now part of the official WHATWG DOM spec, with resources / discussion preserved here.

Spec changes

• See the main commit in the DOM specification or pull request for full details.
• The key parts of the spec affected by this are EventTarget, Observing event listeners, and preventDefault
• Touch Events has been updated to describe the performance optimization.
• Interventions issue 18 tracks the plan to "intervene" and force touch listeners to be passive in scenarios where the compat risk is low but the perf benefit large.

Status of implementations:

• See CanIUse entry for passive event listeners
• Chromium: shipping in Chrome 51 (launch bug)
  • Chromium bug tracking the next step of automatically opting some listeners into passive behavior.
• WebKit: EventListenerOptions support and performance optimization for touch listeners landed.
  • Performance optimization of wheel listeners not yet implemented.
• Firefox: Landed - planned to ship in Firefox 49
• DOM4 Polyfill, or sample polyfill here

Additional background on the problem:

• Summary from Google I/O 2016 Mobile Web talk
• Ilya Grigorik's talk at Chrome Dev Summit [slides]
• Discussion on twitter with demo video
• Demo page with latency measurement
• Older G+ post by Rick Byers

Additional resources for understaning and using passive listeners

• Tips for debugging scroll jank screencast

Issues with and adoption by key libraries:

• Feature detect in Modernizr (issue)
• Parse.ly
• jQuery
• Ember.js

History:

• Outstanding issues
• WICG discussion
• Discussion on WhatWG
• One discussion on public-pointer-events
• Earlier scroll-blocks-on proposal and discussion