eventos evento ejemplos boton javascript google-chrome javascript-events event-listener passive-event-listeners

evento - javascript y jquery pdf



¿Qué son los oyentes de eventos pasivos? (1)

Mientras trabajaba para aumentar el rendimiento de las aplicaciones web progresivas, me encontré con una nueva función de Passive Event Listeners y me resulta difícil entender el concepto.

¿Qué son los Passive Event Listeners y cuál es la necesidad de tenerlo en nuestros proyectos?


Los oyentes de eventos pasivos son un estándar web emergente, una nueva característica incluida en Chrome 51 que proporciona un gran impulso potencial para el rendimiento de desplazamiento. Notas de lanzamiento de Chrome.

Permite a los desarrolladores optar por un mejor rendimiento de desplazamiento al eliminar la necesidad de desplazarse para bloquear los oyentes de eventos táctiles y de rueda.

Problema: todos los navegadores modernos tienen una función de desplazamiento con subprocesos para permitir que el desplazamiento se ejecute sin problemas incluso cuando se está ejecutando JavaScript costoso, pero esta optimización es parcialmente derrotada por la necesidad de esperar los resultados de cualquier touchstart touchmove touchstart y touchmove , lo que puede evitar el desplazamiento por completo llamando a preventDefault() en el evento.

Solución: {passive: true}

Al marcar un oyente táctil o de rueda como pasivo, el desarrollador promete que el controlador no llamará a preventDefault para deshabilitar el desplazamiento. 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);

Especificaciones DOM , Video Demo , github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md