监听javascript中浏览器窗口大小变化主要通过window.addeventlistener(‘resize’, callback)实现，需绑定resize事件到window对象并执行回调函数；为兼容不同浏览器，获取窗口宽高可使用window.innerwidth、document.documentelement.clientwidth或document.body.clientwidth；为优化频繁触发导致的性能问题，可采用防抖或节流技术，1. 防抖通过设定延迟（如250毫秒），仅在最后一次触发后执行一次，适用于调整结束后执行的场景；2. 节流通过设定时间间隔（如250毫秒），在持续触发期间定期执行一次，适用于需要过程中定期响应的场景；在react中，应使用useeffect在组件挂载时添加监听，在卸载时移除以避免内存泄漏，并结合usestate更新状态；此外，还可使用matchmedia监听特定媒体查询变化，如根据(max-width: 768px)切换逻辑，该方法避免频繁触发，适合响应式设计，且需注意老版本浏览器兼容性。
监听 JavaScript 中的浏览器窗口大小变化，主要通过
window.addEventListener('resize', callback)
实现。核心就是绑定
resize
事件到
window
对象，然后执行你的回调函数。
解决方案
window.addEventListener('resize', function() { // 获取窗口新的宽度和高度 let width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; let height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; // 在这里执行你的逻辑，例如更新布局、重新计算元素位置等 console.log('窗口大小改变了！宽度：' + width + '，高度：' + height);});
window.innerWidth
、
document.documentElement.clientWidth
和
document.body.clientWidth
这三种方式获取窗口宽度，是为了兼容不同的浏览器。
如何优化 resize 事件的性能？
频繁调整窗口大小会触发大量的
resize
事件，如果每次都执行复杂的计算或 DOM 操作，可能会导致性能问题。可以采用“防抖 (debounce)”或“节流 (throttle)”技术来优化。
防抖 (Debounce): 只在最后一次触发后等待一段时间再执行。
function debounce(func, delay) { let timeout; return function(...args) { const context = this; clearTimeout(timeout); timeout = setTimeout(() => func.apply(context, args), delay); };}const optimizedResize = debounce(function() { console.log('防抖后的 resize 事件'); // 执行你的逻辑}, 250); // 250 毫秒的延迟window.addEventListener('resize', optimizedResize);
节流 (Throttle): 在一段时间内只执行一次。
function throttle(func, limit) { let inThrottle; return function(...args) { const context = this; if (!inThrottle) { func.apply(context, args); inThrottle = true; setTimeout(() => inThrottle = false, limit); } }}const optimizedResize = throttle(function() { console.log('节流后的 resize 事件'); // 执行你的逻辑}, 250); // 250 毫秒的间隔window.addEventListener('resize', optimizedResize);
选择防抖还是节流取决于你的具体需求。如果只需要在调整结束后执行一次，防抖更合适。如果需要在调整过程中定期执行，节流更合适。
如何在 React 组件中使用 resize 事件监听？
在 React 组件中，通常在
componentDidMount
钩子中添加事件监听，并在
componentWillUnmount
钩子中移除事件监听，防止内存泄漏。
import React, { useState, useEffect } from 'react';function MyComponent() { const [windowWidth, setWindowWidth] = useState(window.innerWidth); useEffect(() => { const handleResize = () => { setWindowWidth(window.innerWidth); }; window.addEventListener('resize', handleResize); return () => { window.removeEventListener('resize', handleResize); }; }, []); // 空依赖数组，确保 effect 只在组件挂载和卸载时执行 return ( 当前窗口宽度：{windowWidth} );}export default MyComponent;
这里使用了
useState
hook 来存储窗口宽度，并在
handleResize
函数中更新它。
useEffect
hook 用于添加和移除事件监听。空依赖数组
[]
确保 effect 只在组件挂载和卸载时执行，避免不必要的更新。
除了 window.resize 事件，还有其他方法监听窗口大小变化吗？
虽然
window.resize
是最常用的方法，但还有一些其他的选择，例如使用
matchMedia
来监听特定的媒体查询变化。
const mediaQuery = window.matchMedia('(max-width: 768px)');function handleMediaChange(event) { if (event.matches) { console.log('屏幕小于 768px'); } else { console.log('屏幕大于 768px'); }}mediaQuery.addListener(handleMediaChange);// 初始化时执行一次handleMediaChange(mediaQuery);
这种方法适用于根据不同的屏幕尺寸应用不同的样式或逻辑。
matchMedia
允许你监听媒体查询的状态，而不是每次窗口大小改变都触发事件。 另外，老的浏览器可能需要使用
addListener
的替代方法，具体可以查阅相关文档。
以上就是js 怎么监听浏览器窗口大小变化的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1515799.html
微信扫一扫 
支付宝扫一扫 
