javascript - addListener 如何与 matchmedia API 一起使用？

Question

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

Answer 1

是的，它执行foo功能

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

（来自MDN）

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

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

Answer 2

当foo()媒体查询的评估发生变化（从truetofalse或 from falseto true.

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

matchMedia(...).addEventListener(foo)允许您编写foo()更专注的逻辑，而不包括额外的逻辑（或其他函数调用）来测试浏览器维度或其他可以通过媒体查询评估的信息。使用matchMedia(...).addEventListener(foo)over window.onResize(foo)infoo()还可以降低执行频率，从而获得潜在的性能提升。

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