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

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

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

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

Фон

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

Ответ 1

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

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

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

Ответ 2

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

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

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

Ответ 3

Там есть плагин (Ben Alman). ^TM

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