40장: 이벤트

• 이벤트 핸들러 -> 이벤트 발생시 호출되는 함수
• 이벤트 핸들러 등록 -> 브라우저에게 이벤트 핸들러 호출을 위임

이벤트 핸들러 등록 방식

1. 어트리뷰트 방식

• on 접두사로 시작하는 이벤트 타입의 함수를 참조!
• 함수 선언은 평가 결과값이 이벤트 핸들러로 등록되므로 주의
• 이벤트 객체 전달 받을시 첫번째 매개변수는 반드시 event여아 한다. e(X)

2. 프로퍼티 방식

• DOM 노드 객체가 가지고 있는 이벤트 핸들러 프로퍼티로 이벤트 핸들러 등록
• 이벤트 타깃, 이벤트 타입, 이벤트 핸들러 지정
• $button.onclick = () => console.log('button click')

3. addEventListener 방식

• 메서드를 통해 이벤트 핸들러 등록
• 이벤트 타깃.(이벤트타입, 이벤트핸들러, capture 사용여부)

이벤트 객체

• 이벤트 객체는 이벤트 핸들러의 첫번째 인수로 암묵적으로 전달됨

• 이벤트 객체는 생성자 함수로 임의로 만들수도 있음!

• 이벤트 객체는 공통의 프로퍼티

  • type, target, isTrusted, timeStamp 등

마우스 정보 취득

• clientX/clientY는 뷰포트 웹페이지의 가시 영역을 기준으로 마우스 포인터 좌표를 나타냄

이벤트 전파

• DOM 요소 노드에서 발생한 이벤트는 DOM 트리를 통해 전파된다.

  • 캡처링 단계 -> 이벤트가 상위 -> 하위 전달
  • 타깃 단계 -> 이벤트가 이벤트 타깃에 도달
  • 버블링 단계 -> 이벤트가 하위 -> 상위 전달

• 이벤트 어트리뷰트/프로퍼티 -> 타깃, 버블링 이벤트만 캐치 가능

• addEventListener -> 타깃, 버블링, 갭처링 이벤트 모두 개치 가능 - 세번째 인수를 true로!

=> 이벤트는 이벤트를 발생시킨 이벤트 타깃은 물론 상위 DOM 요소에서도 캐치가 가능하다!

• 이벤트 전파가 일어나지 않는 이벤트 객체

  • 포커스 -> focus/blur
  • 리소스 -> load/unload/abort/error
  • 마우스 -> mouseenter/mouseleave

• currnetTarget -> 이벤트가 부착된 부모 요소 위치 반환

• event.target -> 클릭한 자식 요소 반환

• preventDefault 메서드 -> DOM 요소의 기본동작 중단시킴

• stopPropagation 메서드 -> 하위 DOM 요소의 이벤트 처리를 개별적으로 하기 위해 이벤트 전파 중단시킴

41장: 타이머

• 호출 스케줄링

  • 타이머 함수(setTimeout, setInterval)는 생성한 타이머가 종료되면 콜백함수가 실행됨

• JS는 1개의 실행컨텍스트 -> 싱글 쓰레드 -> 타이머 함수 - 비동기 처리방식

setTimeout

• 인수 - 콜백함수, delay(1/1000), 콜백함수 인수
• 타이머 id를 반환 -> clearTimeout로 타이머 취소 가능!
• setInterval 함수는 전달받은 시간마다 콜백함수를 반복적으로 실행!
• 인수는 setTImeou과 같음!

디바운스와 스로틀

• 짧은 시간 연속해서 발생하는 이벤트를 그룹화해서 과도한 이벤트 핸들러 호출을 방지하는 프로그래밍 기법!

타이머 함수의 활용

• 디바운스

  • 특정 시간보다 짧은 이벤트는 처리히지 않다가 나중에 한번에 처리
  • debounce 함수 -> delay 보다 짧으면 타이머 시간을 재설정하여 콜백함수가 실행되지 않게함!
  • 활용 -> resize 이벤트처리, input 입력값 ajax 요청 자동완성 UI 구현, 버튼 중복 클릭 방지 처리 등

• 스로틀

  • 짧은 시간 간격 연속 이벤트를 일정 시간 단위로 이벤트 핸들러가 호출되도록 호출 주기를 만듦
  • scroll 이벤트 처리, 무한 스크롤 UI 구현

42장: 비동기 프로그래밍

동기 처리

• 함수 실행 순서대로 순차적으로 실행
• 함수가 호출된 순서대로 함수 실행 컨텍스트가 실행 컨텍스트 스택에 푸시되기 때문에!
• JS -> 싱글 쓰레드 -> 블로킹 현상(작업중단)발생 할 수 있음

비동기 처리

• 실행 중인 태스크 종료 되기 전에라도 다음 태스크 곧바로 실행
• 블로킹 발생X
• 태스크 실행 순서를 보장하지 않음

이벤트 루프 & 태스크 큐

• JS 엔진

  • 콜 스택 -> 실행컨텍스트 스택
  • 힙 -> 객체 저장된 메모리 공간, 객체를 저장(크기 모름)하기 때문에 -> 구조화X

• 소스코드 평가, 실행 -> JS엔진이 처리

• 그 이외의 것들과 콜백 함수의 평가 실행 -> 브라우저 or Node가 담당

  • 이벤트 루프

    -> 콜 스택이 비어있는지 혹은 태스크 큐에 대기중인 함수 확인 후 비어있다면 실행 컨텍스트를 콜 스택으로 푸시시킴

  • 태스크 큐

    -> 비동기 함수의 콜백 함수 혹은 이벤트 핸들러가 임시로 보관되는 장소(대기장소)

=> JS(싱글)와 브라우저(멀티)가 협력하여 비동기 함수 실행!