728x90
반응형
이벤트(Event)는 어떤 사건을 의미한다.
브라우저에서의 이벤트란 예를 들어 사용자가 버튼을 클릭했을 때 혹은 웹 페이지가 로드되었을 때와 같은 것인데 이는 DOM 요소와 관련이 있다. 이벤트가 발생하면 그에 맞는 반응을 해야 한다. 이를 위해 이벤트는 일반적으로 함수에 연결되는데, 해당 함수는 이벤트가 발생하기 전까지는 실행되지 않다가 이벤트 발생 시 비로소 실행된다. 이 함수를 이벤트 핸들러라 하며 이벤트에 대응하는 처리를 기술한다.
자바스크립트 이벤트의 종류
UI Event
Event | Description |
load | 웹 페이지나 스크립트의 로드가 완료되엇을 때 |
unload | 웹 페이지가 언로드될 때(주로 새로운 페이지를 요청한 경우) |
error | 브라우저가 자바스크립트 오류를 만났거나 요청한 자원이 존재하지 않는 경우 |
resize | 브라우저 창의 크기를 조절했을 때 |
scroll | 사용자가 페이지를 위아래로 스크롤할 때 |
select | 텍스트를 선택했을 때 |
Keyboard Event
Event | Description |
keydown | 키를 누르고 있을 때 |
keyup | 누르고 있던 키를 뗄 때 |
keypress | 키를 누르고 뗐을 때 |
keyCode | 키 코드 값. 참고: https://blog.lael.be/post/75 |
Mouse Event
Event | Description |
click | 마우스로 클릭했을 때 |
dbclick | 마우스로 더블 클릭했을 때 |
mousedown | 마우스 버튼을 누르고 있을 때 |
mouseup | 누르고 있던 마우스 버튼을 뗄 때 |
mosemove | 마우스를 움직일 때(터치 스크린에서는 동작하지 않음) |
mouseover | 마우스를 요소 위로 움직였을 때(터치 스크린에서는 동작하지 않음) |
mouseout | 마우스를 요소 밖으로 움직였을 때(터치 스크린에서는 동작하지 않음) |
mouserenter | 해당 요소에 마우스 커서를 올려다 놓았을 때 |
mouseleave | 해당 요소에 마우스 커서를 빼낼 때 |
Focus Event
Event | Description |
foucs / focusin | 요소가 포커스를 얻었을 때 |
blur / fousout | 요소가 포커스를 잃었을 때 |
Form Event
Event | Description |
input | <input> 또는 <textarea> 요소의 값이 변경되었을 때 contentedtable attribute를 가진 요소의 값이 변경되엇을 때 |
change | select box, checkbox, radio button의 상태가 변경되었을 때 |
submit | <form>을 submit할 때(버튼 또는 키) |
reset | reset 버튼을 클릭할 때(최근에는 사용하지 않음) |
Clipboard Event
Event | Description |
cut | 콘텐츠를 잘라내기할 때 |
copy | 콘텐츠를 복사할 때 |
paste | 콘텐츠를 붙여넣기할 때 |
728x90
반응형
'Javascript > Javascript' 카테고리의 다른 글
[Javascript] Event 객체 (0) | 2024.10.18 |
---|---|
[Javascript] 이벤트 핸들러와 this (0) | 2024.10.16 |
[Javascript] Array 함수 (0) | 2024.10.10 |
[Javascript] Object 객체 함수 (0) | 2024.10.08 |
[Javascript] for ... in (0) | 2024.09.30 |