jQuery를 사용하여 CSS 속성 변경에 대한 이벤트 감지

웹 개발 영역에서 요소의 CSS 속성에 대한 변경을 감지하는 것은 다음과 같습니다. 동적 업데이트를 구현하는 데 중요합니다. jQuery를 사용하면 DOM 이벤트의 강력한 기능을 활용하여 "표시"와 같은 CSS 속성의 변경 사항을 효과적으로 모니터링하고 대응할 수 있습니다.

DOMAttrModified 이벤트 사용

Modern 브라우저는 DOMAttrModified 이벤트를 포함하는 DOM 돌연변이 이벤트에 대한 지원을 제공합니다. 이 이벤트는 인라인으로 정의되거나 외부 스타일시트를 통해 정의된 CSS 속성을 포함하여 요소의 속성이 수정될 때 이를 알리도록 특별히 설계되었습니다.

DOMAttrModified 이벤트를 활용하려면 jQuery의 on() 함수(시연된 대로) 아래:

document.documentElement.addEventListener('DOMAttrModified', function(e){
  if (e.attrName === 'style') {
    console.log('prevValue: '   e.prevValue, 'newValue: '   e.newValue);
  }
}, false);

document.documentElement.style.display = 'block';

이 예에서는 문서의 루트를 나타내는 document.documentElement 요소에 이벤트 리스너를 연결합니다. 스타일 속성(예: "디스플레이")이 수정되면 이 이벤트 핸들러가 트리거되어 수정된 속성의 이전 및 현재 값에 액세스할 수 있습니다.

IE의 "속성 변경" 이벤트 활용

DOMAttrModified를 지원하지 않는 이전 브라우저의 경우 Internet Explorer의 독점 "propertychange" 이벤트를 대체합니다. 이 이벤트는 IE에서 특별히 지원되지만 해당 환경에서 스타일 변경을 감지하는 안정적인 방법을 제공할 수 있습니다.

"propertychange" 이벤트를 활용하려면 jQuery의 를 사용할 수 있습니다. 다음과 같이 문자열 인수가 있는 on() 함수 예:

document.documentElement.on('propertychange', function(e){
  if (e.propertyName === 'display') {
    console.log('prevValue: '   e.prevValue, 'newValue: '   e.newValue);
  }
}, false);

document.documentElement.style.display = 'block';

Mutation Observer에 대한 참고 사항

앞서 언급한 기술은 과거에 CSS 속성 변경을 감지하는 일반적인 접근 방식이었지만, 최신 브라우저에서는 특정 DOM 요소의 변경 사항을 모니터링하기 위한 보다 표준화되고 간소화된 메커니즘을 제공하는 Mutation Observer를 사용하는 것이 좋습니다.