DOM 변경 감지해서 이벤트 발생

jquery와 javascript 함께사용.

ajax 등을 통해 페이지 이동 없이 dom이 변경될때, ajax 소스 건드리지 않고 이벤트 추가 적용할때 자주 사용.

 

 $(document).ready(function() {
  var target = $('셀렉터')[0]; // 뒤에 배열도 꼭 써줘야함
  var observer = new MutationObserver((mutations) => {
	console.log("dom 변경됨!")
   })
	var config = {
	 attributes: true, 
	 childList: true,
	 characterData: true
	};
	observer.observe(target, config);
});

 

아래 스크립트도 작동.

const observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        // 내용이 변경될 때 실행되는 함수
        console.log('Content changed!');
    });
});

// 관찰할 대상 설정 (예: content 클래스를 가진 요소)
const targetNode = document.querySelector('.content');

// Mutation Observer를 설정하여 요소 내용 변경 감지
const config = { attributes: true, childList: true, subtree: true };
observer.observe(targetNode, config);