LucyYoo/JS-deep-dive-study

[40장] 이벤트

Opened this issue · 4 comments

자바스크립트 딥 다이브 퀴즈

[40장] 이벤트

아래 마크다운을 복사하여 코멘트로 퀴즈를 남겨주세요!

Q1. 퀴즈 설명
퀴즈 내용 서술...

<details>
	<summary>정답</summary>
	<div markdown="1">    
	정답 설명
	</div>
</details>

Q1.이벤트 전파는 이벤트 객체가 전파되는 방향에 따라서 3단계로 구분되는데, 해당하는 3단계와 각 단계에 대한 간단한 설명을 써주세요!

정답
캡처링 단계: 이벤트가 상위 요소에서 하위 요소 방향으로 전파

타깃 단계: 이벤트가 이벤트 타깃에 도달
버블링 단계: 이벤트가 하위 요소에서 상위 요소 방향으로 전파

SDWoo commented

Q1. 이벤트 위임을 사용하는 이유와 어떻게 사용되는지 쓰세요

정답
같은 이벤트를 갖는 공통된 자식들에게 모든 이벤트 리스너를 등록하는 것은 비효율적이기 때문에, 이벤트 버블링과 캡처링을 활용해, 같은 이벤트를 갖는 공통된 자식들에게 모두 이벤트 리스너를 전달하지 않고, 최상위 엘리먼트에만 이벤트 리스너를 등록하여 사용한다.

Q1. DOM 요소의 기본 동작을 조작하는 방법에 대해 말해주세요!

정답
이벤트 객체의 preventDefault 메서드를 통해 DOM 요소의 기본 동작을 중단시킬 수 있다. (ex. a 태그의 링크 이동 방지)
이벤트 객체의 stopPropagation 메서드를 통해 이벤트 전파를 중지시킬 수 있다.

Q1. 이벤트 핸들러 프로퍼티 방식과 addEventListener 메서드 방식의 주요 차이점을 말씀해주세요.

정답 다음 중 한 가지
1. 이벤트 헨들러 프로퍼티 방식은 이벤트 헨들러 프로퍼티에 이벤트 헨들러를 바인딩, addEventListener는 이벤트 헨들러를 인수로 전달
2. 이벤트 헨들러 프로퍼티 방식은 하나의 이벤트에 하나의 이벤트 헨들러만 바인딩 되지만, addEventListener는 등록된 순서대로 하나 이상의 이벤트 헨들러 등록 가능