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

时间:2015-12-23 22:46:47

标签: javascript

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

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

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

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

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

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

3 个答案:

答案 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/