Listener(リスナー)とObserver(オブザーバー)

Listener(リスナー)

用途

あるイベントが実行された時に処理を実行したい場合に用いる

まずは読むべきサイト

developer.mozilla.org

上記の詳細を知りたい場合

コードスニペット

let button = document.getElementById('hoge');
button.addEventListener('click', function(event){
    console.log('bubbles       :' + event.bubbles);
    console.log('cancelable    :' + event.cancelable);
    console.log('currentTarget :' + event.currentTarget.outerHTML);
    console.log('eventPhase    :' + event.eventPhase);
    console.log('target        :' + event.target.outerHTML);
    console.log('type          :' + event.type);
});

Observer(オブザーバー)

用途

DOMの要素が変更された時に処理を実行したい場合に用いる

まずは読むべきサイト

developer.mozilla.org

上記の詳細を知りたい場合

MutationObserver.observe() - Web API | MDN
MutationRecord - Web API | MDN

コードスニペット

let targetNode = document.getElementById('hoge');
let config = {attributes: true, childList:true, subtree:true};
let callback = function(mutationsList, observer) {
  for(const mutation of mutationsList) {
    if (mutation.type === 'childList' ) {
      console.log('childList：' + mutation.target.outerHTML);  
    }
    else if (mutation.type === 'attributes') {
      console.log('attribute：' + mutation.target.outerHTML);
    }
  }
};
let observer = new MutationObserver(callback);
observer.observe(targetNode, config);