Part 18. JS 이벤트 시스템의 이해

사용자와 상호작용하는 GUI 응용 프로그램은 사용자에게
선택할 수 있는 복수의 인터페이스를 제공합니다.

사용자가 어떤 인터페이스를 어떤 시간에 작동시킬지
예상할 수 없기에 사용자가 작동한 인터렉션에 반응할 메커니즘이 필요합니다.

사용자에 의해 특정 UI 요소에 사건이 발생하는데, 이를 이벤트라고 합니다.
발생한 이벤트는 차례대로 이벤트 큐라는 공간에 저장됩니다.

 

이벤트 발생을 시간순으로 나타내었습니다(예시) :

 

 

애플리케이션은 어떤 요소에 어떤 이벤트가 발생했을 경우
통지를 받겠다는 의사를 이벤트 시스템에 알리는데 

이를 '이벤트 핸들러 등록'이라 합니다.

이 모델은 마치 신문의 구독자 모델과 유사하다고 볼 수 있습니다.
신문사는 구독자들의 구독 유무와 상관없이 신문을 발행합니다. - 이벤트 발생
구독자는 특정 신문이 발행되면 매번 신문을 받겠다고 구독을 합니다.
그리고 신문이 발행될 때, 신문이 배달되는 모델을 생각하면 됩니다.

이런 모델을 일반적으로 Publish & Subscription 모델이라 합니다.

 

 

요소별 이벤트 구독의 예시를 나타낸 JS 코드입니다 :

 

HTML 코드입니다 :

 

CSS 코드입니다 :

 

 

해당 예시의 UI 입니다 :

 

 

 

 

 

이벤트 구독

이벤트 시스템은 간단합니다. 
모든 이벤트는 단일 큐에 저장되며 구독자에게 발생한 순서대로 전달됩니다.
따라서 이벤트 핸들러의 동작 순서는 이벤트의 발생 순서대로 진행됩니다.

 

이벤트 큐의 예시를 나타낸 코드입니다 :

결과 node 값입니다 :

 

 

DOM이 발생하는 이벤트를 DOM Event라 합니다.
DOM이 발생시키는 이벤트를 구독하기 위해 addEventListener가 제공됩니다.
인자는 세가지이고 각각 '이벤트 이름', '이벤트 핸들러', '캡쳐링 플래그'입니다.

이벤트를 구독하는 방식은 두 가지가 존재합니다.
모든 DOM 요소가 이벤트 구독을 지원하며 많은 DOM 요소가 자식 요소를 가집니다.
이는 부모의 이벤트를 구독해 자식 요소의 이벤트까지 구독할 수 있다는 것을 의미합니다.

따라서 구독하는 방식은 개별 요소로 구독하거나 부모의 이벤트에서 

실제 이벤트가 발생한 요소를  추정하는 방식을 사용하거나 선택할 수 있습니다.

이벤트가 발생할 때 핸들러 함수에게 전달되는 
event 객체는 이벤트와 관련된 많은 정보를 담고 있습니다.
이 정보들을 이용해 필요한 기능을 작성할 수 있습니다.

 

이벤트 구독 방식의 예시를 나타낸 JS 코드입니다 :

 

HTML 코드입니다 :

 

CSS 코드입니다 :

 

저장을 눌렀을 때 나타는 console 값입니다 :

 

다른 이름으로 저장을 눌렀을 때 나타나는 console 값입니다 :

 

 

 

 

이벤트의 전파

중첩된 요소에서의 이벤트는 캡쳐되거나 버블링 됩니다.
캡처링은 이벤트가 발생한 노드를 감싼 바깥쪽부터 이벤트가 발생하며(캡처)
해당 노드까지 순차적으로 전달되는 것을 말합니다.

버블링은 캡처링과 반대로 이벤트가 발생한 노드에서 
먼저 이벤트가 발생하고 이후 중첩된 부모 요소로 이벤트가 전파되는 것을 말한다.

 

캡쳐링과 버블링의 예시를 나타낸 JS코드입니다 :

 

HTML 코드입니다 :

 

CSS 코드입니다 :

 

 

 

 

1. 가장 안쪽의 노란색 박스를 클릭했을 때

 

 

해당 TARGET은 yellow이며 yellow-blue = 버블링이고
yellow-red 또한 버블링입니다.

 

 

2. 중간의 파란색 박스를 클릭했을 때

 

 

TARGET은 blue이며 blue-red는 버블링을 나타냅니다.

 

 

3. 가장자리의 빨간색 박스를 클릭했을 때

 

 

TARGET은 red이며 버블링 되는 것은 없습니다.

 

 

 

 

참고자료

{ Code } Playground