[자바스크립트 js] 이벤트 버블링 Event Bubbling

안녕하세요.

디자인도 하고, 개발도 하는 '디발자 뚝딱'입니다.

 

이번 포스팅에서는 '이벤트 버블링'에 대해 배워볼 건데요.

자바스크립트로 개발을 할 때 항상 '버블링'에 대해 유의하며 개발을 해야 됩니다.

 

그렇다면 버블링이 뭘까요?

아래애 짧게 요약해뒀습니다.

 

  이벤트 버블링

• 이벤트는 전파가 된다.
  어떤 요소에서 이벤트가 발생하면 해당 요소에 등록된 이벤트 핸들러가 동작하는 것뿐만 아니라
  부모요소로 이벤트가 계속해서 전파되면서 각 요소에도 등록된 이벤트 핸들러가 있다면 차례로 이벤트 핸들러가 동작한다.
• 자식 요소에서 부모 요소로 이벤트가 전파되는 것을 이벤트 버블링(Event Bubbling:물이 바다에서 올라오는 모습)이라고 한다.
• 이벤트 버블링을 웬만하면 막지 않아야 하고, 이벤트 버블링은 e.stopPropagation(); 메소드를 사용하여 막을 수 있다.