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