Как узнать, когда элемент DOM перемещается или изменяется размер

Question

Я хотел бы знать, есть ли событие DOM для прослушивания, которое говорит мне, когда элемент DOM перемещается, перемещается или изменяется на странице. Я не говорю о том, что элементы перетаскиваются. Например, если у вас есть список из трех элементов на странице, и я использую JS, чтобы удалить один из двух верхних элементов списка со страницы (или скрыть его или что-то еще), я хотел бы добавить обработчик для запуска, когда третий элемент списка перемещается вверх на странице.

Я использую jQuery, поэтому простые ответы javascript или jQuery приемлемы.

Возможно, на уровне элемента нет событий move/position/resize, поэтому, если есть событие уровня страницы/документа, которое сообщит мне, что страница была перекрашена, и я могу проверить, нужно ли мне снова вызвать функцию ?

фон

Я поставил прозрачный DIV над элементом в то время как вызов вебсервис делается для удаления этого элемента. Поскольку мне нужно полностью позиционировать этот оверлейный div, я хочу, чтобы он отслеживал элемент, который он покрывает изначально. По сути, привязывает его к базовому элементу.

Answer 1

Вы не можете получить обратный вызов для перемещения элемента или изменения размера вообще; вам придется постоянно проверять размеры интервального опроллера, что сделало бы его немного менее отзывчивым. Вы можете улучшить это, вызвав checker в окне resize событие тоже (и scroll, если задействовано переполнение или фиксированное позиционирование. Вы также можете добавить слушателей событий DOM Mutation, чтобы получить информацию, когда элементы удалены из дерева документов, но это не работа во всех браузерах.

вы не можете сделать накладку с простой CSS? например. поместить position: relative на элемент будет закрыт, а затем добавить накладку внутри него, со следующим?

position: absolute; 
z-index: 10; 
left: 0; 
top: 0; 
width: 100%; 
height: 100%; 
opacity: 0.5; 

Answer 2

There's a (Ben Alman) plugin for that.^TM

Это хороший плагин, хотя я предлагаю использовать его экономно (то есть, не на слишком много элементов), с тем, чтобы сохранить количество опроса вниз.

Answer 3

I не думаю, что это решение будет актуальным после столь долгого времени, но есть отличное кросс-браузерное решение, основанное на событиях переполнения и underflow, представленных here

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

Содержание элемента <object> имеет родное событие resize, как и окно.