[JS] 이벤트 위임(Event Delegation)

이벤트 위임(Event Delegation)

: 이벤트 버블링을 활용하여 여러 자식 요소에 각각 이벤트 리스너를 붙이지 않고, 상위 요소에서 한 번에 이벤트를 처리하는 방법

• 비슷한 방식으로 여러 요소를 다뤄야 할 때 사용
• 요소마다 핸들러를 할당하지 않고, 요소의 공통 조상에 이벤트 핸들러를 하나만 할당해도 여러 요소를 한꺼번에 다룰 수 있다⭕
• 공통 조상에 할당한 핸들러에서 event.target을 이용하면 실제 어디서 이벤트가 발생했는지 알 수 있다⭕
• 많은 핸들러를 할당하지 않아도 되기 때문에 초기화가 단순해지고 메모리가 절약된다⭕
• DOM 수정이 쉬워진다👍

<ul id="parent">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<script>
    document.getElementById('parent').addEventListener('click', function(event) {
      // 이벤트가 발생한 요소를 가져옴
      const target = event.target;

      // 'li' 요소에서만 이벤트를 처리하도록 조건을 설정
      if (target.tagName.toLowerCase() === 'li') {
        console.log(target.textContent);
      }
    });
</script>

 

 

 

이벤트 위임 순서

1. 컨테이너에 하나의 핸들러를 할당
2. 핸들러의 event.target을 사용해 이벤트가 발생한 요소가 어디인지 알아냄
3. 원하는 요소에서 이벤트가 발생했다고 확인되면 이벤트를 핸들링

 

---

 

속성을 사용한 위임

: HTML 요소의 데이터 속성(data attribute)을 사용해 이벤트를 처리

• 특정 속성을 가진 요소에만 이벤트를 처리
• 제일 많이 사용❗

<div id="parent">
  <button data-action="save">Save</button>
  <button data-action="delete">Delete</button>
</div>

<script>
    document.getElementById('parent').addEventListener('click', function(event) {
      const action = event.target.getAttribute('data-action');

      if (action === 'save') {
        console.log('Save button clicked');
      } else if (action === 'delete') {
        console.log('Delete button clicked');
      }
    });
</script>

 

 

 

클래스를 사용한 위임
: 특정 클래스명을 가진 요소에 이벤트를 처리

<div id="parent">
  <button class="btn save">Save</button>
  <button class="btn delete">Delete</button>
</div>

<script>
    document.getElementById('parent').addEventListener('click', function(event) {
      if (event.target.classList.contains('save')) {
        console.log('Save button clicked');
      } else if (event.target.classList.contains('delete')) {
        console.log('Delete button clicked');
      }
    });
</script>

 

 

 

노드를 사용한 위임

: 특정 요소(노드)를 직접 비교하여 이벤트를 처리

<div id="parent">
  <button id="saveBtn">Save</button>
  <button id="deleteBtn">Delete</button>
</div>

<script>
    const parent = document.getElementById('parent');
    const saveBtn = document.getElementById('saveBtn');
    const deleteBtn = document.getElementById('deleteBtn');

    parent.addEventListener('click', function(event) {
      if (event.target === saveBtn) {
        console.log('Save button clicked');
      } else if (event.target === deleteBtn) {
        console.log('Delete button clicked');
      }
    });
</script>

 

---

 

이벤트 위임