在不同时间为多个元素调整事件大小
当窗口调整大小时，需要通过JavaScript调整不同元素的大小。
目前，对于每个元素，我只是简单地附加了一个新事件，如下所示：
window.addEventListener('resize',function(){ self.resize(MyEl);}, false );我开始认为这不是一个明智的想法，因为假设我必须调整50个元素的大小，我目前正在附加50个事件(严重的夸张，但您可以看到它如何不是一个智能设计)。更不用说，当我移除元素时，事件仍然存在！
因此，我想知道如何更好地处理调整大小事件，这样它就会处理我定义的不同的调整大小函数，但是当这些函数不再相关时，也可以同样地删除它们。
对于这样的事情来说，什么是一个很好的方法，所以我只需要附加一个事件。
回答 3
Stack Overflow用户
发布于 2015-12-23 23:07:51
我会使用一个对象来映射一个元素到函数。例如：
var toResize = {'#banner': self.bigResizer, '.ads': self.smallResizer};然后，您可以轻松地动态添加/删除元素及其调整大小的函数。
toResize['#footer'] = self.bigResizer;
delete toResize['#banner'];然后，在您的事件处理程序中，您将执行如下操作：
for (var sel in toResize) {
if (toResize[sel]) {
toResize[sel].call(self, document.querySelector(sel));
}
}Stack Overflow用户
发布于 2015-12-23 23:02:18
我认为，为每个元素添加单独的事件与下面我将解释的内容相比是正确的方法。原因是浏览器将在事件函数出现时运行，因此浏览器不会冻结。
而且，我相信您已经知道了，如果事件函数是单个函数而不是匿名函数，则可以删除它。因此，将系统变成那种类型将是有帮助的。
另一种方法，但这可能会冻结您的浏览器时，窗口的大小调整。
定义数组。数组的每一项都是一个htmlElement。
var elementsToBeResized = [];
为元素定义一个接收调整大小事件的函数。
function element_resize( elIndex ){
var htmlElement = elementsToBeResized[ elIndex ];
if( !document.body.contains( htmlElement ) ){
elementsToBeResized[ elIndex ] = null;
return;
}
// ... do your resizing things ...
}当调整窗口大小时，调用一个遍历数组elementsToBeResized的函数。而不是添加新事件，而是替换elementsToBeResized中的一个elementsToBeResized项，或者追加它。
但是不要忘记，因为所有的事件都是连续的，不间断的，它可能会造成冻结问题，正如我第三次告诉你的。
Stack Overflow用户
发布于 2015-12-23 23:23:30
您可以简单地调整一个事件处理程序中所有元素的大小。
但是，元素列表需要以某种形式的全局对象来维护。
例如，使用jQuery：
var $all = $('div')
$( window ).resize( function(){
$all.each(function () {
console.log($(this).attr('class'));
// individual element resize logic goes here e.g.
// $(this).myresizefunc();
})
});https://stackoverflow.com/questions/34444876
复制相似问题
腾讯云开发者
