December 1, 2021

이벤트(event) 는 무언가 일어났다는 신호입니다. 모든 DOM 노드는 이런 신호를 만들어 냅니다. 참고로, 이벤트는 DOM에만 한정되진 않습니다.

자주 사용되는 유용한 DOM 이벤트는 무엇이 있는지 잠시 살펴봅시다.

마우스 이벤트:

• click – 요소 위에서 마우스 왼쪽 버튼을 눌렀을 때(터치스크린이 있는 장치에선 탭 했을 때) 발생합니다.
• contextmenu – 요소 위에서 마우스 오른쪽 버튼을 눌렀을 때 발생합니다.
• mouseover와 mouseout – 마우스 커서를 요소 위로 움직였을 때, 커서가 요소 밖으로 움직였을 때 발생합니다.
• mousedown과 mouseup – 요소 위에서 마우스 왼쪽 버튼을 누르고 있을 때, 마우스 버튼을 뗄 때 발생합니다.
• mousemove – 마우스를 움직일 때 발생합니다.

폼 요소 이벤트:

• submit – 사용자가 <form>을 제출할 때 발생합니다.
• focus – 사용자가 <input>과 같은 요소에 포커스 할 때 발생합니다.

키보드 이벤트:

• keydown과 keyup – 사용자가 키보드 버튼을 누르거나 뗄 때 발생합니다.

문서 이벤트:

• DOMContentLoaded – HTML이 전부 로드 및 처리되어 DOM 생성이 완료되었을 때 발생합니다.

CSS 이벤트:

• transitionend – CSS 애니메이션이 종료되었을 때 발생합니다.

이 외에도 다양한 이벤트가 있는데, 몇몇 이벤트는 다음 챕터에서 자세히 다룰 예정입니다.