[TIL] 2022.05.11

Minsu Han·2022년 5월 11일
0

TODAY I LEARNED

목록 보기
45/46

오늘 한 일

  • 모던 자바스크립트 Deep Dive
  1. 이벤트

배운 것

  • 이벤트 핸들러: 이벤트가 발생했을 때 호출할 함수
  • 이벤트 핸들러 등록: 이벤트가 발생하면 브라우저에게 이벤트 핸들러의 호출을 위임한다
  • 다양한 이벤트 타입(마우스, 포커스, 키보드, 폼, 뷰 등등)
  • 이벤트 핸들러 등록방법
    • 이벤트 핸들러 어트리뷰트에 할당
    • 이벤트 핸들러 프로퍼티 방식 (onXXX)
    • addEventListener 방식
  • 이벤트 발생 시 이벤트에 관련한 다양한 정보를 담고 있는 이벤트 객체가 동적으로 생성되며 브라우저에 의해 이벤트 핸들러의 첫 번째 인수로 전달된다
  • 이벤트 객체들은 공통 프로퍼티와 고유 프로퍼티를 갖는다
  • 이벤트 전파(event propagation)
    • DOM 요소인 이벤트 target을 중심으로 DOM 트리를 통해 전파됨
    • 이벤트는 이벤트를 발생시킨 이벤트 타깃은 물론 상위 DOM 요소에서도 캐치할 수 있다
    • 캡처링: 상위 요소 -> 하위 요소
    • 타깃: 이벤트가 이벤트 타깃에 도달
    • 버블링: 하위 요소 -> 상위 요소
  • 이벤트 위임(event delegation)
    • 여러 개의 DOM 요소에 각각 이벤트 핸들러를 등록하는 대신 하나의 상위 DOM 요소에 이벤트 핸들러를 등록하는 것
  • stopPropagation: 이벤트 전파를 중지시켜 하위 DOM 요소의 이벤트를 개별적으로 처리함
  • 이벤트 핸들러 방식별 내부 this
  • 이벤트 핸들러에 인수 전달 방법
  • 커스텀 이벤트 생성 및 발생(dispatch) 방법
profile
기록하기

0개의 댓글