window MutationObserver 알아보기

window MutationObserver 알아보기

반응형

DOM 변경되어써?! 체크해주는거

new MutationObserver( function callback )

callback: 콜백 함수는 DOM 변경시 마다 호출 인자

1): obj[]

2): MutationObserver MutationObserver 인스턴스함수들 observe(): 특정 노드에서 DOM 변경의 알림을 받을 수 있도록 뮤테이션옵저버 인스턴스 등록 disconnect(): 변경 알림 안받을거야 takeRecords(): 뮤테이션옵저버 인스턴스의 레코드 큐를 비우고 안에 든 것 반

observe():

MutationObserverInit

childList: 대상 노드의 자식 요소의 추가 및 제거가 관찰되어야 하는 경우 true로 설정.

subtree: 대상 및 대상의 자손에 대한 돌연변이가 관찰되어야하는 경우 true로 설정.

더 많은 속성이 있는데 여기 참고.

옵저버를 element에 추가하는 것은 addEventListner와 비슷

여러번 element를 봐도 차이는 안남. 두번 옵저브한다고해서 callback이 두번 발생하는 것도 아니고 그러니까 disconnect도 몇번씩이나 실행하지 않아도 됨.

다시말해서, 한번 element를 관찰하면 동일한 observer instance로 다시 관찰하더라도 아무 일이 발생하지 않음.

반응형

from http://coding-heesong.tistory.com/51 by ccl(A) rewrite - 2021-12-20 15:01:17