@nonoll/code-snippet

Class: MutationObserver

MutationObserver

new MutationObserver(option)

target 으로 설정된 element 의 변화를 감지

Parameters:
Name Type Description
option Partial.<IMutationObserverExtOption>
Properties
Name Type Argument Default Description
target HTMLElement <optional>
 null

target
debounce Number <optional>
 300

debounce
callback function | null <optional>
 noop

callback function
options Object <optional>
 {}
Properties
Name Type Argument Description
childList Boolean <optional>
attributes Boolean <optional>
characterData Boolean <optional>
subtree Boolean <optional>
attributeOldValue Boolean <optional>
characterDataOldValue Boolean <optional>
attributeFilter Array.<String> <optional>

MDN attributeFilter
Source:
See:
Example
import { MutationObserver, MUTATION_EVENTS } from '@nonoll/code-snippet/observer';

const createElement = ({ tag = 'div', id = '', style = '', value = '', text = '' }) => {
  const doc = window.document;
  const target = doc.createElement(tag);
  target.setAttribute('id', id);
  target.setAttribute('style', style);
  target.setAttribute('value', value);
  if (text) {
    target.textContent = text;
  }
  return target;
}

let observer;

const forExample = () => {
  if (observer) {
    console.log('already example');
    return;
  }

  const doc = window.document;

  const target = createElement({ id: 'example_target', style: 'border: 1px solid red' });
  doc.body.appendChild(target);

  const options = {
    childList: true,
    subtree: true
  };

  observer = new MutationObserver({ target, options });

  observer.on(MUTATION_EVENTS.WILD_CARD, (type, values) => {
    console.log('wildCard', type, values);
  }).on(MUTATION_EVENTS.CHANGE_CHILD_LIST, values => {
    console.log('childList', values);
  });

  observer.attach();

  const attachButton = createElement({ tag: 'button', text: 'observer attach' });
  const detachButton = createElement({ tag: 'button', text: 'observer detach' });
  const appendButton = createElement({ tag: 'button', text: 'append' });

  doc.body.appendChild(attachButton);
  doc.body.appendChild(detachButton);
  doc.body.appendChild(appendButton);

  attachButton.addEventListener('click', e => {
    e.preventDefault();
    console.log('attachButton clicked');
    if (!observer) {
      return;
    }
    observer.attach();
  });

  detachButton.addEventListener('click', e => {
    e.preventDefault();
    console.log('detachButton clicked');
    if (!observer) {
      return;
    }
    observer.detach();
  });

  appendButton.addEventListener('click', e => {
    e.preventDefault();
    console.log('appendButton clicked');
    if (!observer) {
      return;
    }
    const input = createElement({ tag: 'input', value: `${+new Date()}` });
    target.appendChild(input);
  });
}

forExample();

Extends

Methods

attach()

이벤트 감지 설정

Source:
Returns:
Type
MutationObserver
Example
observer.attach();

destroy()

destory

Source:
Returns:
Type
MutationObserver
Example
observer.destroy();

detach()

이벤트 감지 해제

Source:
Returns:
Type
MutationObserver
Example
observer.detach();

emit(eventName, values)

이벤트 전파

Parameters:
Name Type Argument Description
eventName string
values Array.<any> <repeatable>
Inherited From:
Overrides:
Source:
Returns:
Type
EventEmitter

fire(eventName, values)

이벤트 전파

Parameters:
Name Type Description
eventName string
values any
Inherited From:
Overrides:
Source:
Returns:
Type
EventEmitter

off(eventName [, listener])

이벤트 감지 해제

Parameters:
Name Type Argument Description
eventName string
listener TypeVoidFunction <optional>
Inherited From:
Overrides:
Source:
Returns:
Type
EventEmitter

on(eventName [, listener] [, context])

이벤트 감지 등록

Parameters:
Name Type Argument Default Description
eventName string
listener TypeVoidFunction <optional>
 noop
context * <optional>
Inherited From:
Overrides:
Source:
Listens to Events:
Returns:
Type
MutationObserver

once(eventName [, listener] [, context])

이벤트 1회 감지 등록

Parameters:
Name Type Argument Default Description
eventName string
listener TypeVoidFunction <optional>
 noop
context * <optional>
Inherited From:
Overrides:
Source:
Returns:
Type
EventEmitter

Type Definitions

MutationRecordType

Type:
  • String
Properties:
Name Type Description
childList String
attributes String
characterData String
subtree String
Source:
See:

Events

MUTATION_EVENTS

MutationEvent Types

Properties:
Name Type Description
CHANGE_CHILD_LIST String

childList 변경 시점
CHANGE_SUBTREE String

subtree 변경 시점
CHANGE_ATTRIBUTES String

attributes 변경 시점
CHANGE_CHARACTER_DATA String

data 변경 시점
CHANGE String

기타 변경 시점
WILD_CARD String

모든 변경 시점
Source:
Listeners of This Event: