window.onresize 与 window.addEventListener(‘resize‘,...) 区别

最新推荐文章于 2025-04-20 14:01:07 发布
最新推荐文章于 2025-04-20 14:01:07 发布
阅读量8k 收藏 4
点赞数 1
分类专栏： Javascript 小知识点 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_31213021/article/details/112603685
版权
本文揭示了Vue中因双层resize监听引发的问题，并提供了正确使用window.addEventListener避免覆盖的解决方案。关键在于理解事件委托和正确绑定事件处理函数。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

一、背景说明

Vue 中，两个组件都使用的了 window.onresize 导致其中一个被覆盖。

二、冲突写法

window.onresize = () => {
  return (() => {
    yourResizeFunc();
  })();
};

三、正确写法

window.addEventListener('resize',() => yourResizeFunc(), false);
window.addEventListener('resize',() => yourResizeFunc(), false);

 

多个 Echarts 图表下的窗口调整事件 window.onresize，只有一个图表自适应的问题
FpwgTcl的博客
09-19 488
在开发 Web 应用程序时，使用 Echarts 这样的数据可视化库可以很方便地创建漂亮的图表。然而，当我们在同一个页面上显示多个 Echarts 图表，并希望它们能够在窗口大小改变时自适应调整，可能会遇到一个问题：只有其中一个图表能够正确地响应窗口调整事件，其他图表则不会自适应调整大小。本文将探讨这个问题的原因，并提供解决方案。
window.onresize与window.addEventListener(‘resize‘,...)来做浏览器窗口的缩放监听
weixin_44490109的博客
02-23 2万+
目录一、背景二、`window.onresize`为什么在重复使用过程中会被覆盖？三、`window.addEventListener`的运用 一、背景 在做浏览器窗口监听时我们该选用window.onresize还是window.addEventListener('resize',...)呢？之前遇到过这样一种情况，在一个vue项目的navBar部份使用了window.onresize做了监听控制，当窗口缩放到一定大小以下时菜单只显示图标隐藏文字，后面由于在做表格时也需要去做监听以实现自适应策略，在实现的
window.onresize 与 window.addEventListener(‘resize‘)
Ranye的博客
04-18 439
前者会覆盖，后者是可以叠加。
window.addEventListener 和 document.addEventListener
最新发布
m0_73941339的博客
04-20 873
本文全面剖析JavaScript中window.addEventListener与document.addEventListener的核心差异，详细对比两者在事件作用范围、触发时机和适用场景上的关键区别。深入讲解窗口级事件与文档级事件的不同处理机制，通过滚动监听、DOM加载检测等实例演示最佳实践方案。掌握这两种事件绑定方式的正确使用场景，能够帮助开发者优化事件处理性能，实现更高效的页面交互逻辑。
window.onresize和window.addEventListener
weixin_43258184的博客
11-05 986
vue中在mounted中window.onresize不生效是因为： 引用的父组件和子组件都使用了window.onresize以至于一个window.onresize失效。 把window.onresize改为window.addEventListener window.onresize = () => { if (screenfull.isFullscreen) { this.show = false; this.tableHeight = w
window.onresize——调整窗口大小事件
在热爱技术的路上一直前行。
05-08 1万+
1、语法规范 window.onresize = function(){} window.addEventListener('resize',function() {}); 2、作用 是调整窗口大小加载事件，当触发时就调用的处理函数。 3、注意 只要窗口大小发生像素变化，就会触发这个事件。 我们经常利用这个事件完成响应式布局。window.innerWidth为当前屏幕的宽度。 ...
微前端-micro-app 使用 onresize和addEventListener区别
weixin_43856422的博客
11-30 391
因为onresize是dom0级别的会被父亲和其他给覆盖，所以在子应用中。dom0级别，一次只能绑定一个函数，下个函数会将上个函数给覆盖。dom2级别，一次可以绑定多个函数，各个函数不会覆盖。
window.addEventListener('resize')和window.onresize
10-12
window.addEventListener('resize')和window.onresize都是用来监听窗口大小变化的事件，但是它们有一些区别。 window.addEventListener('resize')可以添加多个事件监听器，而window.onresize只能添加一个事件监听器...
window.onresize和resize
04-29
`window.onresize` 和 `resize` 事件都是在窗口大小改变时触发的事件，但是它们有一些区别。 `window.onresize` 是 `window` 对象的一个属性，它表示在窗口大小改变时需要执行的处理函数。可以使用 `window....
window.onresize
07-15
window.addEventListener('resize', this.handleResize); }, methods: { handleResize() { this.$nextTick(() => { // 在这里执行代码 }); } } ``` 也可以使用vue-resize这个库来监听窗口变化。 ``` import ...
window.onresize 不使用这个方法
weixin_54274691的博客
04-19 91
window.onresize = () => { // 窗口尺寸改变时触发事件} 使用下面这个方法，可以避免很多问题，比如封装组件，直接可以监听到一个 window.addEventListener('resize', () => { // 窗口尺寸改变时触发事件}) ...
解决vue 给window添加和移除resize事件遇到的坑
11-20
在vue项目中需要监听window窗口变化来时时计算图片的高度，于是就加了一个监听事件；确实监听到了，但是在离开当前页面进入其他页面改变窗口大小时发现window还是处于监听状态，即移除监听事件并没有生效。 //之前的写法，这样写移除监听事件无效 mounted(){ window.addEventListener('resize',()=>{ '改变窗口大小时需要做的处理' }); }, beforeDestroy() { window.removeEventListener("resize"); } 后来查找相关资料后发现用下面这种
[vue] 窗口缩放 window.addEventListener(‘resize‘,
qq_14993591的博客
07-20 3781
代码】[vue]窗口缩放window.addEventListener('resize',
window.addEventListener和window.removeEventListener
H_ZMY的博客
09-14 1246
removeEventListener addEventListener
vue3 监听resize窗口事件,离开页面要销毁窗口事件。
weixin_46409887的博客
02-14 1万+
vue3 监听resize窗口事件,频繁触发的bug解决。
js监听html页面大小变化,JS监听窗口变化实时获取浏览器窗口大小
weixin_33705384的博客
06-03 1万+
原理：通过监听窗口的变化来动态获取窗口大小用到的方法：addEventListener() 监听window的resize事件js代码：// 定义事件侦听器函数function watchWindowSize() {// 获取窗口的宽度和高度，不包括滚动条var w = document.documentElement.clientWidth;var h = document.documentEl...
扫盲-----addEventlistener()方法，事件监听(一)
热门推荐
yangchunshang的博客
06-04 5万+
一、扫盲事件起因    时间：2018年6月1日周五下午，原本我以为我已经把当前的bug改好，应该没啥问题了，坐等下班公司聚餐（开心）突然，隔壁同组大哥，哎。。。。cp,你看看，你这个首页报了很多错哎。我的第一反应就是，不可能，怎么会有错误呢，我明明都自己测过好几次了。我一看，我去，果然。。。。首页报的错误都是在我写的组件里面出现的同一个错误。我的天。。。。。当页面缩放时，渲染页面提示,某方法不存...
addEventListener() 方法，事件监听
milijiangjun的博客
11-27 4万+
addEventListener() 方法，事件监听 你可以使用 removeEventListener() 方法来移除事件的监听。 语法 element.addEventListener(event, function, useCapture); 第一个参数是事件的类型 (如 "click" 或 "mousedown"). 第二个参数是事件触发后调用的函
window的两种监听方式区别
u_ndefine_d的博客
01-10 2110
我遇到的情况是micro-app开启微前端的情况下iframe监听接收数据使用window.onmessage无法监听到信息换成addEventListener的方式就可以监听到，考虑到是window.onmessage在 iframe 加载完成前就已经被调用，而window.addEventListener则是在加载完成后才执行的，所以是否window.onmessage在onload之后执行就能成功，此方法未验证；当使用这个方式时，只能绑定一个事件处理函数，如果后续再次赋值，会覆盖之前的处理函数。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值