반응형
프로젝트를 수행하다보면 이벤트가 전파되어 예상치 못한 이슈를 발생시키는 경우가 있는데 처음 이 문제가 발생했을 때는 이벤트 전파에 대해 알고 있지 못해 원인을 찾기가 어려웠다. 하지만 이벤트 전파에 대해 알고 난 이후에는 어떠한 문제가 발생했을 때, 요소들이 어떻게 동작하고 있는지를 파악해 이 때문에 발생한 문제구나라는 것을 금방 알아챌 수 있었다.
1. 이벤트 전파
어떠한 요소에서 발생한 이벤트는 부모 또는 자식에게 전파되게 되는데 이때, 전파되는 방향에 따라 이벤트 버블링과 캡처링으로 구분한다.
1) 이벤트 버블링
이벤트 버블링(Bubbling)은 이벤트가 발생한 요소로부터 상위요소로 순차적으로 이벤트가 전파되는 방식이다.
2) 이벤트 캡처링
이벤트 캡처링(Capturing)은 이벤트가 발생한 요소로부터 하위요소에게 순차적으로 이벤트가 전파되는 방식이다.
3) 이벤트 전파를 막는 3가지 방법
이벤트 전파를 막는 방법에는 대표적인 3가지 방법이 있는데 각각의 차이는 이렇다.
1. 현재 이벤트의 default 동작을 중단시키는 방법
event.preventDefault(); // 현재 이벤트의 default 동작을 중단
2. 현재 이벤트가 전파되는 것을 중단(즉, bubbling 또는 capturing 막기)
event.stopPropagation(); // 현재 이벤트가 전파되는 것을 중단(즉, bubbling 또는 capturing 막기)3. 현재 이벤트가 전파되는 것을 막고 같은 레벨에 걸린 다른 이벤트도 작동하지 않는다.
event.stopImmediatePropagation(); // 현재 이벤트가 전파되는 것을 막고 같은 레벨에 걸린 다른 이벤트도 작동하지 않는다.
2. 이벤트 위임
이벤트 위임은 버블링과 캡처링을 이용한 것으로 여러 요소에 각각의 이벤트 핸들러를 할당하지 않고, 공통된 부모에 이벤트 핸들러를 할당하여 이벤트를 관리하는 방법이다.
각각의 요소에 이벤트를 발생시켜 사용할 수도 있지만 이처럼 이벤트 위임을 적절하게 활용해 공통 부모요소에서 이벤트를 할당하는 방법도 있는 것이다.
반응형
