[JS] 버블링 캡처링 복습

jiseong·2022년 1월 10일

T I Learned

목록 보기

164/291

버블링과 캡처링

코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>버블링&캡처링</title>
    <style>
        div {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .one {
            width: 300px;
            height: 300px;
            background-color: red;
        }

        .two {
            width: 200px;
            height: 200px;
            background-color: orange;
        }

        .three {
            width: 100px;
            height: 100px;
            background-color: yellow;
        }
    </style>
</head>
<body>
	<div class="one">one
		<div class="two">two
			<div class="three">three</div>
		</div>
	</div>
    <script>
        const divs = document.querySelectorAll('div');
        const showLog = (e) => console.log(e.currentTarget.className);

        // 버블링
        divs.forEach((div) => {
            div.addEventListener('click', showLog);
        });

        // 캡처링
        divs.forEach((div) => {
            div.addEventListener('click', showLog, true);
        });
    </script>
</body>
</html>

결과 화면

// 캡처링도 켜둔 상태
1) three 요소를 눌렀을 때

2) two 요소를 눌렀을 때

3) one 요소를 눌렀을 때

활용 예시 (Event Delegation)

1) 동적으로 생성된 요소 이벤트 핸들링

예를 들면 Todo list에서 ul에 태그(요소들의 공통 조상)에 이벤트 리스너를 사용하면

동적으로 생성된 하위 li 태그에서도 클릭을 했을 때 버블링으로 인해 상위 ul 태그까지 도달할 수 있기 때문에

이벤트 핸들링이 가능하며 일일이 모든 li 태그에 이벤트 리스너를 달 필요가 없어지게 된다.

2) 팝업창

// this.$dom = this.createDom('div', {
//      className: 'modal-background hidden',
//    });

const $loginModalWrapper = this.$dom.querySelector('.login-modal-wrapper');

this.$dom.addEventListener('click', e => {

  // login-modal-wrapper 범위 바깥을 클릭 시 모달창 off
	if (!$loginModalWrapper.contains(e.target)) {
    this.$dom.classList.add('hidden');
  }

  // login-exit-btn 버튼 클릭 시 모달창 off
  if (e.target.classList.contains('login-exit-btn')) {
    this.$dom.classList.add('hidden');
  }
});

이벤트 발생시 동적으로 생성되는 이벤트 객체 (event)의
event.target
event.currentTarget의 차이를 알아두면 좋다.

event.target: event handler가 붙여진 요소를 참조
event.currentTarget: 실제로 이벤트를 발생시킨 요소를 참조