갑자기 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 |