프론트엔드 개발자로 일하기

이벤트 버블링, 이벤트 캡처링

프론트루나 2024. 9. 17. 16:31
반응형

event-bubbling

특정 화면 요소에서 이벤트가 발생했을때, 해당 이벤트가 더 상위의 화면 요소들로 전달되어가는 특성.

상위화면요소.
html 요소는 기본적으로 트리구조를 갖는다. 트리구조상의 한단계 위에 있는 요소를 상위요소라고 하며,
body태그를 최상위 요소라고 부른다.

const divs = document.querySelectorAll('div');

        divs.forEach(d=> {
            d.addEventListener('click', (event)=> {
                console.log(event.currentTarget.className)
            })
        })

가장 최하단의 div3을 클릭했을때, 상위요소로 이벤트가 전이되어 div2, div1, body까지 이벤트 전이가 발생한다.
그 이유는 브라우저가 이벤트를 감지하는 방식 때문입니다.
브라우저는 특정 화면요소에서 이벤트가 발생했을때 그 이벤트를 최상위에 있는 화면 요소까지 이벤트를 전파시킵니다. 여기서 주의할 점은 각 태그마다 이벤트가 등록되어있기 때문에 상ㅇ위 요소로 이벤트가 전달되는 것을 확인할 수 있습니다. 만약 이벤트가 특정 div 태그에만 달려있다면 위와 같은 동작은 결과를 확인할 수 없다.

event-capturing

이벤트 버블링과 반대로 상위 요소에서 하위 요소로 이벤트 전이가 발생하는 현상. 이벤트 옵션에 capture:true 옵션을 주면 된다.

divs.forEach(d=> {
            d.addEventListener('click', (event)=> {
                console.log(event.currentTarget.className)
            }, {capture:true})
        })

event.stopPropgation()

원하는 화면 요소의 이벤트만 신경쓰고 싶을때.
해당 이벤트가 전파되는 것을 막는다.
이벤트 버블링의 경우 클릭한 요소의 이벤트만 전달시키고 상위 요소로 이벤트를 전달시키는 것을 막는다.
이벤트 캡쳐링의 경우 클릭한 요소의 최상위 이벤트 요소만 동작시키고 하위 요소들로 이벤트를 전달시키지 않는다.

event delegation. 이벤트 위임

하위 요소에 각각 이벤트를 붙이지 않고 상위요소에서 하위 요소의 이벤트를 제어하는 방식

동적으로 요소를 추가하고, 추가된 요소에 이벤트를 부여하고 싶을때. 이벤트마다 각각 이벤트를 등록하는 방식이 아닌, 상위요소에 이벤트를 달아놓고, 하위에서 발생한 클릭 이벤트를 감지하여 이벤트를 발생시킨다.
(이벤트 버블링을 이용하여 이벤트를 하위로 전이시켜 발생하도록 함.)

반응형