변형 및 속성 변경 이벤트를 변형 관찰자에 마이그레이션

Internet Explorer 11의 변형 관찰자는 변형 이벤트에서 지원하는 모든 동일한 시나리오에 대해서는 성능이 빠른 교체를, 속성 변경 이벤트에서 지원하는 시나리오에 대해서는 대안을 제공합니다.

변형 이벤트 및/또는 속성 변경 이벤트를 사용하여 변형 관찰자를 사용하도록 기존 코드를 마이그레이션할 수 있습니다.

DOM 변형을 모니터링하기 위한 레거시 기법

Mutation events 웹 플랫폼에서 중요한 역할을 수행합니다. 이러한 이벤트를 통해 웹앱이 웹 페이지의 DOM(문서 개체 모델)에서 요소에 대한 동적 변경을 동기적으로 모니터링할 수 있습니다. 변형 이벤트는 유용하지만, 주로 동기 특성 및 작업 기반인 이벤트 아키텍처로 인해 앱 성능 저하를 일으키는 것으로 알려져 있습니다.

참고   변형 이벤트(W3C DOM 수준 3 이벤트에 정의된 대로)는 사용되지 않으며 대신 변형 관찰자 (W3C DOM4)가 사용됩니다.

속성 변경 이벤트는 변형 이벤트와 유사한 동작을 제공합니다. 또한 이벤트가 제대로 작동하는 데 필요한 레거시 브라우저 이벤트 시스템으로 인해 성능이 저하됩니다.

참고  onpropertychange 이벤트는 레거시 attachEvent IE 전용 이벤트 등록 모델에서만 지원됩니다. 이 레거시 모델은 Windows Internet Explorer 9 이후 사용되지 않고(또한 IE11에서 단종됨) 대신 W3C 표준 "addEventListener" 이벤트 모델이 사용됩니다.

변형 이벤트 식별

Internet Explorer 9에서 처음 제공된 변형 이벤트는 이름으로 쉽게 식별할 수 있고 이름은 addEventListener 또는 removeEventListener 플랫폼 API에 전달되는 문자열 매개 변수입니다.

  • DOMNodeInserted
  • DOMNodeRemoved
  • DOMSubtreeModified
  • DOMAttrModified
  • DOMCharacterDataModified

참고  두 개의 추가 변형 이벤트 DOMNodeInsertedIntoDocumentDOMNodeRemovedFromDocument표준에 따라 정의되지만 Internet Explorer에서 지원되지 않습니다.

다음은 이러한 이벤트 중 하나가 JavaScript 코드에서 나타나는 모양에 대한 예입니다.


someElement.addEventListener("DOMAttrModified", function() {
  //...
}, false);

DOMNodeInserted, DOMNodeRemovedDOMSubtreeModified 변형 이벤트는 요소의 자식에 대한 구조적 변경을 모니터링합니다. 각 요소는 요소의 자식에 추가되거나 제거됩니다. DOMSubtreeModified 이벤트는 추가와 제거에 모두 해당하고 추가 및 제거에 대해 발생합니다. 그러나 이벤트에는 발생된 원인에 대한 정보가 포함되지 않습니다. 사용자는 이벤트만으로 제거와 추가를 구분할 수 없습니다.

DOMAttrModified 변형 이벤트는 요소의 특성 목록에 대한 변경을 보고합니다. 이 단일 이벤트에는 특성 삽입, 제거 또는 변경에 관련된 정보가 포함됩니다.

DOMCharacterDataModified 변형 이벤트는 요소의 텍스트 콘텐츠에 대한 변경을 보고합니다. 텍스트 콘텐츠는 텍스트 노드라는 논리 단위로 그룹화되고 기존 텍스트 노드를 수정하는 경우에만 DOMCharacterDataModified 이벤트가 발생합니다. 새 텍스트 노드가 삽입/생성되면 이 노드는 DOMNodeInserted 이벤트로 보고됩니다.

자주 사용하는 편집기의 파일에서 찾기... 검색 기능을 사용하는 것처럼 코드에서 변형 이벤트를 간단하게 찾을 수 있어야 합니다. 변수는 addEventListener 메서드에서 종종 사용되므로 변형 이벤트 문자열("DOMNodeInserted", "DOMNodeRemoved" 등)의 사용을 먼저 검색한 다음 addEventListener의 모든 발생을 다시 한 번 확인하여 모두 찾아야 합니다.

속성 변경 이벤트 식별

속성 변경 이벤트는 레거시 attachEvent 또는 detachEvent IE 전용 이벤트 등록 API와 함께 사용되는 onpropertychange 이벤트 이름으로 식별할 수 있습니다. attachEvent의 모든 발생을 검색하고 onpropertychange에 대한 첫 번째 매개 변수를 확인하여 코드에서 이러한 사용을 찾습니다.

DOM 요소의 속성이 변경되면 속성 변경 이벤트가 발생합니다. 이벤트는 버블링되지 않으며 Internet Explorer 9 이후 사용되지 않고 대신 W3C 표준 "addEventListener" 이벤트 모델이 사용됩니다. 이벤트에는 이벤트 propertyName getter에서 변경된 속성의 이름이 포함됩니다. 안타깝지만 속성 변경 이벤트를 디스패치하기 위해 많은 기타 이벤트 특성도 계산되고 특성 중 일부는 레이아웃 엔진을 강제로 다시 계산하므로 이러한 이벤트를 사용하면 응용 프로그램에 대한 상당한 성능 비용이 발생합니다.

Unlike with mutation events, 속성 변경 이벤트는 변형 관찰자에 분명히 매핑되지 않습니다. 그러나 해당 속성 이름이 HTML 특성에 반영되는 경우 속성 변경 이벤트의 사용을 변형 관찰자로 바꿀 수 있습니다. 예를 들어 idid 특성을 반영하고, style.color는 직렬화된 style 특성에 반영되고, classNameclass 특성과 일치합니다.

참고  HTML 특성(예: input 요소의 value)에 반영되지 않은 속성의 경우 defineProperty라는 ECMAScript 5(JavaScript) 기능을 사용할 수 있습니다. 이 문서에서는 Object.defineProperty JavaScript API를 사용하여 속성 변경 이벤트를 마이그레이션하는 방법을 설명하지 않습니다.

변형 관찰자의 차이점

변형 관찰자는 웹 플랫폼의 이벤트 모델을 기반으로 하지 않습니다. 이 차이점은 변형 관찰자가 더 빠르게 디스패치될 수 있고 DOM 요소 계층 구조를 통해 이벤트를 버블링할 필요가 없다는 점에서 중요합니다.

또한 변형 관찰자는 관찰자에게 알리기 전에 여러 변경 내용을 기록하도록 구성되어 있습니다. 변형 관찰자는 이벤트가 포함된 앱의 스팸을 방지하기 위해 변형 레코드를 일괄 처리합니다. 이와 반대로 변형 이벤트는 동기적이므로 정상 코드 실행을 중단하여 변형을 앱에 알립니다. 변형 관찰자에 사용된 지연된 알림 모델에도 불구하고 앱의 관찰자는 다음에 다시 표시되기 전에 모든 변형 레코드를 계속해서 수신하고 처리할 수 있습니다.

이러한 변경은 둘 다 변형 관찰을 지원하기 위해 앱을 조정해야 하는 방식에 영향을 줍니다.

변형 관찰자 등록

변형 관찰자를 지정된 요소에 등록하기 전에 먼저 변형 관찰자를 만들어 야합니다. 변형 관찰자를 만들려면 JavaScript new 연산자를 사용하고 콜백 메서드를 지정합니다.


var mutationObserver = new MutationObserver(callback);

변형 관찰자 생성자에 제공하는 콜백은 현재 변형 이벤트에 사용 중일 수 있는 콜백과 다릅니다. 이 내용은 아래에 자세히 설명되어 있습니다.

관찰자를 만든 경우 이제 특정 요소를 관찰하도록 지시합니다. 일반적으로 이 요소는 이전에 변형 이벤트를 등록한 것과 동일한 요소입니다.


mutationObserver.observe(someElement, options);

관찰자에 대한 참조를 저장하지 않으면 관찰자가 하나 이상의 요소를 관찰하고 있는 경우 웹 플랫폼에서 변형 관찰자 인스턴스를 메모리에 유지합니다. 관찰자에 대한 참조를 저장하지 않으면 관찰자의 콜백에서 관찰자를 계속 참조할 수 있습니다(콜백 범위의 this 개체이며 콜백 함수에 대한 두 번째 매개 변수임).

options 매개 변수는 관찰할 변형 유형을 정확하게 설명하기 위해 제공해야 하는 속성이 포함된 단순 JavaScript 개체입니다. 속성 옵션은 앞에서 설명한 변형의 세 가지 범주에 해당합니다.

  • childList
  • attributes
  • characterData

값이 truechildList 옵션은 이 요소의 자식 요소에 대한 변경 관찰(제거 및 추가)을 의미합니다. 이 옵션에는 이 요소의 자식으로 추가되거나 제거되는 텍스트 노드가 포함됩니다.

값이 trueattribute 옵션은 이 요소의 특성에 대한 변경 관찰(제거, 추가 및 변경)을 의미합니다.

값이 truecharacterData 옵션은 이 요소의 텍스트 노드에 대한 변경 관찰(텍스트 노드가 완전히 제거되거나 새로 추가되는 경우를 제외한 텍스트 노드 값에 대한 변경)을 의미합니다.

네 번째 subtree 옵션도 중요합니다. 위의 세 가지 옵션은 기본적으로 격리된 해당 대상 요소만 관찰하고 해당 하위 항목(하위 트리)을 고려하지 않습니다. 지정된 요소 및 모든 해당 하위 항목을 모니터링하려면 subtree 속성을 true로 설정합니다. 변형 이벤트에는 DOM을 통해 버블링한다는 특성이 있으므로 상위 항목 요소에 등록된 변형 이벤트에서 패리티를 유지하려면 subtree 옵션을 사용해야 합니다.

다음 표에서는 어떤 변형 관찰자 옵션이 어떤 변형 이벤트 이름에 해당하는지 설명합니다.

변형 이벤트 변형 관찰자 옵션 참고
DOMNodeInserted { childList: true, subtree: true } 콜백이 노드 제거 레코드를 수동으로 무시해야 합니다.
DOMNodeRemoved { childList: true, subtree: true } 콜백이 노드 추가 레코드를 수동으로 무시해야 합니다.
DOMSubtreeModified { childList: true, subtree: true } 콜백이 이제 추가 및 제거된 노드를 구분할 수 있습니다.
DOMAttrModified { childList: true, subtree: true }
DOMCharacterDataModified { characterData: true, subtree: true }

 

참고  변형 관찰자를 사용하면 childLists, attributes 및 characterData를 동시에 관찰하는 여러 옵션을 관찰할 수도 있습니다.

마지막으로 특성 및 문자 데이터 변경의 이전 값을 저장하고 관찰해야 하는 특성의 범위를 구체화하기 위한 여러 가지 옵션이 있습니다.

  • 값이 trueattributeOldValuecharacterDataOldValue 옵션은 특성 또는 characterData에 대한 변경이 발생할 때 이전 값을 저장합니다.
  • 특성 이름의 문자열 배열이 포함된 attributeFilter 옵션은 관찰을 지정된 특성으로 제한합니다. 이 옵션은 attributes 옵션이 true로 설정된 경우에만 관련됩니다.

이 정보를 사용하여 이전에 변형 이벤트에 대해 등록된 코드를 변형 관찰자에 대해 등록하는 코드로 바꿀 수 있습니다.


// Watch for all changes to the body element's children
document.body.addEventListener("DOMNodeInserted", nodeAddedCallback, false);
document.body.addEventListener("DOMNodeRemoved", nodeRemovedCallback, false);


이제 다음과 같이 됩니다.


// Watch for all changes to the body element's children
new MutationObserver(nodesAddedAndRemovedCallback).observe(document.body, 
  { childList: true, subtree: true });


변형 관찰자 콜백

변형 관찰자 콜백 함수는 두 개의 매개 변수와 함께 호출됩니다.

  • 레코드 목록
  • 콜백을 호출하는 변형 관찰자 개체에 대한 참조

변형 관찰자에 대한 변형 이벤트 콜백을 다시 사용하는 경우 주의해야 합니다. 관련 변형이 발생하는 경우 MutationObserverMutationRecord 개체에서 요청한 변경 정보를 기록하고 현재 범위 내의 모든 스크립트가 실행된 후 콜백 함수를 호출합니다. 콜백이 마지막으로 호출된 시간 이후 하나 이상의 변형(각각 단일 MutationRecord로 표시됨)이 발생할 수 있습니다.

records 매개 변수는 MutationRecord 개체로 구성된 JavaScript 배열입니다. 배열의 각 개체는 관찰되는 요소에서 발생한 하나의 변형을 나타냅니다.

레코드의 속성은 다음과 같습니다.

MutationRecord 속성 설명

type

이 레코드가 기록되는 변형 형식입니다. 가능한 값: attributes, characterData, childList.

target

변형이 기록된 요소입니다. event.target 또는 event.srcElement와 유사합니다.

addedNodes, removedNodes

이 변형의 일부로 추가되거나 제거된 노드의 배열입니다. typechildList인 경우에만 관련됩니다. 이러한 배열은 비어 있을 수 있습니다.

previousSibling, nextSibling

추가되거나 제거된 노드의 이전 및 다음 형제입니다. typechildList인 경우에만 관련됩니다. 이러한 값이 null일 수 있습니다.

attributeName, attributeNamespace

추가, 제거 또는 변경된 특성의 이름 및 네임스페이스입니다. 레코드 형식이 attributes가 아닌 경우 값은 null입니다.

oldValue

attribute 또는 characterData의 이전 값입니다. 변형 관찰자 옵션에 attributeOldValue 또는 characterDataOldValue 플래그가 포함되지 않거나 typechildList인 경우 값이 null일 수 있습니다.

 

 

 

표시:
© 2014 Microsoft