Question

我有一种情况，当窗口重新调整大小时，需要通过JavaScript重新调整大小。

目前，对于每个元素，我只是简单地附加一个新事件：

window.addEventListener('resize',function(){ self.resize(MyEl);}, false );

我开始认为这不是一个聪明的主意，因为我必须调整50个元素，我目前正在附加50个事件（粗略夸大，但你可以看到它不是一个聪明的设计）。更不用说，当我删除元素时，事件仍然存在！

所以我想知道什么是处理resize事件的更好方法，因此它将处理我定义的不同调整大小函数，但是当它们不再相关时可以同样删除它们。

对于这样的事情来说，这被认为是一种很好的方法，所以我只需要附上一个事件。

Answer 1

我会使用一个对象将元素映射到函数。例如：

./genTable | perl -nwla -e 'print \'$F[1]\''

然后您可以轻松地动态添加/删除元素及其调整大小功能。

var toResize = {'#banner': self.bigResizer, '.ads': self.smallResizer};

然后在您的事件处理程序中执行以下操作：

toResize['#footer'] = self.bigResizer;
delete toResize['#banner'];

Answer 2

我认为，与我将在下面解释的相比，为每个元素添加单独的事件是正确的方法。原因是浏览器会在时间到来时运行事件功能，因此浏览器不会冻结。

另外，我相信你已经知道了，如果是单个函数而不是匿名函数，你可以删除事件函数。因此，将系统转变为这种风格会很有帮助。

另一种方法，但每当调整窗口大小时，这可能会冻结您的浏览器。

定义一个数组。每个数组项都是一个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项，或者附加它。

但不要忘记，因为所有事件都是顺序调用而不会中断，所以当我第三次告诉时，它可能会产生冻结问题。

Answer 3

您可以简单地调整一个事件处理程序中的所有元素。

虽然需要在某种形式的全局对象中维护元素列表。

使用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/

在不同时间调整多个元素的事件

3 个答案: