Makes {passive: true} by default when EventListenerOptions are supported
50 lines snippet that enables passive event listeners by default for scroll-blocking events (see list below). It basically will set { passive: true } automatically every time you declare a new event listener.
$ yarn add default-passive-events
Simply require the package:
require('default-passive-events');
or include it locally:
<script type="text/javascript" src="node_modules/default-passive-events/dist/index.js">
<script type="text/javascript" src="https://unpkg.com/default-passive-events">
Those are some examples and their output:
document.addEventListener('mouseup', onMouseUp); // {passive: true, capture: false}
document.addEventListener('mouseup', onMouseUp, true); // {passive: true, capture: true}
document.addEventListener('mouseup', onMouseUp, false); // {passive: true, capture: false}
document.addEventListener('mouseup', onMouseUp, {passive: false}); // {passive: false, capture: false}
document.addEventListener('mouseup', onMouseUp, {passive: false, capture: false}); // {passive: false, capture: false}
document.addEventListener('mouseup', onMouseUp, {passive: false, capture: true}); // {passive: false, capture: true}
document.addEventListener('mouseup', onMouseUp, {passive: true, capture: false}); // {passive: true, capture: false}
document.addEventListener('mouseup', onMouseUp, {passive: true, capture: true}); // {passive: true, capture: true}Check the demo page for a working example.
Just to take benefit in your apps without having to edit every single event listener you already have.
Default-passive-events package makes following event listeners passive by default:
- scroll
- wheel
- touchstart
- touchmove
- touchenter
- touchend
- touchleave
- mouseout
- mouseleave
- mouseup
- mousedown
- mousemove
- mouseenter
- mousewheel
- mouseover
- About passive event listeners https://medium.com/@devlucky/about-passive-event-listeners-224ff620e68c
- EventListenerOptions https://github.com/WICG/EventListenerOptions
- Explanation https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md
- Polyfill https://github.com/WICG/EventListenerOptions/blob/gh-pages/EventListenerOptions.polyfill.js
- Spec https://dom.spec.whatwg.org/#dictdef-eventlisteneroptions
- Chrome feature https://www.chromestatus.com/features#passive
- About scrolling performance https://plus.google.com/+RickByers/posts/cmzrtyBYPQc
- Nice Chrome blog article https://blog.chromium.org/2016/05/new-apis-to-help-developers-improve.html