javascript - 在不同时间调整多个元素的事件大小

Question

我遇到的情况是，当窗口大小调整时，JavaScript 需要调整不同元素的大小。

目前，对于每个元素，我只是附加一个新事件，如下所示:

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

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

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

对于这样的事情，什么被认为是一种好的方法，所以我只需要附加一个事件。

Answer 1

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

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));
  }
}