DOM에서 속성 변경을 어떻게 감지할 수 있나요?

DOM에서 속성 변경 감지

질문:

HTML 요소의 속성이 변경될 때 맞춤 이벤트와 같은 이벤트가 발생합니까? 좀 더 구체적으로 말하면, 이미지() 요소의 src 속성이나 구분(

) 요소의 innerHTML 속성이 수정되는 경우는?

답변:

Mutation 이벤트(더 이상 사용되지 않음)

역사적으로 DOM Mutation 이벤트는 속성 변경을 모니터링하는 데 사용되었습니다. 그러나 2012년부터 더 이상 사용되지 않습니다. 대체품인 MutationObserver를 권장합니다.

MutationObserver

MutationObserver는 DOM의 변경 사항을 관찰할 수 있는 고급 API입니다. . Mutation Events보다 더 세밀한 제어 기능을 제공하며 특정 요소, 돌연변이 및 트리 구조를 추적할 수 있습니다.

MutationObserver의 예:

<code class="javascript">// Create a new MutationObserver instance
const observer = new MutationObserver((mutationsList) => {
  for (const mutation of mutationsList) {
    // Check if the mutation is an attribute change
    if (mutation.type === "attributes") {
      console.log(`Attribute changed on ${mutation.target.nodeName}`);
    }
  }
});

// Start observing the document body for attribute changes
observer.observe(document.body, { attributes: true });</code>

jQuery 이벤트 플러그인

jQuery용 Mutation Events 플러그인을 사용하여 속성 변경을 감지할 수도 있습니다. 기본 사용 사례에 대해 사용하기 쉬운 API를 제공합니다.

jQuery Mutation Events 플러그인의 예:

<code class="javascript">$("img").on("attrchange", (e) => {
  console.log(`Image src changed to ${e.target.src}`);
});</code>

참고:

DOM 돌연변이 이벤트에 대한 브라우저 지원은 다양합니다. 이 기능을 사용하기 전에 항상 호환성을 확인하는 것이 좋습니다.

위 내용은 DOM에서 속성 변경을 어떻게 감지할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

jquery html for Attribute Event dom this innerHTML

성명：

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.