What are passive event listeners?

Question

While working around to boost performance for progressive web apps, I came across a new feature Passive Event Listeners and I find it hard to understand the concept.

What are Passive Event Listeners and what is the need to have it in our projects?

Halbert

github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md – Elizaelizabet

Answer 1

Passive event listeners are an emerging web standard, new feature shipped in Chrome 51 that provide a major potential boost to scroll performance. Chrome Release Notes.

It enables developers to opt-in to better scroll performance by eliminating the need for scrolling to block on touch and wheel event listeners.

Problem: All modern browsers have a threaded scrolling feature to permit scrolling to run smoothly even when expensive JavaScript is running, but this optimization is partially defeated by the need to wait for the results of any touchstart and touchmove handlers, which may prevent the scroll entirely by calling preventDefault() on the event.

Solution: {passive: true}

By marking a touch or wheel listener as passive, the developer is promising the handler won't call preventDefault to disable scrolling. This frees the browser up to respond to scrolling immediately without waiting for JavaScript, thus ensuring a reliably smooth scrolling experience for the user.

document.addEventListener("touchstart", function(e) {
    console.log(e.defaultPrevented);  // will be false
    e.preventDefault();   // does nothing since the listener is passive
    console.log(e.defaultPrevented);  // still false
}, Modernizr.passiveeventlisteners ? {passive: true} : false);

DOM Spec , Demo Video , Explainer Doc

Halbert

so we should always add this lines of code (at least for most cases), right? – Robenarobenia

This crashes your js engine in Mozilla. You better detect the browser before attaching this event listener – Harebell

@AltianoGerung When the browser recommends it. You will see the message in the Console's Info or Warning tab. – Pasteboard

@Harebell We can use the following polyfill and avoid the browser checks. For scrolling use cases, using passive event listeners is a big plus. github.com/WICG/EventListenerOptions/blob/gh-pages/… – Flavourful

@Vikrant Siwach great advice. Polyfill are quick and somewhat painless when you manage all of them in let's say polyfill.js – Harebell

So, in simple words the passive event listener is such an event handler that can not call the preventDefault function. Do I understand correctly? – Circumstantiate

Remember that some listeners actually need to block scrolling. – Black

Answer 2

tl;dr If you don't need to use e.preventDefault() in the event, then add passive: true.

---

This is my understanding of it.

Every event has its default event handling.

We can use addEventListener to add event listeners for a specific event. Within this added event, we can use preventDefault() to avoid executing its default event.

Even if you use preventDefault(), it actually still executes the default event; it just checks whether you have used preventDefault() in its pre-actions. If so, it won't execute. However, checking preventDefault() in the default event incurs significant overhead.

Therefore, if you can inform passive: true within addEventListener, it will significantly speed up the process of determining whether to execute the default event. It will be directly treated as false, meaning it will execute the default event.

<script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/8.14.0/mermaid.min.js"></script>
<div class="mermaid">
flowchart TD
    A[xxxEvent] --> B[default xxxEvent]
    B-->C{check}
    C --> |passive:false| E{preventDefault}
    E --> |true|return
    E --> |false|G[do default event]

    C --> |passive:true| G[do default event]
</div>

Therefore, setting passive: true is a better choice when you don't need to use preventDefault.

Its default value is not true to ensure compatibility.

If it were set to true, older programs using preventDefault would essentially be equivalent to not setting it at all.

Silverplate