Event Bubbling, Event Capture

Javascript event 전달 방식

이벤트 전달 방식은 크게 두가지로 구분된다.

 

Event Bubbling 이라고 불리는 방식과 Event Capture.

 

오늘은 이 내용에 대해 기록하려고 한다.

 

 

Event란?

Javascript 에서 정말 많이 사용되는 click 등 사용자의 입력을 받을 수 있는 기능이다.

 

<button id='btn'> click </button>

<script>
var button = document.getElementById('btn')

// 클릭이벤트를 설정하는 것은 다양하지만..

button.addEventListener('click', clickMe);

function clickMe(){
    console.log('click !! ');
}

</script>

 

이렇게 설정하면 button을 클릭 하였을때 click 이벤트가 발생하고 clickMe 함수가 실행된다.

 

Event Bubbling

Event Bubbling은 하위 요소에서 상위요소로 이벤트가 전달 된다.

 

<div id='test01'>
    <div id='test02'>
        <div id='test03'>
        </div>
    </div>
</div>

위 형태로 태그가 구성되어 있다면 test03을 눌렀을 때 test03 -> test02 -> test01 형태로 발생된 이벤트가 전달된다.

 

 

Event Capture

Event Capture는 상위에서 하위요소로 이벤트가 전달된다. ( Event Bubbling과 반대 )

 

기본적으로 Event Bubbling이 기본이기 때문에 capture : false 가 디폴트고, Event Capture 방식으로 사용하려면 아래와 같이 설정해 주어야 한다.

button.addEventListener('click', clickMe, {
    capture : true
});

 

event.stopPropagation()

Event Bubbling 이나 Capture를 발생 시키지 않으려면 위와같은 설정을 해주면 된다.

 

button.addEventListener('click', clickMe);

function clickMe(event){
    event.stopPropagation();
    console.log('click !! ');
}

 

이런식으로 사용하면 Event가 발생한 요소에서만 처리되며, Event Bubbling, Capture가 발생하지 않는다.

 

이론 공부.. 즉 개념공부를 좀 더 해야겠다... 

느낀점이 아주 많아...ㅠ