AddListener 标记为不推荐的，addEventListener 等效？

我正在使用 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());
46081 次浏览
小开
最佳答案

来自医生 https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/addListener

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

应该是 change事件。

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


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

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);
}
}

如果你对如何在你的网站上支持暗模式感兴趣，请阅读 这篇博文。

小开

如果你只是做 MDN 写它的工作跨浏览器(它的支持) :

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

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

Https://developer.mozilla.org/en-us/docs/web/api/mediaquerylist/onchange


提交答案