[DOM] 이벤트 캡쳐링, 버블링

위와 같이 중첩된 요소에서 element에 addEventListner로
click, scroll 등의 이벤트를 사용하는 경우, 중첩된 요소에서 이벤트가 발생할 때
상위의 이벤트가 하위에 전달되고, 하위의 이벤트가 상위에 전달된다.
위와같이 이벤트가 전파되는 방식에 대해 버블링, 캡쳐가 일어난다고 하는데,
이번엔 이에 대해서 정리를 하려고 한다.

이벤트 등록

//두번째 인자로 실행할 콜백함수를 바로 적어줌
const el1  = document.querySelector('div')
el2.addEventListener('click',()=>console.log('클릭 이벤트 실행'))

//두번째로 인자로 실행할 함수를 따로 연결
const el2  = document.querySelector('div')
el2.addEventListener('scroll',scrollEvent)

function scrollEvent(){
	console.log('스크롤 이벤트 실행')
}
 

useCapture

addEventListener의 세번째 인자로 불린값을 갖는다.
생략은 아래와 같이 false로 이벤트 버블링이 일어나게 함

각 태그마다 이벤트가 등록되어 있기 때문에 상위 요소로 이벤트가 전달되는 것!
div자체에만 이벤트가 등록되어있었다면 일어나지 않는 일이지만,
div의 상위인 header, HTML에 모두 이벤트가 등록되어있다는 전제 하에 일어나는 일이다

이벤트 버블링

useCapture=false인 경우, 따로 설정하지 않는 경우의 default값
하위에서 상위로 전파되는 경우

이벤트 캡쳐링

useCapture=true인 경우, 따로 설정하지 않는 경우의 default값
상위에서 하위로 전파되는 경우

이벤트 전파를 막는 방법

전파를 막을 이벤트 실행 함수에 event객체를 받아와
e.stopPropagation() 를 사용한다

const div  = document.querySelector('div')
div.addEventListener('click',clickEventHandler)

function clickEventHandler(e){
  e.stopPropagation()
}