ドットインストール - 3分動画でマスターできるプログラミング学習サービス

main.js

// 21.イベントの伝播を理解しよう
// 子要素で発生したイベントは親要素を辿ってどんどん上位ノードに伝播する
// e.target: イベントが発生した要素（子要素）
// e.currentTarget: イベントリスナを追加した要素（子要素の親要素等の上位要素）
'use strict';
{
  document.querySelector('ul').addEventListener('click', (e) => {
  // document.querySelector('body').addEventListener('click', (e) => {
    if (e.target.nodeName === 'LI') {
      console.log(e);
      console.log(`e.target.nodeName: ${e.target.nodeName}`);
      console.log(`e.currentTarget.nodeName: ${e.currentTarget.nodeName}`);
      e.target.classList.toggle('done');
    }
  });
}