blocks|key|1748901|text|我认为，为每个元素添加单独的事件与下面我将解释的内容相比是正确的方法。原因是浏览器将在事件函数出现时运行，因此浏览器不会冻结。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1748902|而且，我相信您已经知道了，如果事件函数是单个函数而不是匿名函数，则可以删除它。因此，将系统变成那种类型将是有帮助的。|1748903|另一种方法，但这可能会冻结您的浏览器时，窗口的大小调整。|1748904|定义数组。数组的每一项都是一个htmlElement。|1748905|var+elementsToBeResized+=+[];|offset|length|style|CODE|1748906|为元素定义一个接收调整大小事件的函数。|1748907|function+element_resize(+elIndex+){
++++var+htmlElement+=+elementsToBeResized[+elIndex+];

++++if(+!document.body.contains(+htmlElement+)+){
++++++++elementsToBeResized[+elIndex+]+=+null;
++++++++return;
++++}

++++//+...+do+your+resizing+things+...
}|code-block|syntax|javascript|1748908|当调整窗口大小时，调用一个遍历数组elementsToBeResized的函数。而不是添加新事件，而是替换elementsToBeResized中的一个elementsToBeResized项，或者追加它。|1748909|但是不要忘记，因为所有的事件都是连续的，不间断的，它可能会造成冻结问题，正如我第三次告诉你的。|1748910|entityMap^0|0|0|0|0|0|T|0|0|0|H|J|1H|J|24|J|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|11|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|12|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|13|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|14|8|@$J|15|K|16|L|M]]|9|@]|A|$]]|$1|N|3|O|5|6|7|17|8|@]|9|@]|A|$]]|$1|P|3|Q|5|R|7|18|8|@]|9|@]|A|$S|T]]|$1|U|3|V|5|6|7|19|8|@$J|1A|K|1B|L|M]|$J|1C|K|1D|L|M]|$J|1E|K|1F|L|M]]|9|@]|A|$]]|$1|W|3|X|5|6|7|1G|8|@]|9|@]|A|$]]|$1|Y|3|-4|5|6|7|1H|8|@]|9|@]|A|$]]]|Z|$]]

I think, adding separate events for each element is the correct approach compared to what I will explain below. The reason is that browser will run the event function when its time comes, so the browser won't freeze.

Also, I am sure you know it already, you can remove the event function if it was a single function instead of anonymous function. So, turning the system into that style would be helpful.

<hr>

Another approach, but this might freeze your browser whenever the window is resized.

Define an array. Each item of array is an htmlElement.

<code>var elementsToBeResized = [];</code>

Define a single function that receives the resize event for elements.

<pre><code>function element_resize( elIndex ){
 var htmlElement = elementsToBeResized[ elIndex ];

 if( !document.body.contains( htmlElement ) ){
 elementsToBeResized[ elIndex ] = null;
 return;
 }

 // ... do your resizing things ...
}
</code></pre>

When window is resized, call a function that loops over the array <code>elementsToBeResized</code>. And instead of adding new event, either replace a <code>null</code> item in <code>elementsToBeResized</code>, or append it.

But do not forget, because all events are called sequentially without a break, it might create freezing issue as I am telling third time.

blocks|key|1658614|text|我会使用一个对象来映射一个元素到函数。例如：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1658615|var+toResize+=+{'#banner':+self.bigResizer,+'.ads':+self.smallResizer};|code-block|syntax|javascript|1658616|然后，您可以轻松地动态添加/删除元素及其调整大小的函数。|1658617|toResize['#footer']+=+self.bigResizer;
delete+toResize['#banner'];|1658618|然后，在您的事件处理程序中，您将执行如下操作：|1658619|for+(var+sel+in+toResize)+{
++if+(toResize[sel])+{
++++toResize[sel].call(self,+document.querySelector(sel));
++}
}|1658620|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

I would use an object to map an element to function. For example:

<pre><code>var toResize = {'#banner': self.bigResizer, '.ads': self.smallResizer};
</code></pre>

Then you can easily dynamically add/remove elements and their resize function.

<pre><code>toResize['#footer'] = self.bigResizer;
delete toResize['#banner'];
</code></pre>

Then in your event handler you'd do something like:

<pre><code>for (var sel in toResize) {
 if (toResize[sel]) {
 toResize[sel].call(self, document.querySelector(sel));
 }
}
</code></pre>

blocks|key|1658641|text|您可以简单地调整一个事件处理程序中所有元素的大小。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1658642|但是，元素列表需要以某种形式的全局对象来维护。|1658643|例如，使用jQuery：|1658644|var+$all+=+$('div')
$(+window+).resize(+function(){+

++++$all.each(function+()+{
++++++++console.log($(this).attr('class'));
++++++++//+individual+element+resize+logic+goes+here+e.g.
++++++++//+$(this).myresizefunc();
++})
});|code-block|syntax|javascript|1658645|这里的摇摆不定：https://jsfiddle.net/jsheridan390/aLdap6j8/|offset|length|1658646|entityMap|0|LINK|mutability|MUTABLE|url|https://jsfiddle.net/jsheridan390/aLdap6j8/^0|0|0|0|0|8|17|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|Y|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|Z|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|10|8|@]|9|@$M|11|N|12|1|13]]|A|$]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

You can simply resize all the elements in one event handler.

The list of elements would need to be maintained in global object of some form though.

Using jQuery, for example:

<pre><code>var $all = $('div')
$( window ).resize( function(){ 

 $all.each(function () {
 console.log($(this).attr('class'));
 // individual element resize logic goes here e.g.
 // $(this).myresizefunc();
 })
});
</code></pre>

jsfiddle here:<a href="https://jsfiddle.net/jsheridan390/aLdap6j8/" rel="nofollow">https://jsfiddle.net/jsheridan390/aLdap6j8/</a>

I have a situation where different elements need to be re-sized by JavaScript when the window is re-sized. 

Currently for each element I am simply attaching a new event like so:

<pre><code>window.addEventListener('resize',function(){ self.resize(MyEl);}, false );
</code></pre>

I'm starting to think this isn't a smart idea, because say i have to resize 50 elements, i am currently attaching 50 events (gross exaggeration, but you can see how it isn't a smart design). Not to mention, when i remove the element, the event is still there!

So i am wondering what would be a better way to handle the resize event so it will then process different resize functions that i define but can equally remove said functions when they are no longer relevant.

What is considered a good approach for something like this so i then only need one event attached.

Resize event for multiple elements at different times

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

当窗口调整大小时，需要通过JavaScript调整不同元素的大小。目前，对于每个元素，我只是简单地附加了一个新事件，如下所示：window.addEventListener('resize',function(){ self.resize(MyEl);}, false );我开始认为这不是一个明智的想法，因为假设我必须...

问在不同时间为多个元素调整事件大小
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在不同时间为多个元素调整事件大小EN