Observer2

• 자바스크립트 HTML 특정 요소 도달 감지 예시 특정 위치까지 도달하였을 때 실행하고 싶은 로직이 있을 수 있죠. 이 경우 사용할 수 있는 객체가 있습니다. 목차 특정 요소 도달 감지 가시적으로 특정 요소에 도달했는지 체크하기 위해 사용하는 객체입니다. 기본적인 사용법은 다음과 같습니다. // 옵션 설정 var config = { root: document.querySelector('#scrollArea'), // 기준 영역 지정 rootMargin: '0px', // root 영역의 여백 threshold: 0.1 // root에 지정된 영역 내에 10% 보여질 때 감지 }; // 객체 생성 var observer = new IntersectionObserver(function(entries) { var entry = entries[0]; if (e.. 프로그래밍 & IT 정보/Javascript 2021. 12. 22.

• 자바스크립트 HTML DOM 변경 감시 예시 코딩을 하다보면 특정 DOM의 속성 등이 변경됐는지 알고 싶을 때가 있습니다. 이 경우에 활용 가능한 객체가 있어서 소개합니다. 목차 DOM 변경 감시 다음과 같이 MutationObserver 객체를 이용하여 DOM의 변경을 감시합니다. // 인스턴스 생성 var observer = new MutationObserver(function(mutations) { // 변경 감지 시 수행할 작업 기술 }); // 감시할 대상(항목) 설정 var config = { attributes: true, childList: true, characterData: true }; // 감시 대상 노드 var target = document.getElementById('target'); // 감시 시작 observer.ob.. 프로그래밍 & IT 정보/Javascript 2021. 12. 22.