我有一种情况,当窗口重新调整大小时,需要通过JavaScript重新调整大小。
目前,对于每个元素,我只是简单地附加一个新事件:
window.addEventListener('resize',function(){ self.resize(MyEl);}, false );
我开始认为这不是一个聪明的主意,因为我必须调整50个元素,我目前正在附加50个事件(粗略夸大,但你可以看到它不是一个聪明的设计)。更不用说,当我删除元素时,事件仍然存在!
所以我想知道什么是处理resize事件的更好方法,因此它将处理我定义的不同调整大小函数,但是当它们不再相关时可以同样删除它们。
对于这样的事情来说,这被认为是一种很好的方法,所以我只需要附上一个事件。
答案 0 :(得分:1)
我会使用一个对象将元素映射到函数。例如:
./genTable | perl -nwla -e 'print \'$F[1]\''
然后您可以轻松地动态添加/删除元素及其调整大小功能。
var toResize = {'#banner': self.bigResizer, '.ads': self.smallResizer};
然后在您的事件处理程序中执行以下操作:
toResize['#footer'] = self.bigResizer;
delete toResize['#banner'];
答案 1 :(得分:0)
我认为,与我将在下面解释的相比,为每个元素添加单独的事件是正确的方法。原因是浏览器会在时间到来时运行事件功能,因此浏览器不会冻结。
另外,我相信你已经知道了,如果是单个函数而不是匿名函数,你可以删除事件函数。因此,将系统转变为这种风格会很有帮助。
另一种方法,但每当调整窗口大小时,这可能会冻结您的浏览器。
定义一个数组。每个数组项都是一个htmlElement。
var elementsToBeResized = [];
定义一个接收元素的resize事件的函数。
function element_resize( elIndex ){
var htmlElement = elementsToBeResized[ elIndex ];
if( !document.body.contains( htmlElement ) ){
elementsToBeResized[ elIndex ] = null;
return;
}
// ... do your resizing things ...
}
调整窗口大小时,调用循环遍历数组elementsToBeResized
的函数。而不是添加新事件,请替换null
中的elementsToBeResized
项,或者附加它。
但不要忘记,因为所有事件都是顺序调用而不会中断,所以当我第三次告诉时,它可能会产生冻结问题。
答案 2 :(得分:0)
您可以简单地调整一个事件处理程序中的所有元素。
虽然需要在某种形式的全局对象中维护元素列表。
使用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();
})
});
jsfiddle here:https://jsfiddle.net/jsheridan390/aLdap6j8/