-
이벤트 버블링, 캡쳐, 위임웹 프로그래밍/FrontEnd 2021. 9. 10. 01:47728x90반응형
이벤트 버블링
이벤트가 발생했을때 상위 컴포넌트로 이벤트가 전달되는 특징
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태그의 이벤트까지 감지하게 됩니다.
이제 일일히 이벤트를 추가안해줘도 되겠죠?
이벤트 버블링의 예라고 볼수 있겠네요
728x90반응형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