이벤트 (루프, 전파, 위임)

Event loop (이벤트 루프)
keyword: call stack, Event Queue (task queue), task
브라우저는 단일 쓰레드에서 이벤트 드리븐 방식으로 동작한다. 하지만, 실제로 웹 어플리케이션은 많은 task가 동시에 처리되는 것처럼 느껴진다. 자바스크립트의 동시성 (Concurrency)을 지원하는 것이 이벤트 루프이다. call stack내에서 현재 실행중인 task가 있는지, Event Queue에 task가 있는지 반복하여 확인한다. call stack이 비어있다면 Event Queue 내의 task가 call stack으로 이동하고 실행된다.

Event Propagation (이벤트 전파)
keyword: Event Bubbling, Event Capturing
계층적 구조에 포함되어 있는 HTML 요소에 이벤트가 발생할 경우 연쇄적 반응이 일어난다. 전파 방향에 따라 버블링과 캡쳐링으로 구분 할 수 있다. 버블링과 캡쳐링은 둘 중에 하나만 발생하는 것이 아니다. 캡쳐링부터 시작하여 버블링으로 종료 한다. 이벤트가 발생했을 때 캡쳐링과 버블링은 순차적으로 발생한다.

Event Delegation (이벤트 위임)
다수의 자식 요소에 각각 이벤트 핸들러를 바인딩 하는 대신 하나의 부모 요소에 이벤트 핸들러를 바인딩하는 방법이다. 이벤트 흐름에 의해 이벤트를 발생시킨 요소의 부모요소에도 영향을 미치기 때문에 위임이 가능한 것이다.

Quiz
카드 영역에 클릭 이벤트를 걸면 체크박스가 카드영역 내부라서 더블클릭이 되어버린다. 체크박스 밖의 카드 영역을 누를땐 정상 작동하는데, 정작 체크박스를 누르면 체크박스+카드영역 클릭으로 더블클릭 됨. 어떻게 해결해야 할까? (정답 링크 https://codesandbox.io/s/trusting-wildflower-dins7?file=/src/index.js)

그 외 용어
Event Handler : 특정 요소에서 발생하는 이벤트를 처리 하기 위해서는 이벤트 핸들러 함수를 작성해 연결
Call Stack (호출 스택) : 요청 된 작업은 순차적으로 call stack에 쌓이게 되고 순차적으로 실행된다. (ex/ foo(), bar())
Event Queue (Task Queue) : 비동기 처리 함수의 콜백 함수, 비동기식 이벤트 핸들러, Timer 의 콜백함수가 보관되는 영역. 이벤트 루프에 의해 특정 시점(call stack이 비어졌을때)에 순차적으로 call stack으로 이동되어 실행 된다.
Evnet Bubbling : 자식 요소에서 발생한 이벤트가 부모요소로 전파되는 것.
Event Capturing : (자식 요소에서 발생한 이벤트가) 부모요소부터 시작하여 이벤트를 발생시킨 자식 요소까지 도달하는 것.