이벤트 전파
이벤트가 발생하고, 이벤트 객체가 생성되면 이벤트를 발생시킨 DOM 요소인 event target을 중심으로 DOM트리를 통해 전파된다.
이벤트 전파(event propagation)는
1. capturing phase - 이벤트가 상위 -> 하위요소 방향으로 전파
2. target phase (event target) -> 이벤트가 이벤트 타깃에 도달
3. bubbling phase - 이벤트가 하위 -> 상위요소 방향으로 전파
브라우저가 이벤트를 감지하는 방식
1. 이벤트 버블링
특정 화면 요소에서 이벤트가 발생했을 때, 해당 이벤트가 상위의 화면 요소들로 전달되는 특성을 의미한다.
자식 -> 부모
상위의 화면 요소라는 것은
HTML 요소는 트리 구조를 갖는다. 여기서는 트리 구조상 한 단계 더 위에 있는 요소를 상위 요소라고 한다.
<body> 태그는 최상위 요소이다.
버블링은 기본 값이다. 마지막 매개변수에서 이벤트를 캐치할 이벤트 전파단계(캡처링 또는 버블링)을 지정한다.
버블링을 통해 전파되지 않는 이벤트
focus / blur
load, unload, abort, error
mouseenter, mouseleave
addEventListener 메서드의 3번째 인수로 true를 전달할 경우
캡쳐링 이벤트를 캐치할 수 있다.
반면에 false로 전달하는 경우 또는 3번째 인수를 생략하는 경우에는
타깃 단계와 버블링 단계의 이벤트만 캐치한다.
이벤트 버블링을 막기 위한 방법은 어떤 것이 있을까?
원하는 화면 요소의 이벤트만 신경 쓰고 싶을 때 e.stopPropagation()을 사용한다.
2. 이벤트 캡쳐링
이벤트 버블링과 반대 방향으로 진행되는 이벤트 전파 방식이다.
상위요소에서 하위요소를 탐색하여 이벤트를 전파하는 방식이다. 최상단<body>태그에서 이벤트가 발생한 지점을 찾아 내려간다.
자식(이벤트 발생) 부모(시작) -> 자식
예시)
캡처링은 팝업이 있고, 팝업 바깥쪽을 클릭해서 닫게하고 싶을 때 사용하게된다. 팝업 바깥쪽은 팝업의 부모인데, 이벤트 캡처링하면 부모를 클릭했을 때 팝업으로 전달된다. = 부모를 클릭했을 때 팝업을 닫는다.
이벤트 위임
- 자식 엘리먼트의 이벤트를 부모 엘리먼트에서 감지할 수 있으니, 이벤트를 하나하나 등록하는 것이 아닌 부모에게 이벤트를 위임하는 방법을 말한다.
- 여러 개의 하위 DOM 요소에 이벤트 핸들러를 등록하면 성능 저하가 오지만, 상위 DOM 요소에 하나의 이벤트만 등록하여 이를 예방하는 방법이다. 또한 동적으로 하위 DOM 요소를 추가하더라도 일일히 DOM에 거듭하여 이벤트 핸들러를 추가할 필요가 없다.
정리
이벤트 버블링 : 이벤트가 발생했을 때, 해당 이벤트가 상위의 화면 요소들로 전달되는 특성 자식 -> 부모
이벤트 캡쳐링 :상위요소에서 하위요소를 탐색하여 이벤트를 전파하는 방식이다. 최상단 <body> 태그에서 이벤트가 발생한 지점을 찾아 내려간다. 자식(이벤트 발생) 부모(시작) -> 자식
이벤트 위임 : 동적으로 요소들에 각각 동일한 이벤트를 등록하는 것이 아닌, 상위 요소에게 이벤트를 위임해 동일한 이벤트를 한번만 발생시키게 하는 것.
e.stopPropagation : 이벤트가 다른 요소로 전파되는 것을 방지. 이벤트를 등록한 요소에만 발생시키고 싶다면 e.stopPropagation() 호출
e.preventDefault : DOM 요소의 기본 동작을 중단시키는 것.
아래의 기본 동작들을 막아준다.
a -> 고유 동작으로 페이지 이동
form -> HTML 폼 제출시 기본 동작
input, button -> 클릭 이벤트가 발생했을 때 페이지가 리로드 되는 현상
버블링과, 캡쳐링 어느것이 먼저 발생하는가? : 캡쳐링이 먼저 발생하고 버블링이 발생한다.
이벤트는 캡처링 -> 타깃 -> 버블링 단계로 전파된다.
addEvenetListener의 3번째 인수를 생략하거나 false를 지정하면 버블링 단계에서 이벤트를 캐치하고, true를 지정하면 캡처링 단계에서 이벤트를 캐치한다.
