[week5_JEONGMIN] 5주차 퀴즈

[qowjdals23]

Q1.

다음 문장의 빈칸을 채우시오.

1. DOM 트리 상에 존재하는 DOM 요소 노드에서 발생한 이벤트는 DOM 트리를 통해 전파된다. 이를 (___) 라고 한다.

2. 다음은 이벤트 전파 단계에 대한 설명이다. 각 단계 이름을 쓰고 순서를 올바르게 나열하시오.
   2.1 () : 이벤트가 이벤트 타깃에 도달
   2.2 () : 이벤트가 하위 요소에서 상위 요소 방향으로 전파
   2.3 (___) : 이벤트가 상위 요소에서 하위 요소 방향으로 전파

A1.

다음 문장의 빈칸을 채우시오.

1. DOM 트리 상에 존재하는 DOM 요소 노드에서 발생한 이벤트는 DOM 트리를 통해 전파된다. 이를 (이벤트 전파) 라고 한다.

2.1 (타깃 단계) : 이벤트가 이벤트 타깃에 도달
2.2 (버블링 단계) : 이벤트가 하위 요소에서 상위 요소 방향으로 전파
2.3 (캡처링 단계) : 이벤트가 상위 요소에서 하위 요소 방향으로 전파

올바른 전파 순서 : 캡처링 단계 -> 타깃 단계 -> 버블링 단계

1. 캡처링 단계: window에서 시작해서 이벤트 타깃 방향으로 전파
2. 타깃 단계: 이벤트가 이벤트 타깃에 도달
3. 버블링 단계: 이벤트 타깃에서 시작해서 다시 상위 방향(window)으로 전파

---

Q2.

다음 문장이 옳으면 O, 틀리면 X를 쓰고 올바르게 고치시오.

1. 이벤트 핸들러 어트리뷰트/프로퍼티 방식으로 등록한 이벤트 핸들러는 캡처링 단계와 버블링 단계의 이벤트만 캐치할 수 있다. (O/X)
2. 이벤트 위임은 여러 개의 하위 DOM 요소에 각각 이벤트 핸들러를 등록하는 대신 하나의 상위 DOM 요소에 이벤트 핸들러를 등록하는 방법을 말한다. (O/X)
3. 이벤트 객체의 preventDefault 메서드는 이벤트 전파를 중지시킨다. (O/X)
4. 이벤트 객체의 stopPropagation 메서드는 DOM 요소의 기본 동작을 중단시킨다. (O/X)

A2.

1. X -> 이벤트 핸들러 어트리뷰트/프로퍼티 방식으로 등록한 이벤트 핸들러는 타깃 단계와 버블링 단계의 이벤트만 캐치할 수 있다.
2. O
3. X -> 이벤트 객체의 preventDefault 메서드는 DOM 요소의 기본 동작을 중단시킨다.
4. X -> 이벤트 객체의 stopPropagation 메서드는 이벤트 전파를 중지시킨다.

---

Q3.

다음 코드를 실행했을 때 어떤 순서로 로그가 출력되는지, 그리고 그 이유를 콜 스택, 태스크 큐, 이벤트 루프, 싱글 스레드 구조 관점에서 단계별로 서술하시오.

function foo() {
  console.log('foo');
}

function bar() {
  console.log('bar');
}

setTimeout(foo, 0); 
bar();

A3.

1. 전역 코드 실행 & setTimeout 호출

   전역 코드가 실행되면서 setTimeout(foo, 0)이 호출된다.
   이때 setTimeout은 foo를 바로 실행하지 않고, 브라우저에 **“나중에 실행할 콜백”**으로 맡긴 뒤 끝난다.
   그래서 foo는 타이머가 끝나면 태스크 큐(task queue) 에 들어갈 예정이다.

2. bar()는 즉시 실행 (콜 스택)

   다음 줄 bar();는 일반 함수 호출이므로 바로 콜 스택(call stack) 에서 실행된다.
   자바스크립트 엔진은 싱글 스레드로 한 번에 하나의 작업만 실행하므로,
   이 시점에 콜 스택에는 bar 실행만 올라와 있고,
   그 결과 콘솔에는 먼저 "bar"가 출력된다.

3. 타이머 만료 → 태스크 큐 → 이벤트 루프

   타이머가 끝나면 콜백 함수 foo가 태스크 큐에 들어가 대기한다.
   이벤트 루프(event loop) 는 콜 스택이 비었는지 계속 확인하다가,
   전역 코드와 bar까지 모두 끝나서 콜 스택이 비면
   태스크 큐에 있던 foo를 콜 스택으로 옮긴다.

4. foo() 실행과 최종 순서

   이제 foo()가 콜 스택에서 실행되면서 나중에 "foo"가 출력된다.

출력 순서

bar
foo