matchMedia（）。addListener标记为已弃用，addEventListener是否等效？

Question

我正在使用matchMedia（）。addListener来检测Safari中的暗/亮模式主题首选项更改，但是在WebStorm中，使用addListener标记为已弃用，只是说要参考文档以替代它。

我已经通读了MDN文档，但我不明白我应该在addEventListener中侦听哪种事件类型来代替addListener？

window.matchMedia("(prefers-color-scheme: dark)").addListener(() => this.checkNative());
window.matchMedia("(prefers-color-scheme: light)").addListener(() => this.checkNative());

Answer 1

Chrome 和 Firefox 的处理方式与 Safari 不同，我通过以下方式解决了它：

const darkMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');

  try {
    // Chrome & Firefox
    darkMediaQuery.addEventListener('change', (e) => {
      this.$vuetify.theme.dark = !this.$vuetify.theme.dark;
    });
  } catch (e1) {
    try {
      // Safari
      darkMediaQuery.addListener((e) => {
        this.$vuetify.theme.dark = !this.$vuetify.theme.dark;
      });
    } catch (e2) {
      console.error(e2);
    }
  }

如果您对如何通过您的网站支持深色模式感兴趣，请阅读此博文。

Answer 2

从文档-https: //developer.mozilla.org/zh-CN/docs/Web/API/MediaQueryList/addListener

表示您要在媒体查询状态更改时运行的回调函数的函数或函数引用。

应该是change事件。https://developer.mozilla.org/zh-CN/docs/Web/API/MediaQueryList/onchange。

const mql = window.matchMedia("(prefers-color-scheme: dark)");

mql.addEventListener("change", () => {
    this.checkNative();
});

Answer 3

如果你只是按照 MDN 的方式进行操作，它可以跨浏览器运行（在支持的情况下）：

const mql = window.matchMedia('(max-width: 767px)');
mql.onchange = (e) => { 
  /* ... */
}

IE以上应该支持。例如所有 Edge + 现代浏览器。

https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/onchange