DOM에서 속성 변경을 어떻게 감지할 수 있나요?-JS 튜토리얼-php.cn

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

Patricia Arquette

풀어 주다： 2024-10-26 16:59:03

원래의

555명이 탐색했습니다.

How can I detect Attribute Changes in the 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!