Que sont les écouteurs d'événements passifs?

Réponses:

213

Les écouteurs d'événements passifs sont une nouvelle norme Web émergente, une nouvelle fonctionnalité intégrée à Chrome 51 qui offre un potentiel important pour les performances de défilement. Notes de version de Chrome.

Il permet aux développeurs d'accepter de meilleures performances de défilement en éliminant le besoin de défilement pour bloquer les écouteurs d'événements tactiles et roulants.

Problème: Tous les navigateurs modernes disposent d' une fonction de défilement enfilée pour permettre le défilement de fonctionner en douceur , même lorsque JavaScript coûteux est en cours d' exécution, mais cette optimisation est partiellement vaincu par la nécessité d'attendre les résultats de tout touchstartet les touchmovegestionnaires, ce qui peut empêcher le défilement entièrement en appelant preventDefault()sur l'événement.

Solution: {passive: true}

En marquant un auditeur tactile ou à molette comme passif, le développeur promet que le gestionnaire n'appellera pas preventDefaultpour désactiver le défilement. 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);

Spécifications DOM , vidéo de démonstration , document explicatif

Vivek Pratap Singh
la source
1
nous devrions donc toujours ajouter ces lignes de code (au moins dans la plupart des cas), non?
Altiano Gerung
Cela plante votre moteur js dans Mozilla. Vous feriez mieux de détecter le navigateur avant de joindre cet auditeur d'événement
yardpenalty.com
@AltianoGerung Lorsque le navigateur le recommande. Vous verrez le message dans l'onglet Info ou Avertissement de la console.
snowYetis
@ yardpenalty.com Nous pouvons utiliser le polyfill suivant et éviter les vérifications du navigateur. Pour les cas d'utilisation à défilement, l'utilisation d'écouteurs d'événements passifs est un gros plus. github.com/WICG/EventListenerOptions/blob/gh-pages/…
Vikrant Siwach
@Vikrant Siwach de bons conseils. Polyfill est rapide et quelque peu indolore lorsque vous les gérez tous dans disons polyfill.js
yardpenalty.com