자주 사용되는 유용한 DOM 이벤트

• 마우스 이벤트
  • click: 요소 위에서 마우스 왼쪽 버튼을 눌렀을 때
  • contextmenu: 요소 위에서 마우스 오른쪽 버튼을 눌렀을 때
  • mouseover/mouseout: 마우스 커서를 요소 위로 움직였을 때/요소 밖으로 움직였을 때
  • mousedown/mouseup: 요소 위에서 마우스 왼쪽 버튼을 누르고 있을 때/버튼을 뗄 때
  • mousemove: 마우스를 움직일 때
• 폼 요소 이벤트
  • submit: 사용자가 <form>을 제출할 때
  • focus: 사용자가 <input>과 같은 요소에 포커스할 때
• 키보드 이벤트
  • keydown/keyup: 사용자가 키보드 버튼을 누르거나 뗄 때
• 문서 이벤트
  • DOMContentLoaded: HTML이 전부 로드 및 처리되어 DOM 생성이 완료되었을 때 발생
• CSS 이벤트
  • transitioned: CSS 애니메이션이 종료되었을 때

이벤트 핸들러

이벤트에 반응하려면 이벤트가 발생했을 때 실행되는 함수인 핸들러를 할당해야 한다.

핸들러는 사용자의 행동에 어떻게 반응할지를 자바스크립트 코드로 표현한 것이다.

다음은 핸들러를 어떤 방법으로 할당할 수 있을지를 알아본다.

HTML 속성에서 핸들러 할당하기

HTML 안의 on<event> 속성에 핸들러를 할당할 수 있다.

<input value="클릭해 주세요." *onclick="alert('클릭!')"* type="button">

속성값 전체가 큰 따옴표로 둘러싸여 있기 때문에 속성값 내부에서는 작은 따옴표를 쓰는 것에 유의한다.

긴 코드를 HTML 속성값으로 사용하는 것은 추천하지 않는다. 만약 코드가 길다면 함수를 만들어서 이를 호출하는 방법을 사용하는 것을 추천한다.

DOM 프로퍼티를 이용해서 핸들러 할당하기

DOM 프로퍼티 on<event>를 사용해도 핸들러를 할당할 수 있다.