JS | 이벤트 버블링, 전파 활용과 방지 (캡쳐링)
정라잇 |
개요
- 이벤트 위임 : 이벤트를 하위 또는 상위 객체에 위임합니다.
- 이벤트 버블링 : 한 요소에 이벤트가 발생하면, 부모 요소의 핸들러가 동작합니다.
가장 최 상단의 요소까지 이 과정이 반복됩니다.
이벤트 버블링
- 버블링 단계(Bubbling Phase) : 이벤트가 상위 요소로 전파되는 단계
- 타겟 단계(Target Phase) : 이벤트가 실제 타겟 요소에 전달되는 단계
See the Pen 이벤트 버블링 by rit245 (@rit245) on CodePen.
자바스크립트로 로그를 출력합니다. 이 때 하나만 썼음에도 event가 줄줄이 소세지처럼 실행됩니다
이는 이벤트 버블링이 일어났기 때문에 그렇습니다.
See the Pen 220831_이벤트-버블링2 by rit245 (@rit245) on CodePen.
엘리먼트를 클릭하여 on 클래스를 부여하는 함수를 만들었습니다.
이 코드의 문제점은 자식 선택자가 선택되기 때문에 원래의 목적에 맞추어 사용하기 힘듭니다.
See the Pen 220831_이벤트-버블링3 by rit245 (@rit245) on CodePen.
자식 선택자를 클릭했을 때 부모 버튼에 on 클래스를 추가합니다.
만약 조상 선택자를 클릭했을 경우를 대비해 else if 를 통해 return 을 설정합니다.
참조 메서드
| 버블링 불가능 | 버블링 가능(이벤트 확산) | 설명 |
| focus() | focusin() | 선택 요소가 포커스가능할 때 포커스를 줍니다 |
| blur() | focusout() | 선택 요소에서 포커스를 벗어날 때 |
| mouseenter() | mouseover() | 마우스를 올렸을 때 |
| mouseleave() | mouseout() | 마우스가 벗어났을 때 |
- 포커스 : 마우스 클릭이나 탭(Tab) 키를 입력하여 활성화합니다.
- 요소 or 해당 자식이 포커스 잃는지 보려면 onfocus() 를 활용합니다.
버블링 중단하기
버블링을 막아야 하는경우는 거의 없습니다. 오히려
stopPropagation을 사용한 영역은 분석 시스템의 코드가 동작하지 않기 때문에dead zone이 될 수 있습니다. 꼭 필요한 경우가 아니라면 버블링을 막지 않는게 좋습니다.
<button onclick="event.stopPropagation()">버튼</button>- event.stopPropagation() : 위쪽으로 일어나는 버블링을 막아줍니다.
다른 핸들러가 동작하는건 막지 못합니다. - event.stopImmediatePropagation() : 버블링을 멈추고 다른 핸들러의 동작을 막을 수 있습니다.
요소에 할당된 특정 이벤트를 처리하는 핸들러 모두 동작하지 않습니다.
이벤트 캡쳐링
- 캡쳐 단계(Capture Phase) : 이벤트가 하위 요소로 전파되는 단계
- 타겟 단계(Target Phase) : 이벤트가 실제 타겟 요소에 전달되는 단계
- 이벤트 캡쳐링 : 이벤트가 하위 요소로 전파되는 단계
거의 사용하지는 않지만 이론을 알고계시면 도움이 됩니다.
관련 문법
- event.eventPhase : 현재 이벤트 흐름단계 (캡처링=1 , 타깃=2, 버블링=3)
- event.currentTarget (=this) :