JavaScript的onresize事件是当浏览器的窗口大小被改变时触发此事件。那么,这个词是什么意思呢?它是个组合词吧?请讲解一下它的意思
onresize 是一个由 on 和 resize 组成的组合词。
其中:
on表示“当……发生时”,是 JavaScript 事件处理程序的通用前缀。resize表示“调整大小”,指浏览器窗口的尺寸变化。
因此,onresize 的字面意思是“当调整大小时”,即当浏览器窗口的宽度或高度被改变时触发的事件。
核心特性
触发时机:当用户通过拖拽窗口边框、最大化/最小化窗口或调用
window.resizeTo()等方法改变窗口大小时触发。用途:常用于响应式布局调整、图表重绘、游戏界面适配等需要实时响应窗口尺寸变化的场景。
注意事项:
在部分浏览器中,窗口大小改变可能触发多次事件(如连续调整时)。
移动端设备上,键盘弹出也可能触发
onresize,需结合其他事件(如onfocus)判断具体场景。
基本语法
// 传统写法
window.onresize = function() {
console.log('窗口大小已改变');
};
// 现代推荐写法(支持多个监听器)
window.addEventListener('resize', function() {
console.log('窗口大小已改变');
});