-
이벤트 버블링과 캡쳐링 , 이유와 방지법은 ?Javascript/JS 문법 2023. 3. 21. 15:53
📌 이벤트 버블링 - 아래요소에서 위로 전파되는 현상
거품처럼 위로 전파된다고 생각하면 외우기 편함
예시 ) querySelectorAll('div')를 통해 박스를 가져온 후 forEach로 addEventListener 를 달아줌
const logEvent = (event) => { console.log(event.currentTarget.className); } var divs = document.querySelectorAll('div'); divs.forEach((div) => { div.addEventListener('click', logEvent); });
문제 : 나는 three 를 눌렀을 뿐인데 two , one 까지 출력되어버림
이유 : 이벤트가 부모 요소까지 전달된다.... 라고는 하는데 사실 어찌보면 당연한 거임
three 박스는 one안에 포함되어 있음 더불어 two 안에 들어있는 것도 사실임
즉 three박스를 눌렀다는건 two박스와 one박스도 사실상 누른거나 다름 없음
그렇게 때문에 three two one 모두 출력됨
📌 이벤트 캡쳐링 - 버블링을 반대로 하고 싶다면 .... { capture : true }
three 박스를 눌렀다는건 결국 one two three를 다 눌렀다는 것
three - two - one 순서로 출력되면 버블링
one - two -three 순서로 출력되면 캡쳐링이다!
캡쳐링 방법 )
divs.forEach((div) => { div.addEventListener('click', logEvent, { capture: true // default 값은 false입니다. }); });
📌 이벤트 버블링이나 캡쳐링을 막고 싶다면 event.stopPropagation() 을 해주면 된다.
const logEvent = (event) => { event.stopPropagation() console.log(event.currentTarget.className); }
'Javascript > JS 문법' 카테고리의 다른 글
javascript JSON 메소드를 알아보자! (0) 2023.03.10 ES6 문법 Array 메소드 map, filter, find, reduce 한번에 정리! (0) 2023.03.09 자바스크립트 prototype 이란 무엇일까? (0) 2023.02.18 객체지향 Class 문법 공부하기 : 자바스크립트 js (0) 2023.02.18 Javascript 화살표 함수 4가지 표현 방식 (0) 2023.02.13