[이벤트버블링,이벤트캡쳐 쉽게 알려줄게요] event.stopPropagation

예제 html 코드

 

<form onclick="alert('form')">FORM

    <div onclick="alert('div')">DIV

         <p onclick="alert('p')">P</p>

    </div>

</form>

 

========================================================

 

이벤트 버블링이란?

 

엘리먼트에서 이벤트가 감지 되었을 때, 해당 엘리먼트를 포함하고 있는 부모 엘리먼트를 통하여 최상위 까지 이벤트가 전달되는 것

 

쉽게 말해서 해당 태그부터 ~ 상위태그 -> window 순서로 이벤트가 전달

 

ex) 예제코드에서 <P>클릭시

P → div → form → ….. →window 순으로 alert

 

*참고사항

해당 경우는 태그마다 이벤트가 등록되어 있기 때문에 상위 요소로 이벤트가 전달되는 것을 확인할 수 있음,

단순히 이벤트가없는 태그라면 확인할수 없음

 

 

========================================================

 

이벤트 캡쳐링(이벤트캡쳐)

 

이벤트 캡쳐는 이벤트 버블링과 반대 방향으로 진행되는 이벤트 전달 방식

 

 window부터 최초 이벤트가 발생한 자식 요소로 내려가는 과정

 

ex) 예제코드에서 <P>클릭시

Window → … → form → div → p 순으로 alert

 

 

========================================================

 

 

캡쳐링 사용방법(capture:true)

- 사용빈도가 적음

 

target.addEventListener("click", function(){}, true);

 

ex) div.addEventListener('click', logEvent, {

                     capture: true // default 값은 false입니다.

           });

logEvent : 어떤 함수

 

 

 

========================================================

 

 

이벤트전파 막기, 캡쳐링 버블링을 원치 않는다면?

 

event.stopPropagation()

 

ex)

    $("body").on('click', 'input', function(e) { 
            e.stopPropagation(); 
    });

 

========================================================

 

 

 

해당 글이 이해가 어려울 수도 있지만, 단순하고 쉽게 생각하길 바랍니다.

 

 

" 자바스크립트는 이벤트의 전달이 발생하고,

 

  캡쳐와 버블링은 그 전달 순서가 반대된다. "