javascript - 如何根据屏幕大小将事件监听器附加到 DOM

Question

例如:document.body.addEventListener('wheel', foo, {passive: true}); 如果屏幕尺寸大于 500px

，则应动态添加/删除

Answer 1

正如@Rounin 所说，window.matchMedia 相当于 CSS @media 查询。但最酷的部分不仅仅是您可以使用 .matches 进行检查——最棒的是，您可以添加一个事件监听器，它会在状态更改时触发。

当屏幕宽度超过或低于 500px 时，您希望发生某些事情 -- 您希望在屏幕大于 500px 时添加鼠标滚轮监听器，并在屏幕小于 500px 时将其移除

您还必须首先检查 .matches 以决定是否在您的页面首次加载时添加监听器，如@Rounin 所示，但随后可以自动添加和删除监听器基于匹配媒体查询。

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
    }
});