이벤트 버블링과 버블링 중단하기

모달창을 구현하는 도중에 모달의 백그라운드에 연결된 클릭 이벤트가 백그라운드 내부에 있는 모달 컨테이너를 클릭했을 때는 발생하지 않도록, 핸들러를 비활성화 시키는 방법에 대해서 검색을 해보았다.
전에 한번 만들었던 기억이 있는데 너무 오래되어서 키워드를 이것저것 검색해보다가 적절한 키워드를 찾을 수 있었다 그건 바로 이벤트 버블링!

참고 링크: https://ko.javascript.info/bubbling-and-capturing

<Styled.BackGround onClick={handleModal}> ->없애고 싶은 핸들러
	<Styled.ModalContainer> -> 버블링을 없애고 싶은 요소
    	
        	<p>삭제하시겠습니까?<p>
            <span onClick={handleModal}>취소</span>
            <span onClick={handle~}>확인</span>
    </Styled.ModalContainer>
</Styled.BackGround >

핸들러는 span -> ModalContainer -> BackGround 의 순서로 실행된다. 이벤트 버블링은 타깃 이벤트에서 시작해서 요소를 거쳐 document 객체를 만날 때까지 각 노드에서 모두 발생한다. 몇몇 이벤트는 window 객체까지 거슬러 올라가기도 한다. 이 때도 모든 핸들러가 호출된다.

• 버블링(bubbling)의 원리:
  한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작합니다. 가장 최상단의 조상 요소를 만날 때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작합니다.
  

핸들러에게 이벤트를 완전히 처리하고 난 후 버블링을 중단하도록 명령할 수도 있는데 이때 이벤트 객체의 메서드인 event.stopPropagation()를 사용하면 된다!

<Styled.BackGround  onClick={handleModal}>
	<Styled.ModalContainer  onClick={(e)=>{e.stopPropagation()}}>
    	
        	<p>삭제하시겠습니까?<p>
            <span onClick={handleModal}>취소</span>
            <span onClick={handle~}>확인</span>
    </Styled.ModalContainer>
</Styled.BackGround >

• 메서드의 특징

1. event.stopPropagation()은 한 요소의 특정 이벤트를 처리하는 핸들러가 여러개인 상황에서, 핸들러 중 하나가 버블링을 멈추더라도 나머지 핸들러는 여전히 동작한다.

2. event.stopPropagation()은 위쪽으로 일어나는 버블링은 막아주지만, 다른 핸들러들이 동작하는 건 막지 못한다.

3. 버블링을 멈추고, 요소에 할당된 다른 핸들러의 동작도 막으려면 event.stopImmediatePropagation()을 사용해야 한다. 이 메서드를 사용하면 요소에 할당된 특정 이벤트를 처리하는 핸들러 모두가 동작하지 않는다.