JavaScript HTML 이벤트 예제

JavaScript를 통해 이벤트에 반응하는 예제.

입력 이벤트

onblur - 사용자가 입력 필드을 떠날 때
onchange - 사용자가 입력 필드의 내용을 변경할 때
onchange - 사용자가 드롭다운 값을 선택할 때
onfocus - 입력 필드가 포커스를 받을 때
onselect - 입력 텍스트가 선택될 때
onsubmit - 사용자가 제출 버튼을 클릭할 때
onreset - 사용자가 재설정 버튼을 클릭할 때
onkeydown - 사용자가 키를 누르거나 누르고 있을 때
onkeypress - 사용자가 키를 누르거나 누르고 있을 때
onkeyup - 사용자가 키를 떼어낼 때
onkeyup - 사용자가 키를 떼어낼 때
onkeydown 대 onkeyup - 둘 다

마우스 이벤트

마우스 오버/아웃 - 요소에 마우스가 지나갈 때
onmousedown/onmouseup - 마우스 버튼을 누르고 떼는 때
onmousedown - 마우스를 누를 때: 클릭한 요소를 표시
onmousedown - 마우스를 클릭할 때: 클릭한 버튼을 표시
onmousemove/onmouseout - 마우스 포인터를 div에 대입/대출할 때
onmouseover/onmouseout - 마우스 포인터를 이미지에 대입/대출할 때
onmouseover - 이미지 맵에 마우스를 올릴 때

클릭 이벤트

onclick 이벤트에 대한 반응
onclick - 버튼을 클릭할 때
ondblclick - 텍스트를 더블 클릭할 때

로드 이벤트

onload - 페이지가 로드된 후
onload - 이미지가 로드된 후
onerror - 이미지가 로드될 때 오류가 발생
onunload - 문서가 닫혔을 때
onresize - 브라우저 창 크기가 조정될 때

기타

키의 키코드는 무엇인가?
커서 좌표는 무엇인가?
화면에 대한 커서 좌표는 무엇인가?
Shift 키가 눌러져 있는가?
어떤 이벤트 유형이 발생하였는가?

예제 설명