Bleeding edge

Javascript - Event bubbling, Event Capturing 본문

Javascript

Javascript - Event bubbling, Event Capturing

codevil 2022. 4. 8. 13:08

 

 

FE 면접 질문을 검색하다보면, 종종 이벤트 버블링, 이벤트 캡쳐링에 대한 질문이 나온다. 마침 공부하던 영상에서 나왔고, 실제로 혼자 토이프로젝트를 만들다보면 만나던 이슈가 바로 이거였다니..!!하고 봐서 너무 신기하고 반가웠던 개념이었다.

 

 

<body>
	<header>
		<ul>
			<li>
			</li>
		</ul>
	</header>
</body>

 

 

버블링과 캡쳐링에 앞서서, 지금 버블링과, 캡쳐링에 이야기하는 셀렉터는 꼭 이 셀렉터가 아니라, depth위치를 기준으로 하위 셀렉터인지 상위 셀렉터인지를 구분하기위해 이야기를 하는 것이다. 예시 li를 누르면 ul에! 라고 할 때는, li가 하위 ul를 상위와 같은 관계에 있다면 div 안의 div에서도 같게 적용된다.

Event bubbling : li를 눌렀는데 ul, header , body 즉, 상위 요의 셀렉터에 이벤트(클릭이나 마우스 다운과같은)가 전달되는 현상을 말한다

Event capturing : 버블링과 반대로 body에서 li까지 이벤트가 전달되는 현상

 

 

 

해결방법

function logEvent(event) {
	event.stopPropagation();
}

다음과 같이 stopPropagation을 이용하여, 이벤트의 전파를 막을 수 있다. 하지만 이방식 보다는, 이벤트 위임이라는 방식으로 막는 것이 더 좋다.

 

 

 

이벤트 위임이란? (Event delegation)

이벤트의 상위 요소에 하위요소에서 일어날 이벤트를 위임함으로써, 이벤트 버블링이나 캡쳐링을 막을 수 있다.

또 다른 장점?

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

이벤트 위임을 안하면, li에 5번 addeventlistener을 사용해야하지만, ul에 위임하면 단 한번이면 되기에 브라우저에 부담이 덜간다.

 

이벤트 위임방법 1. if else

    const items = document.querySelector('ul');
    items.addEventListener('click', (event)=>{
        if(event.target.nodeName ==='LI'){
            //func when click li
        }else{
            //func
        }
    })

이벤트 위임방법 2. if

(1번방법에서 else만 제외했다)

    const items = document.querySelector('ul');
    items.addEventListener('click', (event)=>{
        if(event.target.nodeName ==='LI'){
            //func when click li
        }
    })

이벤트 위임방법 3. li가 아닌 것을 눌렀을 때 return

    const items = document.querySelector('ul');
    items.addEventListener('click', (event)=>{
        if(event.target.nodeName!=='LI'){
            return; //prevent event diffuse
        }
        //when click li
    })

 

여기서 잠깐, 꼭 nodeName이 아니라 classList와 같이 다른 것을 사용해도 된다는점!

'Javascript' 카테고리의 다른 글

문서와 리소스의 로딩  (0) 2022.04.22
Javascript - debounce, throttle  (0) 2022.04.08
Javascript - Promise  (0) 2022.04.07
this this this this  (0) 2022.04.07
JS로 어떤 걸 할 수 있을까?  (0) 2022.04.06
'Javascript' Related Articles more