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

问题描述

我正在使用 matchMedia().addListener 来检测 Safari 中的暗/亮模式主题首选项更改，但是在 WebStorm 中使用 addListener 被标记为已弃用，但只是说要参考文档以了解应该替换它的内容.

I'm making use of matchMedia().addListener to detect dark/light mode theme preference changes in Safari, however in WebStorm using addListener is marked as deprecated but simply says to refer to documentation for what should replace it.

我已经阅读了 MDN 文档，但我不明白我应该在 addEventListener 中监听什么事件类型来替换 addListener?

I've had a read through the MDN docs and I don't understand what event type I should be listening for in addEventListener to replace addListener?

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

推荐答案

来自文档 - 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();
});

这篇关于matchMedia().addListener 标记为已弃用，addEventListener 等效吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！