위와 같이 중첩된 요소에서 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('스크롤 이벤트 실행')
}
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()
}