이벤트
이벤트(event)는 브라우저에서 발생하는 액션이나 활동으로,
특정 액션이 일어나면 브라우저는 이름 감지하여 특정한 타입의 이벤트를 발생시킨다.
이벤트 타입은 다양하지만 간단한 예시는 다음과 같다.
사용자 동작 이벤트
| 이벤트 타입 | 발생 시점 |
|---|---|
| click | 마우스 버튼을 클릭했을 때 |
| mousemove | 마우스 움직였을 때 |
| keydown | 키보드 키 눌렀을 때 |
| submit | 폼 제출했을 때 |
브라우저 활동 이벤트
| 이벤트 타입 | 발생 시점 |
|---|---|
| load | 모든 리소스의 로딩이 완료되었을 때 |
| resize | 브라우저의 크기를 조절했을 때 (오직 window 객체에서만 발생) |
| error | 리소스 로딩이 실패했을 때 |
이벤트 핸들러
이벤트 핸들러는 이벤트에 대응하여 실행되는 함수이다.
이벤트가 발생하면 해당 이벤트 핸들러가 호출되어 이벤트를 처리한다.
이벤트 핸들러를 등록하는 방법에는 3가지가 있다.
1. HTML Attribute 사용
HTML 요소의 onclick 속성에 직접 이벤트 핸들러를 등록한다.
<button onclick="handleClick()">클릭하세요</button>2. DOM property 사용
요소의 onclick 속성에 이벤트 핸들러를 등록한다.
var button = document.getElementById('myButton');
button.onclick = handleClick;3. addEventListener 사용
addEventListener 메소드를 사용하여 이벤트 핸들러를 등록하는 방식으로,
가장 권장되는 방법이다.
var button = document.getElementById('myButton');
button.addEventListener('click', function() {
alert('addEventListener로 버튼 클릭됨!');
});이벤트 전파
이벤트 전파란 DOM 트리 내에 존재하는 DOM 요소 노드에서
발생한 이벤트가 DOM 트리 내에서 전파되는 것을 의미한다.
<!-- 기본 태그 생략 -->
<div>
<button>button</button>
</div>
해당 코드에서 버튼을 클릭하면 클릭 이벤트가 발생하게 된다.
이 때 생성된 이벤트 객체는 이벤트를 발생시킨 이벤트 타깃(버튼)을 중심으로 DOM 트리를 통해 전파된다.
캡처링 단계📸
클릭 이벤트가 발생하면 이벤트 객체가 생성된다.
이 이벤트 객체는 window에서 이벤트 타깃 방향으로 전파되는데 이것이 캡처링 단계이다.
addEventListener와 캡처링
캡처링 단계의 이벤트를 캐치하기 위해서는 앞서 소개했던 이벤트 핸들러를 등록하는 3가지 방식 중 addEventListener 메소드를 사용해야 한다.
addEventListener 메소드의 3번째 파라미터에 true를 전달하면, 캡처링 단계의 이벤트를 캐치할 수 있게 된다.
li 태그를 감싸는 ul 태그에 addEventListener의 세번째 파라미터에 true를 주고
각 리스트를 누르면 개발자 도구의 콘솔에 이벤트 단계 : 1 이 출력되는 걸 볼 수 있다.
여기서 이벤트 단계의 뜻은 다음과 같다.
- 1 : 캡처링 단계
- 2 : 타깃 단계
- 3 : 버블링 단계
타깃 단계📌
타깃 단계 는 캡처링 단계를 통해 전파된 이벤트 객체가 이벤트 타깃에 도달하는 단계이다.
타깃 단계에서 대부분의 이벤트 핸들러가 작동하며, 이벤트 리스너가 이벤트 타깃에 바인딩되어 있다.
버블링 단계🫧
버블링 단계 는 이벤트 타깃에 도달한 이벤트 객체는 다시 window 방향으로 전파되는 단계이다.
이벤트 타깃의 부모로부터 시작하여 DOM 트리를 거슬러 올라가며 window까지 이벤트가 전파된다.
대부분의 이벤트는 캡처링/버블링 단계에서 전파된다.
하지만 다음 이벤트들은 버블링을 통해 전파되지 않는다.
- 포커스 이벤트 :
focus / blur - 리소스 이벤트 :
load / unload / abort / error - 마우스 이벤트 :
mouseenter / mouseleave
여기서 포커스와 마우스 이벤트들은 각자 focusin/focusout, mouseover/mouseout으로 대체하면 버블링을 통해 전파 할 수 있다.
이벤트 위임
이벤트 리스너를 각각의 개별 자식 요소에 직접 바인딩하지 않고, 그들의 부모 요소에 하나의 이벤트 리스너를 설정하여 여러 자식 요소들의 이벤트를 처리하는 기법이다.
이벤트 위임은 브라우저의 이벤트 전파 메커니즘에서 특히 버블링을 활용한다.
동적으로 요소가 추가되거나 제거될 때 매우 유용하며, 메모리 사용량을 줄이고 성능을 향상시킬 수 있다.
이벤트 위임을 활용하기 위해서는 이벤트 핸들러가 바인딩된 요소의 모든 하위 요소에서 해당 이벤트를 발생시킨 모든 돔 요소에서 이벤트가 발생하므로 이벤트 반응이 필요한 돔 요소에 한정하여 실행되도록 이벤트 타깃을 검사할 필요가 있다.
