이벤트 처리
특정 화면에서 어떠한 기능을 동작하기 위해선 상황에 맞는 이벤트를 등록해줘야한다. HTML은 각 요소들이 노드를 이루는 트리구조를 가지고 있기때문에 부모가 자식을 감싸는 형태의 노드가 대다수 발생한다. 그렇게되면 특정 요소의 이벤트가 자식에서 발생해야하는지 부모에게서 발생해야 하는지 모호한 경우가 자주 발생하는데 이때 버블링, 캡쳐링, 이벤트 위임과 같은 특성을 안다면 쉽게 처리할 수 있다.
이벤트 버블링
이벤트 발생 시 특정 화면에서의 이벤트가 상위 요소로 전달되어 가는 특성을 의미한다. 브라우저는 특정 화면 요소에서 이벤트가 발생했을 때 부모와 자식이 이벤트를 각각 가지고 있다면 자식의 이벤트가 실행된 후 부모 이벤트가 실행되는 방식으로 최상위 요소까지 이벤트를 전파시킨다.
이벤트 캡쳐링
이벤트 버블링과는 반대로 이벤트가 하위 요소로 전달되어 가는 특성을 의미한다. 일반적인 내용은 아니기 때문에 이벤트 리스너 등록 시 별도의 값(capture : true)을 주어야한다. 위와같이 똑같은 상황에서 브라우저의 특정한 화면 요소에서 이벤트가 발생했을 때 클릭된 요소의 최상위부터 이벤트가 실행되고 이벤트가 발생한 최하위 요소까지 전파시킨다.
event.stopPropagation()
하지만 기본적인 이러한 전파방식때문에 원치않는 이벤트가 발생할 수 있다. 이럴때 전파를 막기위한 stopPropagation API를 javascript에서 제공해준다. 해당 api사용 시 이벤트 버블링은 클릭한 요소의 이벤트만 발생시키고, 캡쳐링은 클릭한 요소의 최상위 요소만 이벤트가 발생하게 된다.
이벤트 위임
위 API를 이용하면 일시적인 전파현상을 막을 순 있지만 다루기 까다롭고 이벤트를 가진 자식이 많이 걸려있을 수 있는데 난감한 상황이 발생할 수 있다. 또한 동적으로 자식을 추가할 경우 기존 자식들이 가지고 있는 이벤트를 동적으로 추가한 자식요소에도 넣어줘야 하는 경우가 발생하는데 이럴때 사용하는 개념이 이벤트 위임이다.
이벤트 위임은 하위 요소에 각각 이벤트를 붙이지 않고 상위 요소에서 하위 요소의 이벤트들을 제어하는 방식으로 자식이 새로 생성되거나 버블링 전파를 막아야하는 경우에 사용하면 좋다.
