cómo adjuntar un detector de events al DOM, dependiendo del tamaño de la pantalla

por ejemplo: document.body.addEventListener('wheel', foo, {passive: true}); Esto debe agregarse / eliminarse dinámicamente si el tamaño de la pantalla es superior a 500px

Como dice @Rounin, window.matchMedia es el equivalente de CSS @media queries. Pero la mejor parte no es solo que se pueda verificar con .matches : lo asombroso es que se puede agregar un detector de events que se activa cuando cambia el estado.

Desea que suceda algo cuando la transición del ancho de la pantalla sea superior o inferior a 500px; desea agregar un oyente de la rueda del mouse cuando la pantalla es> 500 px y eliminarlo cuando la pantalla sea <500 px.

También deberá comprobar si hay .matches inicialmente para decidir si desea agregar o no el oyente cuando la página se carga por primera vez, como muestra @Rounin, pero luego el oyente puede agregarse y eliminarse automáticamente en function de que coincida con la consulta de medios.

 let widthMatch = window.matchMedia("(min-width: 500px)"); // mm in the function arg is the matchMedia object, passed back into the function widthMatch.addEventListener('change', function(mm) { if (mm.matches) { // it matches the media query: that is, min-width is >= 500px document.body.addEventListener( etc. ); } else { // it no longer matches the media query // remove the event listener } }); 

cómo adjuntar un detector de events al DOM […] solo si el tamaño de la pantalla es superior a 500px

window.matchMedia es el equivalente en JavaScript de las consultas de CSS @media .

Por ejemplo, el siguiente código verifica que el ancho de la pantalla sea superior a 500px .

 var widerScreenWidth = window.matchMedia("(min-width: 501px)"); if (widerScreenWidth.matches) { // [... YOUR CODE HERE...] } 

tienes 3 opciones:

  1. verifique el tamaño de la window al cargar y agregue el oyente si > 500 : la solución más fácil pero no se ajustará si el usuario cambia el tamaño de la window.
  2. agregue un oyente al tamaño de window y cada vez que el ancho cambie agregue o elimine el oyente de evento 'wheel' dependiendo del ancho.

  3. siempre agregue un detector de events a 'wheel' , pero dentro de la callback de events, verifique el ancho cada vez que se ejecuta la callback antes de ejecutar su lógica

 function getScreenWidth() { var w = window, d = document, e = d.documentElement, g = d.getElementsByTagName('body')[0] return w.innerWidth || e.clientWidth || g.clientWidth } function wheelListener() { console.log(getScreenWidth()) } window.onresize = function() { if (getScreenWidth() > 500) { document.body.addEventListener('wheel', wheelListener, {passive: true}) } else { document.body.removeEventListener('wheel', wheelListener) } } // to apply when the window loaded window.onresize()