이벤트 전파
DOM 요소 노드에서 발생한 이벤트는 DOM 트리를 통해 전파됩니다.
이를 이벤트 전파 event propagation 라고 합니다.
li 요소를 클릭하면 클릭 이벤트가 발생하고 생성된 이벤트 객체는 이벤트를 발생시킨 DOM 요소인 이벤트 타깃을 중심으로 DOM 트리를 통해 전파됩니다.
이벤트 전파는 이벤트 객체가 전파되는 방향에 따라 3 단계로 구분할 수 있습니다.
- 캡처링 단계
- 이벤트가 상위 요소에서 하위 요소 방향으로 전파
- 타깃 단계
- 이벤트가 이벤트 타깃에 도착
- 버블링 단계
- 이벤트가 하위 요소에서 상위 요소 방향으로 전파
<!DOCTYPE html>
<html>
<body>
<ul id='phone'>
<li id='samsung'>Samsung</li>
<li id='apple'>Apple</li>
<li id='nokia'>Nokia</li>
</ul>
<script>
const $phone = document.getElemetnById('phone');
$phone.addEventListener('click', e => {
console.log(e.eventPhase); // 버블링 단계
console.log(e.target); // [object HTMLLIElement]
console.log(e.currentTarget); // [object HTMLULListElement]
});
</script>
</body>
</html>
-
li 요소를 클릭하면 클릭 이벤트가 발생하여 클릭 이벤트 객체가 생성됩니다.
-
클릭된 li 요소가 이벤트 타깃이 됩니다.
-
클릭 이벤트 객체는 window 에서 시작해 이벤트 타깃 방향으로 전파됩니다.이것이 캡처링 단계입니다.
-
이후 이벤트 객체는 이벤트를 발생시킨 이벤트 타깃에 도달합니다. 이것이 타깃 단계입니다.
-
이후 이벤트 객체는 이벤트 타깃에서 시작해 window 방향으로 전파됩니다. 이것이 버블링 단계입니다.
-
이벤트 버블링은 이벤트 객체의 stopPropagation 메소드로 전파를 막을 수 있습니다.
-
이벤트 객체의 preventDefault 메서드는 DOM 요소의 기본 동작을 중단시킵니다.
이벤트 위임
-
이벤트 위임 event delegation 은 여러 개의 하위 DOM 요소에 각각 이벤트 핸들러를 등록하는 대신 하나의 상위 DOM 요소에 이벤트 핸들러를 등록하는 방법입니다.
-
이벤트는 이벤트 타깃은 물론 상위 DOM 요소에서도 캐치할 수 있습니다.
-
이벤트 위임을 통해 상위 DOM 요소에 이벤트 핸들러를 등록하면,
-
여러 개의 하위 DOM 요소에 이벤트 핸들러를 등록할 필요가 없고
-
동적으로 하위 DOM 요소를 추가하더라도 일일이 추가된 DOM 요소에 이벤트 핸들러를 등록할 필요가 없습니다.
-
이벤트 객체의 target 프로퍼티와 currentTarget 프로퍼티는 동일한 DOM 요소를 가리키지만
-
이벤트 위임을 통해 상위 DOM 요소에 이벤트를 바인딩한 경우, 이벤트 객체의 currentTarget 프로퍼티는 언제나 변함 없이 이벤트 핸들러를 등록한 DOM 요소를 가리키지만, target 프로퍼티는 실제로 이벤트를 발생시킨 DOM 요소를 가리킵니다.
