이벤트 버블링, 캡쳐, 위임

이벤트 버블링

이벤트가 발생했을때 상위 컴포넌트로 이벤트가 전달되는 특징

div->div->div->body 이런식으로 이벤트가 상위로 전달된다.

<body>
  <div class="parent">
    <div class="child">

    </div>    
  </div>
</body>

document.querySelector('parent').addEventListener('click', (e)=>{
    console.log(e.target.className);
});

document.querySelector('child').addEventListener('click', (e)=>{
    console.log(e.target.className);
});

child 를 클릭하면 child, parent순서대로 콘솔에 찍힌다.

브라우저에 의해 화면에 이벤트가 발생했을때 최상위요소까지 이벤트를 전파시키기 때문이다.

*각 태그마다 이벤트가 등록 되어 있어 이런 현상이 일어난다. 만약 이벤트 등록이 되어있지 않으면 클릭은 되지만 이벤트가 없기 때문에 실행되지 않는다.

이벤트 캡쳐

이벤트 버블링과 반대방향으로 진행되는 이벤트 방식이다.

div<-div<-div<-body 이런식으로 상위로부터 하위까지 이벤트가 전달된다.

<body>
  <div class="parent">
    <div class="child">

    </div>    
  </div>
</body>

document.querySelector('parent').addEventListener('click', (e)=>{
    console.log(e.target.className);
},{capture:true});

document.querySelector('child').addEventListener('click', (e)=>{
    console.log(e.target.className);
},{capture:true});

이벤트 옵션에 capture:true 옵션을 설정해주면 된다.

이전과는 반대로 parent, child순서대로 콘솔에 출력된다.

+event.stopPropagation()

나는 이벤트전파되는거 모르겠고 그냥 해당 컴포넌트에서만 이벤트가 발생하게 하고 싶다!

라는 분은 stopPropagation을 쓰면 됩니다!

document.querySelector('parent').addEventListener('click', (e)=>{
	e.stopPropagation();
    	console.log(e.target.className);
});

document.querySelector('child').addEventListener('click', (e)=>{
	e.stopPropagation();
    	console.log(e.target.className);
});

이벤트 버블링의 경우 child를 선택했을때 child만 출력됩니다.

document.querySelector('parent').addEventListener('click', (e)=>{
	e.stopPropagation();
    	console.log(e.target.className);
},{capture:true});

document.querySelector('child').addEventListener('click', (e)=>{
	e.stopPropagation();
    	console.log(e.target.className);
},{capture:true});

이벤트 캡쳐의 경우 child를 클릭했을때 parent만 출력됩니다.

이벤트 위임

만약 동적으로 요소를 추가해야 하는데 해당 컴포넌트에 이벤트를 달아주고 싶으면 어떻게 할까요?

위에 대한 답은 이벤트 위임! 입니다.

<ul class="list">
	<li>
		<div class="component"></div>
	</li>
	<li>
		<div class="component"></div>
	</li>
</ul>

이런식으로 HTML이 구성되어 있다고 할때 li 요소를 추가하게 되면 이벤트가 붙지 않습니다.

let list = document.querySelector('.list');
list.addEventListener('click', function(event) {
	alert('clicked');
});

을 하게되면 ul태그에 이벤트가 등록되어 하위에 있는 li태그의 이벤트까지 감지하게 됩니다.

이제 일일히 이벤트를 추가안해줘도 되겠죠?

이벤트 버블링의 예라고 볼수 있겠네요

SMALL

저작자표시

'웹 프로그래밍 > FrontEnd' 카테고리의 다른 글

[React] useRef는 unmount 되어도 유지될까? (0)	2023.03.10
[React] useState? useRef? (feat.단축키 추가) (0)	2023.01.29
[JavaScript] Bind가 뭐죠? (0)	2021.09.15
[Javascript] fetch()로 API 요청 보내기 (0)	2021.09.14

코딩이야기 by Fansor

이벤트 버블링, 캡쳐, 위임