JS Quiz 29-32. 객체 / 동기-비동기 / event.target / capturing-bubbling

29. What's the output?

const a = {};
const b = { key: 'b' };
const c = { key: 'c' };

a[b] = 123;
a[c] = 456;

console.log(a[b]);

정답 B // 다시 공부 필요

 

24-04-10

어떻게 정답이 나오는지 모르겠다.

아...직도 객체는... 어렵구나. 객... 체 하겠네

---

30. What's the output?

const foo = () => console.log('First');
const bar = () => setTimeout(() => console.log('Second'));
const baz = () => console.log('Third');

bar();
foo();
baz();

정답 B // 동기 - 비동기에 대해 아는지에 대한 문제

 

bar 함수는 비동기이므로, 동기함수들이 먼저 실행된 후에 동작한다.

마이크로 스택에 대한 설명으로 하고 싶은데, 아직 지식이 부족하다.

공부한 후에, 다시 서술하자!

2024-04-10

---

31. What is the event.target when clicking the button?

<div onclick="console.log('first div')">
  <div onclick="console.log('second div')">
    <button onclick="console.log('button')">
      Click!
    </button>
  </div>
</div>

정답 C // event.target에 대해 아는지에 대한 문제

 

event.target은 클릭된 요소를 말한다.

 

 

---

32. When you click the paragraph, what's the logged output?

<div onclick="console.log('div')">
  <p onclick="console.log('p')">
    Click here!
  </p>
</div>

정답 A // 이벤트 캡처링과 버블링에 대해 아는지 묻는 문제

 

31번 문제와 이벤트 흐름에 대한 문제

캡처링 -> target -> 버블링으로 일어난다. 캡처링의 경로를 알고 싶다면, 속성을 true로 설정해줘야 한다. 기본적으로는 버블링에 대한 추적만 일어난다.

참고 링크

https://young-taek.tistory.com/221

[5주차] 버블링 / 캡처링 / 위임 / HTTP 메서드