이벤트 전파
이벤트는 DOM 요소에서 발생한다. 해당 DOM 요소에서 발생한 이벤트는 DOM 트리를 통해 전파된다. 이를 이벤트 전파라고 한다.
이벤트는 발생한 DOM 요소를 중심으로 전파가 이루어진다. 전파는 캡처링 단계, 타깃 단계, 버블링 단계가 있다.
- window 객체 → 타깃
캡처링 단계- 타깃 도달
타깃 단계- 타깃 → window 객체
버블링 단계
캡처링 단계
이벤트가 가장 상위 요소에서 타깃까지 내려오는 것을 캡처링이라 한다.
이벤트는 캡처링 단계 또는 버블링 단계에서 캐치할 수 있는데, 캡처링 단계에 캐치하기 위해서는 addEventListener메서드의 3번째 인수로 true를 전달하면 된다.
elem.addEventListener(..., {capture: true})
// 아니면, 아래 같이 {capture: true} 대신, true를 써줘도 됩니다.
elem.addEventListener(..., true)타깃 단계
타깃 단계에서는 이벤트를 캐치할 수 없다.
버블링 단계
이벤트가 타깃에서 상위 요소로 올라가는 것을 버블링이라 한다.
이벤트는 기본적으로 버블링 단계에서 캐치되기 때문에 별도로 인자를 전달해 주지 않아도 된다.
{capture: false}가 기본 값이다.
이벤트 위임
여러 개의 하위 요소 대신 하나의 상위 요소에 이벤트 핸들러를 등록하는 방법이다.
이벤트는 전파되기 때문에 꼭 이벤트가 발생하길 원하는 타깃에 이벤트 핸들러를 바인딩 하지 않아도 된다.
- 이벤트 핸들러를 여러개 바인딩하지 않아도 되니 메모리 사용이 줄어든다.
- 이벤트가 바인딩 되어 있는 요소가 삭제되거나 추가될 때마다 이벤트를 새로 바인딩 해주지 않아도 된다.
이벤트 위임을 사용하면 이런 장점이 있다. 하지만 상위 요소에 이벤트 핸들러가 바인딩 되어있어서 조건을 통해 원하는 이벤트 타깃일 경우 동작하도록 해야 하는 경우가 많다.
stopPropagation
이벤트 전파를 중지시키는 메서드이다.
- 버블링일 경우
- 발생시킨 요소의 이벤트만 발생시키고 상위 요소로의 전달을 중지한다.
- 캡처링일 경우
- 발생시킨 요소의 최상위 요소의 이벤트만 동작시키고 하위 요소로의 전달을 중지한다.
preventDefault
DOM 요소의 기본 동작을 중단한다.
