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

1. Event

• 웹 페이지에서 발생하는 사용자 또는 브라우저의 특정 동작을 의미한다.
  • 클릭 이벤트
  • 마우스 오버 이벤트
  • 키보드 이벤트
  • 폼 이벤트
  • 로드 이벤트
• 이벤트 처리
  • 이벤트 처리를 위해서 특정 이벤트가 발생할 때 실행될 함수를 정의하고, 이를 이벤트 리스너에 연결한다.
  • 간단한 예시

const button = document.getElementById('myButton');
button.addEventListener('click', () => {
    alert('Button was clicked!');
});

 

2. 이벤트 위임

• 이벤트 위임은 이벤트의 처리 기술 중 하나로, 부모 요소에 이벤트 리스너를 설정하고, 이벤트가 발생했을 때 자식 요소에서 발생한 이벤트를 저리하는 방법이다.
• 이벤트 위임을 사용하는 이유
  • 효율성 : 많은 자식 요소에 각각의 이벤트 리스너를 설정하는 대신, 하나의 부모 요소에만 리스너를 설정해도 모든 자식 요소에서 발생한 이벤트 처리 가능. 메모리와 성능 측면에 효과적이다
  • 동적 요소 처리 : 페이지가 처음 로드된 후 추가적 동적 요소에도 이벤트를 적용할 수 있다. 만약 새롭게 추가된 자식 요소에 대해 이벤트를 처리해야 한다면, 이벤트 위임을 통해 이미 존재하는 부모 요소의 이벤트 리스너가 이를 처리 할 수 있다.
• 간단한 예제

//HTML 
<ul id="parentList">
    <li>Item 1 <button class="itemBtn">Click Me</button></li>
    <li>Item 2 <button class="itemBtn">Click Me</button></li>
    <li>Item 3 <button class="itemBtn">Click Me</button></li>
</ul>

// JS 코드
const parentList = document.getElementById('parentList');

parentList.addEventListener('click', (event) => {
    if (event.target.classList.contains('itemBtn')) {
        alert(event.target.innerText + ' was clicked!');
    }
});

• parentList에 <ul> 요소를 담는다.
• ul의 자식 요소들도 클릭 이벤트 리스너에 등록하게 된다.
• 자식 요소들이 "itemBtn" 클래스를 가지고 있을 때만 동작하고록 수행한다.

3. 이벤트 버블링

• 이벤트 위임이 가능한 이유는 이벤트 버블링 이라는 메커니즘 덕분이다.
• 이벤트가 발생했을 때 해당 이벤트가 가장 안쪽의 요소(최소 단위)에서 시작하여 점점 바깥쪽으로 전파되는 현상
• 부모 요소에 이벤트 리스너를 설정해도 자식 요소에서 발생한 이벤트를 처리할 수 있다.