이벤트 버블링
이벤트 버블링은 특정 화면 요소에서 이벤트가 발생했을 때
해당 이벤트가 더 상위의 화면 요소들로 전파 되는 특징임
같은 영역임
1번 버튼 클릭 후 콘솔 창
브라우저는 특정 화면 요소에서 이벤트가 발생했을 때 그 이벤트를 최상위에 있는 화면 요소까지 이벤트를 전파시킵니다.
여기서 주의해야 할 점은 각 태그마다 이벤트가 등록되어 있기 때문에 상위 요소로 이벤트가 전달됨
만약 이벤트가 특정 div 태그에만 달려 있다면 일어 날 이유가 없음
이와 같은 하위에서 상위 요소로의 이벤트 전파 방식을 이벤트 버블링(Event Bubbling)이라고 합니다.
“Trigger clicks all the way up”
예시로
부모 elements와 자식 elements가 겹칠떄 주로 발생하며
<body onclick="alert(`the bubbling doesn't reach here`)">
<button onclick="event.stopPropagation()">Click me</button>
</body>
이렇게 쓰면 stopPropagation없을때 body , button 양쪽 어딜 클릭하든 결과가 같음
둘다 onClink이란 것도 문제임.
보통 우리가 설정하는 (e)=> e.뭐시기 ~~ 와 같은 이벤트 핸들러함수는
이벤트가 발생만하면 캐치 해서 작동 하도록 되있는대
그게 좌라라라락 하고 이벤트 발생 발생! 하고 1개의 이벤트가 감지 되자마자
전파되면서 연달아 실행되는 꼴 클릭이나 휠 같은 특정 이벤트가 겹쳐있는 elements 의 이벤트를 동시에 촉발해서 발생하는 일로
될수있으면 피하는게 좋고, 꼭 겹칠수밖에없이 짠다면 eventObject.stopPropagation()을 겹치고 싶지않은 이벤트에 넣어 영역을 분리 시켜주는게 좋다.
이벤트 캡쳐는 이벤트 버블링과 반대 방향으로 진행되는 이벤트 전파 방식임
이벤트 델리 게이션 (진행중)
상위 dom노드에다가 특정 조건을 걸어 이벤트 버블링이나 캡쳐링이 발생하지 않도록
제어 해주는 패턴인대, 예시 구현중
빠르고 정확해야 혈압이 안오른다