MediaQueryList：addListener() 方法

已弃用：此功能不再推荐。尽管一些浏览器可能仍然支持它，但它可能已从相关的 Web 标准中删除，可能正在被弃用，或者可能仅出于兼容性目的而保留。避免使用它，并尽可能更新现有代码；请参阅此页面底部的兼容性表以指导您的决策。请注意，此功能可能随时停止工作。

MediaQueryList 接口的已弃用addListener()方法会向MediaQueryListener添加一个监听器，该监听器将在媒体查询状态更改时运行自定义回调函数。

在旧版浏览器中，MediaQueryList 尚未继承自EventTarget，因此此方法被提供作为EventTarget.addEventListener()的别名。如果在您需要支持的浏览器中可用，请使用addEventListener()代替addListener()。

语法

js
addListener(func)

参数

func

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

返回值

无（undefined）。

示例

js
const paragraph = document.querySelector("p");
const mediaQueryList = window.matchMedia("(max-width: 600px)");

function screenTest(e) {
  if (e.matches) {
    /* the viewport is 600 pixels wide or less */
    paragraph.textContent = "This is a narrow screen — 600px wide or less.";
    document.body.style.backgroundColor = "pink";
  } else {
    /* the viewport is more than 600 pixels wide */
    paragraph.textContent = "This is a wide screen — more than 600px wide.";
    document.body.style.backgroundColor = "aquamarine";
  }
}

mediaQueryList.addListener(screenTest);

规范

规范
CSSOM 视图模块
# dom-mediaquerylist-addlistener

浏览器兼容性

BCD 表仅在启用 JavaScript 的浏览器中加载。

另请参阅