addListener如何与matchmedia API一起工作？

Question

matchMedia("(min-width: 500px)").addListener(foo);这段代码的作用是什么？addListener()函数在这里有什么作用？当视口宽度改变时，它是否执行函数foo()？

- user31782

Answer 1

是的，它执行了foo函数

当媒体查询的计算结果发生变化时。

(来自MDN)

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

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

- Michał Perłakowski

---

这不是和 onresize 事件非常相似吗？我的意思是，如果我们已经有了 window.onresize，那么为什么还需要 addListener？ - user31782

@user31782 你可以使用更复杂的媒体查询，例如要求特定的方向或宽高比。请参阅 MDN 上的 使用媒体查询。 - Michał Perłakowski

但是我们也可以在不使用addListener函数的情况下使用所有这些复杂的媒体查询。所需的是matchMedia对象和onresize事件处理程序。 - user31782

@user31782 这是真的。我认为使用matchMedia和`addListener更方便。 - Michał Perłakowski

Answer 2

监听器foo()将在媒体查询的评估更改时执行（从true到false或从false到true）。 matchMedia(...).addEventListener(foo)和window.onResize(foo)之间有一个重要的区别。在前者中，只有在媒体查询的评估更改时才会执行foo()。而在后者中，每次浏览器窗口大小变化时都会重复执行foo()。如果您针对特定的断点，则需要在执行其他逻辑之前在foo()中测试这些断点。 matchMedia(...).addEventListener(foo)允许您在foo()中编写更加专注的逻辑，而不需要包含额外的逻辑（或其他函数调用）来测试浏览器尺寸或其他可以通过媒体查询进行评估的信息。使用matchMedia(...).addEventListener(foo)而不是window.onResize(foo)还可能带来性能上的提升，因为foo()将被执行得更少。

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

- Jeremy R. Cox

---

你是不是指的是 matchMedia.addListener？因为 addEventListener 接受不同的参数（类型，然后是 foo）。 - Julix