[2022-11-21]새싹 프론트엔드 Event 이벤트 캡처링, 버블링, 타켓

캡처링이란?

이벤트가 자식(하위)요소로 전달되는 것

캡쳐링 효과를 사용한 부모요소 이벤트 자식에게 상속 위임

부모요소에만 이벤트를 걸어줘도 자식 요소가 그 값을 상속받는다.

---

버블링이란?

이벤트가 부모(상위) 요소로 전파되는 것

자식요소 이벤트의 상속과는 다르다.

자식요소의 이벤트가 작동하면 부모의 이벤트도 작동되는 것

 

버블링 효과로인하여 div.first가 부모요소임에도 자식요소의 click이벤트가 발생하면

부모인 div.first 도 작동된다. 

div.third 작동 -> div.second -> div.first 순서로 작동되며 거꾸로 작동시키고싶을떄 캡처링을 사용한다.

div.first -> div.second -> div.third 순서변경가능(캡처링 사용)

 

 

버블링 효과 예시

버블링효과 예시

버블링 -> 캡처링변환하여 순서대로 출력하기

버블링 -> 캡쳐링으로 변환

 

 

---

타겟이란?

이벤트가 실제 요소에 전달되는 단계

 

---

캡처링 버블링 막는 법

이벤트객체.stopPropapation();

 

 

---

새싹 DT 기업연계형 프론트엔드 실무 프로젝트  6주차 블로그 포스팅