자바스크립트 이벤트 버블링, 델리게이션

dion·2020년 3월 6일
1

자바스크립트

목록 보기
1/1

참고

이벤트 버블링이란?

브라우저가 이벤트를 감지하는 방식 중 하나입니다.

특정 화면 요소에서 이벤트가 발생했을 때 해당 이벤트가 더 상위의 화면 요소들로 전달되어 가는 특성을 의미합니다.

브라우저는 특정 화면 요소에서 이벤트가 발생했을 때 그 이벤트를 최상위에 있는 화면 요소까지 이벤트를 전파시킵니다.

이와 같은 하위에서 상위 요소로의 이벤트 전파 방식을 이벤트 버블링(Event Bubbling)이라고 합니다.

반대개념: 이벤트 캡쳐(Event Capture)

[event].stopPropagation()

해당 이벤트가 전파되는 것을 막습니다.

이벤트 델리게이션(위임)이란?

하위 요소에 각각 이벤트를 붙이지 않고, 상위 요소에서 하위 요소의 이벤트를 제어하는 방식입니다.

많은 요소를 모니터링해야 할 때, 오버헤드가 훨씬 낮아질 수 있습니다. (1000개의 요소에 이벤트를 거는 것 보다는, 1개 상위요소에 이벤트 버블링을 주는 것이 좋습니다.)

profile
더 나은 나를 위해 노력하는 개발자입니다. @Code-Squad

8개의 댓글

comment-user-thumbnail
2020년 3월 8일

오오 자바스크립트에도 델리게이션이라는게 있군요!

1개의 답글
comment-user-thumbnail
2020년 3월 9일

자바스크립트 어려워요

1개의 답글
comment-user-thumbnail
2020년 3월 9일

덕분에 좋은 지식을 얻어갑니닷

1개의 답글