Event loop

JS -> script language, single thread language

asynchronous function
-> async, promise, setTimeOut ...

JS -> node.js -> v8 engine(-> c++, multi threading ok)

promise .than = async await

sync func 모두 수행하고 나서 async 수행한다.

callback queue

: microtask queue + regulartask queue

microtask - promise, async 같이 우리가 만든것
regulartask - setTimeOut 처럼 기존에 있는것?

우선순위

: micro > regular

horse game 복습

HTML DOM tree

static element

Capturing & Bubbling

내가 어떤 요소를 클릭했나 알아보는 법

: 가장 상위 요소를 불러와서 그 요소부터 아래로 내려가며 자식요소들을 참조(접근)한다.

최상위 요소를 불러올 때만 처음부터 탐색한다.
나머지는 불러온 최상위요소부터 현재 요소까지 탐색한다.

const grandparent = document.querySelector(".grandparent");
// 클래스명이 grandparent인 요소를 찾는다.

const parent = grandparent.children[0];
const child = parent.children[0];

grandparent.addEventListener("click", (event) => {
  if (event.target) {
    console.log("hi")
  }
}, true);

Capturing

클릭한 순간 DOM 최상위부터 현재까지 찾아들어가는 것

Bubbling

현재부터 상위 요소로 올라가는 것.

위의 eventListener 에서 기본은 false 다.
false: bubbling 될 때 실행된다. (grandparent -> parent -> child)
true: capturing 될 때 실행된다. (child -> parent -> grandparent)

=> true가 먼저 실행되고 false가 실행된다.

capturing down, bubbling up