-
[JavaScript] 이벤트와 이벤트 처리기Web/Javascript 2021. 3. 9. 19:34
이벤트(Event) 란 웹 브라우저나 사용자가 행하는 어떤 동작을 말합니다. 웹 문서에서 키보드의 키를 누르는 것, 브라우저가 웹 페이지를 로드하는 것이 이에 속합니다.
-
마우스 이벤트
속성
설명
click
사용자가 HTML 요소를 마우스로 눌렀을 때 이벤트가 발생합니다.
dbclick
사용자가 HTML 요소를 마우스로 두 번 눌렀을 때 이벤트가 발생합니다.
mousedown
사용자가 요소 위에서 마우스 버튼을 누르는 동안 이벤트가 발생합니다.
mousemove
사용자가 요소 위에서 마우스 포인터를 움직일 때 이벤트가 발생합니다.
mouseover
마우스 포인터가 요소 위로 옮겨질 때 이벤트가 발생합니다. mouseout
마우스 포인터가 요소를 벗어날 때 이벤트가 발생합니다.
mouseup
사용자가 누르고 있던 마우스 버튼에서 손을 뗄 떄 이벤트가 발생합니다.
-
키보드 이벤트
속성
설명
keypress
사용자가 키를 눌렀을 때 이벤트가 발생합니다.
keydown
사용자가 키를 누르는 동안 이벤트가 발생합니다.
keyup
사용자가 키에서 손을 뗄 때 이벤트가 발생합니다.
-
문서 로딩 이벤트
속성
설명
abort
웹 문서가 완전히 로딩되기 전에 불러오기를 멈췄을 때 이벤트가 발생합니다.
error
문서가 정확히 로딩되지 않았을 때 이벤트가 발생합니다.
load
문서 로딩이 끝나면 이벤트가 발생합니다.
resize 문서 화면 크기가 바뀌었을 때 이벤트가 발생합니다.
scroll
문서 화면이 스크롤되었을 떄 이벤트가 발생합니다.
unload
문서를 벗어날 때 이벤트가 발생합니다.
-
폼 이벤트
속성
설명
blur
폼 요소에 포커스를 잃었을 때 이벤트가 발생합니다.
change
목록이나 체크 상태 등이 변경되었을 때 이벤트가 발생합니다(<input>, <select>, <textarea> 태그에서 사용)
focus
폼 요소에 포커스가 놓였을 때 이벤트가 발생합니다(<label>, <select>, <textarea>, <button> 태그에서 사용)
reset
폼이 다시 시작되었을 때 이벤트가 발생합니다.
submit
submit 버튼을 눌렀을 때 이벤트가 발생합니다.
더 많은 이벤트 목록
https://developer.mozilla.org/en-US/docs/Web/Events
웹 문서에서 이벤트가 발생했을 때, 어떤 함수를 실행해야 할지 웹 브라우저에 알려 주는 것을 '이벤트 처리기' 또는 '이벤트 핸들러' 라고 합니다.
이벤트 처리기는 이벤트 이름 앞에 on을 붙여서 사용합니다. (ex: click 이벤트가 발생했을 때, 이벤트 처리기는 onclick 다음에 있는 실행 명령이나 함수를 연결)
'Web > Javascript' 카테고리의 다른 글
[Javascript] Array 객체 (0) 2021.03.14 [JavaScript] Date 객체 (0) 2021.03.10 [JS] 자바스크립트의 자료형 (0) 2021.03.07 [jQuery] Slick slider 에서 customPaging 을 이미지로 설정하기 (0) 2020.08.13 [React] Input 다루기, ES 6 클래스 (0) 2020.06.10 -