addListener 如何与 matchmedia API 一起使用？答案

【问题标题】：How does addListener work with matchmedia API?addListener 如何与 matchmedia API 一起使用？
【发布时间】：2016-05-07 08:37:31
【问题描述】：

matchMedia("(min-width: 500px)").addListener(foo); 会做什么？这就是addListener() 函数在这里的作用？视口宽度变化时是否执行foo()函数？

【问题讨论】：

标签： javascript viewport matchmedia

【解决方案1】：

是的，它执行foo函数

当媒体查询的评估结果发生变化时。

（来自MDN）

在您的情况下，这意味着如果您从宽度大于 500 像素的窗口开始，然后将其调整为小于 500 像素，则该函数将执行。如果您稍后将其重新调整为宽度大于 500 像素，则该函数将再次执行。

以MediaQueryListEvent 作为第一个参数调用该函数。它包含布尔值 matches 属性，表示您的媒体查询当前是否与视口匹配。

【讨论】：

是不是和onresize事件很像？我的意思是，如果我们已经有了window.onresize，那我们为什么还需要addListener？
@user31782 您可以使用更复杂的媒体查询，例如要求特定的方向或纵横比。请参阅 MDN 上的 Using media queries。
但是我们也可以在没有addListener函数的情况下使用所有这些复杂的媒体查询。需要的是matchMedia 对象和onresize 事件处理程序。
@user31782 确实如此。我这样使用matchMedia 和addListener 更方便。

【解决方案2】：

当媒体查询的评估发生变化（从true 到false 或从false 到true 时，将执行侦听器foo()。

matchMedia(...).addEventListener(foo) 和 window.onResize(foo) 之间有一个重要区别。在前者中，foo() 只会在媒体查询的评估发生变化时执行。在后面，每次浏览器窗口改变大小时，foo() 都会被重复执行。如果您针对特定断点，那么您需要在执行其他逻辑之前在 foo() 中测试这些断点。

matchMedia(...).addEventListener(foo) 允许您在foo() 中编写更集中的逻辑，而无需包含额外的逻辑（或其他函数调用）来测试浏览器维度或其他可由媒体查询评估的信息。与 window.onResize(foo) 相比，使用 matchMedia(...).addEventListener(foo) 还可以提高性能，因为 foo() 的执行频率会降低。

免责声明：我没有对这两种方法进行真正的性能比较。我的假设是基于这样的想法，即未执行的事件处理程序比执行的事件处理程序快。然而，这并没有考虑到这两种方法之间的任何原生差异。

【讨论】：

你的意思是matchMedia.addListener 吗？因为addEventListener 采用不同的参数（类型，然后是 foo）