javascript当浏览器的窗口大小被改变时触发此事件使用什么函数，详细讲解-编程学习网

这篇文章将为大家详细讲解有关javascript当浏览器的窗口大小被改变时触发此事件使用什么函数，详细讲解，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

JavaScript 中用于在窗口大小更改时触发事件的函数

简介

在 JavaScript 中，有几个函数用于在当浏览器的窗口大小被更改时触发事件。这些函数使 Web 开发人员能够创建对窗口大小更改做出响应的动态 веб-页面。

函数：

1. onresize

onresize 事件处理程序在窗口大小发生更改时触发。它是一个属性，可以附加到 HTML 元素（例如 <window>），以在窗口大小更改时执行特定的 JavaScript 代码。

语法：

element.onresize = function() {
  // 在窗口大小更改时运行代码
};

2. addEventListener("resize", function)

addEventListener 方法允许将一个事件监听器附加到一个 HTML 元素，使其在发生特定事件（例如 "resize"）时执行一个函数。

语法：

element.addEventListener("resize", function() {
  // 在窗口大小更改时运行代码
});

示例：

以下示例使用 onresize 事件处理程序来在窗口大小更改时更改页面背景颜色：

<html>
<head>
  <script>
    window.onresize = function() {
      if (window.innerWidth > 500) {
        document.body.style.backgroundColor = "blue";
      } else {
        document.body.style.backgroundColor = "white";
      }
    };
  </script>
</head>
<body>
  <h1>欢迎！</h1>
</body>
</html>

3. matchMedia

matchMedia 方法允许查询媒体查询，并返回一个 MediaQueryList 对象，该对象表示媒体查询的状态。当媒体查询的状态更改时，例如窗口大小更改时，MediaQueryList 对象将触发一个 change 事件。

语法：

const mediaQueryList = window.matchMedia("(min-width: 500px)");
mediaQueryList.addEventListener("change", function() {
  // 在媒体查询的状态更改时运行代码
});

优势与劣势：

函数	优势	劣势
`onresize`	简单易用	仅支持窗口大小更改事件
`addEventListener("resize", function)`	功能更强大，可附加多个监听器	浏览器兼容性问题
`matchMedia`	支持复杂的媒体查询	需要额外的事件处理