matchMedia().addListener 标记为已弃用，addEventListener 等效？

Question

我正在使用 matchMedia().addListener 来检测 Safari 中的 dark/light 模式主题首选项更改，但是在 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

A function or function reference representing the callback function you want to run when the media query status changes.

应该是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);
    }
  }

如果您对如何在您的网站上支持深色模式感兴趣，请阅读 this blogpost。

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

matchMedia().addListener 标记为已弃用，addEventListener 等效？

matchMedia().addListener marked as deprecated, addEventListener equivalent?

javascript

addeventlistener

matchmedia