✅ 이벤트버블링
클릭을 하면 자식을 감싸고 있는 부모도 클릭이 된다. 자식과 부모의 이벤트가 둘 다 발생하여, 이벤트가 전파(propagation)된다고 한다.
전파가 뽀글뽀글 위로 올라간다하여 이벤트 버블링
event.taget.id(선택한 아이) 선택한 아이의 값을 가져오지만, 상위 부모의 onClick이 실행되어 부모의 값을 못가져오는 현상이다.
✌️ 해결 방법으로는 자식에 id에도 다 넣어주기 (비효율)
✌️ 클릭이벤트가 실행된 타겟(currentTarget) 가져오기
✌️ stop propagation
=> event.stopPropagation() 전파가 중단된다.
✅ 이벤트 캡처링
이벤트 캡처링 버블링의 반대로 부모에서 자식으로 내려가는 현상이다. (따로 옵션을 줘야 만들 수 있음)
✌️ capture: true라는 속성을 따로 주면 된다.
✌️ 리액트에서는 onClickCapture라는 속성이 따로 있다.
잘 쓰이지는 않지만 해당 내용을 알고 있으면 나중에 요긴하게 쓰일 것이다.
로건의 개발이야기