почему был введен ResizeObserver для прослушивания изменений размера, а не простой Element.prototype.addEventListener ('resize', обратный вызов)

1

Я немного удивлен тем, что для прослушивания изменений в размерах элементов (а не в Window Object) мы должны использовать новый интерфейс ResizeObserver. Хотя кажется, что эта работа очень хорошо; это кажется немного отходом от других связанных с элементом событий, которые могут быть использованы путем добавления слушателя.

Возьмем, например, добавление прослушивателя событий для прослушивания события mouseover

document.querySelector('#ele').addEventListener('mouseover', callback);

Почему бы просто не добавить нового слушателя в событие изменения размера элементов?

document.querySelector('#ele').addEventListener('resize', callback);

Не избежать конфликтов с событием resize окна? Если да, почему бы просто не назвать это по-другому

document.querySelector('#ele').addEventListener('elementResize', callback);

Я знаю, что легко создать вспомогательный метод для упрощения использования ResizeObserver. Что-то вроде этого может быть столь же простым в использовании, как и исходный подход addEventListener

export const getResizeObserver = ( ele, onResize ) => {
  let obs;

  const observerInterface = {
    stop: () => { obs.unobserve( ele ); obs.disconnect() },
  };

  obs = new ResizeObserver( entries => {
    for ( const entry of entries ) {
      onResize && onResize( entry.contentRect );
    }
  } );

  obs.observe( ele );

  return observerInterface;
};

// usage to add the listener
const obs = getResizeObserver(document.querySelector('#ele'), callback);
// later to remove the listener
obs.stop();

В любом случае, есть ли какая-либо причина, помимо предпочтений api и того факта, что несколько элементов могут совместно использовать экземпляр observer, что делает подход ResizeObserver лучше, чем подход addEventListener?

Теги:
addeventlistener
dom
resize
window-resize

1 ответ

1
Лучший ответ

Это было предложено (и проблема все еще открыта), но Chrome решил отправить это с использованием модели Observer, по-видимому, главным образом потому, что она была в 10 раз быстрее, чем реализация, основанная на событиях https://groups.google.com/a/chromium. орг/форум/#! тема/мигания-DEV/z6ienONUb5A

Теперь, почему это правда, я не знаю.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню