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