DOM 속성 변경 시 이벤트 트리거

많은 시나리오에서는 이미지 소스가 변경되거나 div의 HTML이 변경되는 경우와 같이 DOM 속성의 변경을 감지해야 합니다. 콘텐츠 업데이트. 이 기능에 대한 브라우저 지원은 시간이 지남에 따라 발전했습니다.

DOM Mutation Events(Legacy)

과거에는 DOM Mutation Events가 속성 변경을 수신하는 방법을 제공했습니다. 이러한 이벤트에는 다음이 포함됩니다.

• DOMAttrModified
• DOMNodeInserted
• DOMNodeRemoved

그러나 DOM 돌연변이 이벤트에 대한 브라우저 지원은 일관성이 없었습니다.

MutationObserver API

DOM Mutation Events를 대체하기 위해 MutationObserver API가 도입되었습니다. MutationObserver는 DOM 속성 및 DOM의 다른 측면의 변경을 감지하는 보다 강력하고 널리 지원되는 방법을 제공합니다.

MutationObserver를 사용하면 관찰자 인스턴스를 만들고 모니터링하려는 변경 유형을 지정할 수 있습니다. 관찰자는 DOM에서 일치하는 변경 사항이 발생하면 알려줍니다.

다음은 MutationObserver를 사용하여 이미지 소스 속성의 변경 사항을 감지하는 방법에 대한 예입니다.

// Create an observer instance
const observer = new MutationObserver((mutations) => {
  for (const mutation of mutations) {
    // Check if the mutation is for the "src" attribute
    if (mutation.attributeName === "src") {
      // Do something in response to the source change
    }
  }
});

// Start observing the specified target node
observer.observe(image, { attributes: true, attributeFilter: ["src"] });

이 예에서 관찰자는 이미지 노드의 src 속성을 감시하도록 구성되었으며 지정된 콜백을 호출합니다. 해당 속성이 변경될 때마다.

jQuery Mutation Events 플러그인

jQuery를 사용하는 경우 MutationObserver 대신 Mutation Events 플러그인을 활용할 수 있습니다. 이 플러그인은 DOM 속성 변경을 처리하기 위한 단순화된 인터페이스를 제공하며 특정 속성 변경에만 관심이 있는 경우 유용할 수 있습니다.

$(image).on("DOMAttrModified", (event) => {
  if (event.attrName === "src") {
    // Do something in response to the source change
  }
});

MutationObserver 또는 jQuery Mutation Events 플러그인을 활용하면 DOM 속성의 변경 사항을 효과적으로 감지하고 해당 변경 사항에 대한 응답으로 사용자 지정 작업을 실행할 수 있습니다.