본문 바로가기

개발/Web Front-End

이벤트 버블링

이벤트 버블링
기포가 밑에서 부터 위에서 가듯, 이벤트가 발생한 요소부터 최상단 요소 (보통 document객체 몇몇은 window객체 까지도) 까지 전달되는 동작을 말합니다.

거의 모든 이벤트가 버블링 되며, focus() 등 몇몇 이벤트는 버블링 되지 않습니다.

이벤트 버블링시, event.currentTarget(this) 는 핸들러가 발생한곳( 즉 이벤트를 넣은태그)이 감지됨.
event.target은 실제 클릭한 태그가 감지됨.

event.stopPropagation으로 버블링 중단가능하다
이를 어떤 태그에 적으면 그 태그 부모들은 더이상 이벤트를 전달 받지 못한다. 허나, onclick에 이 핸들러를 적으면 onclick에 대해서만 중단하고 그 외 keypress 등 다른 핸들러가 겹쳐있을 경우엔 이는 중단되지 않는다. 그럴 때 stopImmediatePropagation()을 사용하면 할당 된 모든 이벤트 핸들러가 적용되지 않습니다.



'개발 > Web Front-End' 카테고리의 다른 글

[클린코드 자바스크립트] 배열 및 객체  (0) 2022.08.31
Executive Context  (0) 2022.08.28
브라우저 렌더링 프로세스 - 1  (0) 2022.08.07
mvc 도전기  (0) 2022.08.04
[Web front-end] script 위치와 defer async  (0) 2022.07.24