이벤트버블링

이벤트 버블링 자세한 내용

https://ko.javascript.info/bubbling-and-capturing

버블링과 캡처링

onChange 는 Form 태그에 걸려있다.

위 사진은 동작은 classname 이 SearchInput__input 에서 입력을 했을 때 경우고

이번 사진은 급하게 만들어본 아무것도 없는 순수 input 태그이다.

 

두 콘솔의 차이는 path 속성과 target 부분이다.

 

path 는 마치 스코프를 타고타고 전역까지 가는 모습이고

target 는 현재 target 즉 currentTarget 을 보여주는 것 같다.

 

왜 이런 차이가 발생했을까

이벤트 버블링은 최하위 이벤트가 일어난 속성부터 부모까지 이벤트를 전달전달전달 하는 것을 이야기하는데

 

아래 사진 4번째 줄에서 event.target 은 실제 이벤트가 시작 된 타깃이 요소라고 되어있다. 버블링이 진행되어도 타겟은 이벤트가 일어난 타겟을 바라보고 있다는 이야기이다.

 

마지막 줄에도 똑같이 설명되어있다.

그럼 막을 방법이 없을까

버블링을 막는 방법은 아래와 같다.

특별한 이유없이는 버블링을 막지말라고 주의사항도 있기 때문에 캡쳐링은 잘 안쓰이는 것 같다.