Javascript는 배우면 배울수록 많은 것이 객체로 이루어졌다는 것을 알게된다. 이번에는 이벤트에 대해 배웠는데, 이벤트가 발생하면 이벤트 객체가 발생한다는 것도, 이 이벤트 객체가 이동하며 다양한 위치에서 이벤트를 발생시킨다는 것도 알게 됐다. 그리하여 알 것 같으면서도 은근히 헷갈리는 이벤트 객체의 이동과 이벤트 전파, 이벤트 위임에 대해 정리해봤다.
이벤트 객체
Javascript에서는 이벤트가 발생하면 이벤트에 관련한 다양한 정보를 담고 있는 이벤트 객체가 동적으로 생성된다. 생성된 이벤트 객체는 이벤트 핸들러의 첫 번째 인수로 전달된다. 이벤트 객체를 전달 받으려면 이벤트 핸들러를 정의할 때 이벤트 객체를 전달받을 매개변수를 명시적으로 선언해야 한다.
단, 이벤트 핸들러 어트리뷰트 방식의 경우 이벤트 객체를 전달 받으려면 이벤트 핸들러의 첫 번째 매개변수 이름을 반드시 event로 해야 한다.
이벤트 객체는 생성되면 window 객체부터 시작하여 타킷 요소 노드까지 이동하는데 이때 이벤트 전파가 발생한다.
이벤트 전파
이벤트가 발생함에 따라 생성된 이벤트 객체는 이벤트를 발생시킨 DOM 요소인 이벤트 타깃을 중심으로 DOM 트리를 통해 전파된다.
이벤트 전파는 이벤트 객체가 전파되는 방향에 따라 3단계로 구분된다.
- 캡처링 단계 : 이벤트가 상위 요소에서 하위 요소 방향으로 전파
- 타깃 단계 : 이벤트가 이벤트 타깃에 도달
- 버블링 단계 : 이벤트가 하위 요소에서 상위 요소 방향으로 전파
순서는 위에 작성된대로 캡처링 -> 타킷 -> 버블링 순서로 진행된다.
이벤트 핸들러 어트리뷰트/프로퍼티 방식으로 등록한 이벤트 핸들러는 타깃 단계와 버블링 단계의 이벤트만 캐치할 수 있다. 하지만 addEventListener 메소드 방식으로 등록한 이벤트 핸들러는 타깃 단계와 버블링 단계뿐만 아니라 캡처링 단계의 이벤트도 선별적으로 캐치 할 수 있다.
이벤트 위임
위에서 살펴보았듯 javascript에서는 이벤트가 발생하면 이벤트 객체가 생성되고, 생성된 이벤트 객체가 이동하며 이벤트 전파가 발생한다. 이러한 이벤트 전파를 활용하여 이벤트 위임을 줄 수 있다.
이벤트 위임은 여러 개의 하위 DOM 요소에 각각 이벤트 핸들러를 등록하는 대신 하나의 상위 DOM 요소에 이벤트 핸들러를 등록하는 방법을 말한다. 이벤트는 이벤트 타깃은 물론 상위 DOM 요소에서도 캐치 할 수 있기 때문이다.
이를 활용하여 내비게이션 바를 만들 때, 아이템이 일일이 이벤트를 주는 것이 아니라 아이템을 감싸고 있는 부모에게 이벤트 핸들러를 등록하여 한번의 등록 만으로 모든 아이템에게 동일한 이벤트를 발생하게 할 수 있다.
stopPropagation메서드를 사용하면 이벤트 버블링을 막을 수 있다. 단, 이 메서드는 이벤트 버블링을 원치 않을 경우 사용 할 수 있지만, ECMA에서는 권장하지는 않는다.
