본문 바로가기
Language/JavaScript

[JS] event handler 사용법

by 그랴 2022. 8. 4.

갑자기 event handler 사용법을 적는 이유는... 내가 맨날 헷갈려서 쓸 때마다 찾아보기 때문...

 

이벤트(event)란 무엇인가?

웹 브라우저나 사용자가 행하는 어떤 동작이다.

하지만 브라우저 안에서 이루어지는 모든 동작이 모두 이벤트가 되지는 않는다.

웹 문서 영역 안에서 이루어지는 동작만을 말한다.

속성 설명
click 마우스로 눌렀을 때
dblclick 마우스로 두 번 눌렀을 때
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 폼이 제출되었을 때

 

이벤트 처리기(event handler)는?

웹 문서에서 이벤트가 발생했을 때 어떤 함수를 실행해야 할지 웹 브라우저에 알려줘야 한다.

이 때 이벤트와 이벤트 처리 함수를 연결해 주는 것을 이벤트 처리기라고 한다.

사용법 : on + 이벤트 이름 ex) onclick

 

 

사용법은 다양하지만... 가장 간단하게 사용하는 방법으로는

1. html 요소 태그 내에 on+이벤트 이름 적고 함수 연결 시키기

2. js파일에 함수 만들기

 

아니면 여러 이벤트를 처리할 때는

queryselector로 요소를 받아서 이벤트핸들러를 걸면 된다.

'Language > JavaScript' 카테고리의 다른 글

객체 지향 프로그래밍 OOP  (0) 2022.08.04
[JS] 객체 object  (0) 2022.08.04
브라우저 환경의 자바스크립트  (0) 2022.07.13
JS 복습 심화  (0) 2022.07.13
[JS 비동기] HTTP, Ajax, 동기/비동기 통신  (0) 2022.07.01