DeepDive JS - 11일차 // 37,40,42장

37장 Set과 Map

Set 사용처 

중복제거 -> 배열로 변환 

has 메서드 있는지 파악 

 

Map 사용처

다양한 키(객체 포함 모든 값) - 값 저장 필요로 할때 
has 메서드 있는지 파악

 

 

 

 

40장 이벤트 

이벤트 드리븐 프로그래밍

이벤트 핸들러 : 이벤트가 발생했을 때 호출될 함수
이벤트 핸들러 등록 : 이벤트 핸들러의 호출을 위임하는 것

 

이벤트 타입

마우스 이벤트: click, dblclick, mousedown, mouseup, mousemove, mouseenter, mouseleave

키보드 이벤트 :keydown, keypress, keyup

포커스 이벤트 : focus, blur

폼 이벤트: submit, reset

값 변경 이벤트 : input, change

DOM 뮤테이션 이벤트 : DOMContentLoaded

뷰 이벤트 : resize, scroll

리소스 이벤트 : load, error, abort​

 

이벤트 핸들러 등록

 

이벤트 핸들러 어트리뷰트 방식

<button onclick="alert('클릭됨')">Click me</button>

-> 이 방식 권장 X , HTML과 자바스크립트는 관심사가 다르므로 혼재보단 분리하는 것이 좋다고함

 

이벤트 핸들러 프로퍼티 방식

const btn = document.querySelector('button');

btn.onclick = () => alert('클릭됨');

 

addEventListener 메서드 방식

btn.addEventListener('click', () => alert('클릭됨'));

단, addEventListener 메서드를 통해 참조가 동일한 이벤트 핸들러를 중복 등록하면 하나의 이벤트 핸들러만 등록

이 메서드를 권장. 제거시에도 편함.

위의 프로퍼티 방식은 핸들러 프로퍼티에 null을 할당해야 제거가 됨.

 

이벤트 핸들러 제거

removeEventListener 

이벤트 핸들러를 제거하려면 이벤트 핸들러의 참조를 변수나 자료구조에 저장해야함.

 

이벤트 객체

이벤트 발생 시 다양한 정보를 담고 있는 이벤트 객체 동적 생성, 이벤트 핸들러의 첫 번째 인수로 전달

btn.addEventListener('click', (event) => {

console.log(event.type); // click

console.log(event.target); // 클릭된 요소

});

event.clientX, event.clientY 등 좌표 정보 포함​

프로토타입 체인이 있음

 

이벤트 전파(버블링 & 캡처링)

버블링(하위 -> 상위 요소 전파)

캡처링(상위-> 하위 요소 전파)

event.stopPropagation()으로 이벤트 전파 중단​ //

event.prevetDefault( ) DOM요소의 기본 동작을 중단

 

이벤트 위임

이벤트를 부모 요소에 등록하여 효율적인 핸들링 가능

 

기본 동작 방지

event.preventDefault()로 기본 동작 차단

 

this의 값

addEventListener 사용 시 this는 이벤트를 바인딩한 요소

btn.addEventListener("click", function() {
    console.log(this); // 클릭된 버튼 요소 (btn)
});

화살표 함수 사용 시 this는 상위 스코프 유지​

 

커스텀 이벤트

이벤트 생성자 함수를 호출하여 명시적으로 생성한 이벤트 객체는 임의적 이벤트 타입을 지정 할 수 있다.
이처럼 개발자의 의도로 생성된 이벤트를 커스텀 이벤트라 한다

생성된 커스텀 이벤트 객체는 버블링되지 않으염, preventDefault 메서드로 취소할 수도 없음
bubbles, cancelable 프로퍼티 값이 false 기본설정.

 

생성된 커스텀 이벤트 dispatchEvent 메서드로 디스패치(이벤트를 발생시키는 행위) 할 수 있음.

 

 

 

 

42장 비동기 프로그래밍
자바스크립트 엔진은 싱글스레드 방식(동기) 블로킹(작업중단) + 브라우저 멀티스레드(비동기)
|스택 |   <-이벤트루프 ->  |  테스크큐 |