javascript - 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

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

一个函数或函数引用，表示您希望在媒体查询状态发生变化时运行的回调函数。

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

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

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

Answer 2

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 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