이벤트 전파 질문 리스트
해당하는 질문들을 대답할 수 있도록, 본인이 공부한 흐름에 맞게 정리하여 올려주세요.
이벤트 버블링, 켑쳐링에 대해 설명해주세요.
전파된 이벤트가 실제 실행되는 DOM은 어떻게 알 수 있을까요?
이벤트 위임(델리게이션) 패턴이 무엇인가요?
이벤트 전파를 막는 방법에는 어떤 것이 있을까요?
커스텀 이벤트는 무엇이고 어떻게 사용하나요?
인수 이벤트 전파
1. 이벤트 전파
[정의]
- 이벤트 전파는 특정요소에서 발생한 이벤트가 상위 또는 하위 요소로 전달되어 나가는 자바스크립트의 특징을 말한다.
- 이벤트 전파는 “이벤트 버블링”과 “이벤트 캡쳐링” 으로 구분된다.
[이벤트 전파를 막는 방법]
e.stopPropagation()사용
- 이벤트 버블링의 경우, 클릭한 요소의 이벤트만 발생
- 이벤트 캡쳐링의 경우, 클릭한 요소의 최상위 요소의 이벤트만 동작
2. 이벤트 버블링과 이벤트 캡쳐링
[이벤트 버블링]
- 특정요소에서 이벤트 발생 시, 상위 요소로 해당 이벤트가 전달되는 특성
- 이벤트가 발생한 요소 부터, *최상위요소인 body태그까지 이벤트가 전달
[이벤트 캡쳐링]
- *최상위 요소(body)부터 이벤트가 발생한 요소를 찾기 위해 내려가며 이벤트가 전달되는 특성
- 이벤트 등록 시, 3번째 인자인 options의
capture:true지정하여 사용 가능
3. 커스텀 이벤트
[커스텀 이벤트 사용방법]
new CustomEvent(event-key, params)로 생성
$.addEventListener(event-key, ()⇒{})event-key로 똑같이 이벤트 등록
window.dispatchEvent()로 이벤트 발생
[사용경험]
- 바닐라js로 route 구현 시 사용
location.pathname으로, pathname에 따라 다른 컴포넌트를 렌더링하는route 함수생성history.pushState( nextUrl )로 이동할 페이지로 url을 변경- url 변경을 감지해야 하므로, 이 때
window.dispatchEvent(new CustomEvent(event-key, params))로 이벤트를 생성하고, 발생 시킴 - 이벤트가 발생하면, 전역에서 이를 감지하여,
route()함수를 다시 실행시켜, 변화된 pathname에 맞는 컴포넌트를 렌더링 하도록 함
- 생성과 동시에 발생 시키고, 발생된 이벤트를 전역에서 감지하여, 특정 동작 실행
window.dispatchEvent(new CustomEvent(event-key, params))window.addEventListener(event-key, ()⇒{})