addListener如何与matchmedia API一起使用？

Question

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

Answer 1

是的，它执行action="#{myBean.save}"功能

  

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

（来自MDN）

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

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

Answer 2

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

matchMedia(...).addEventListener(foo)和window.onResize(foo)之间存在重要差异。在前者中，foo()仅在媒体查询的评估发生变化时执行。在后面，每次浏览器窗口改变大小时，都会重复执行foo()。如果您要定位特定断点，则需要在执行其他逻辑之前测试这些内部foo()。

matchMedia(...).addEventListener(foo)允许您在foo()中编写更集中的逻辑，而不包括其他逻辑（或其他函数调用）来测试浏览器维度或可由媒体查询评估的其他信息。使用matchMedia(...).addEventListener(foo)优于window.onResize(foo)可能会带来性能提升，因为foo()的执行频率会降低。

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