イベントのキャプチャ、Bubbling、および委任

≪イベント｜Events｜ldap≫

イベントハンドラ

イベントバッファ

      const outer = document.querySelector('.outer');
      const middle = document.querySelector('.middle');
      const button = document.querySelector('button');

      outer.addEventListener('click', (e) => {
        console.log(`${e.currentTarget}, ${e.target}`);
      });

      middle.addEventListener('click', (e) => {
        console.log(`${e.currentTarget}, ${e.target}`);
      });

      button.addEventListener('click', (e) => {
        console.log(`${e.currentTarget}, ${e.target}`);
      });

イベントバッファの停止

      const outer = document.querySelector('.outer');
      const middle = document.querySelector('.middle');
      const button = document.querySelector('button');

      outer.addEventListener('click', (e) => {
        // 메소들을 사용한 버블링 막기보다 안정적인 방법
        // 이벤트가 발생한 타겟과 현재 핸들러가 동작하는 타겟이 같은 경우가 아니면 아무동작없이 return
        if (e.currentTarget !== e.target) {
          return;
        }

        console.log(`${e.currentTarget}, ${e.target}`);
      });

      middle.addEventListener('click', (e) => {
        // 메소들을 사용한 버블링 막기보다 안정적인 방법
        // 이벤트가 발생한 타겟과 현재 핸들러가 동작하는 타겟이 같은 경우가 아니면 아무동작없이 return
        if (e.currentTarget !== e.target) {
          return;
        }

        console.log(`${e.currentTarget}, ${e.target}`);
      });

      button.addEventListener('click', (e) => {
        console.log(`${e.currentTarget}, ${e.target}`);
      });

イベントのキャプチャ

委任イベント

      // Bad Code
      // 모든 자식요소에 이벤트리스너를 등록하여 메모리 낭비
      const lis = document.querySelectorAll('li');

      lis.forEach((el) => {
        el.addEventListener('click', () => {
          el.classList.add('selected');
        });
      });

      // Good Code
      // 이벤트 위임을 통한 강력한 핸들링
      const ul = document.querySelector('ul');

      ul.addEventListener('click', (e) => {
        // e.target을 통해 이벤트가 발생한 요소를 알 수 있다.
        if (e.target.tagName === 'LI') {
          e.target.classList.add('selected');
        }
      });

参考資料