반응형
자바스크립트에서는 사용하는 이벤트는 일반적으로 4가지로 분류된다.
mouse events, keyboard events, form events, document/windows events가 있는데,
form events, document/windows events에 대해 알아보자.
이벤트 핸들러 종류이다.
|
Event
|
handler
|
설명
|
|
Form events
|
onFocus | 요소가 포커스를 얻었을 때 |
| onBlur | 요소가 포커스를 잃었을 때 | |
| onChange | input 요소의 값이 바뀌었을 때 | |
| onSubmit | 버튼을 클릭하여 폼 값을 제출할 때 | |
| onReset | 리셋 버튼 클릭할 때 | |
|
Document/Window events
|
onLoad | 웹페이지 로딩이 완료되었을 때 |
| onUnload | 웹페이지를 떠날 때 | |
| onresize | 브라우저 사이즈를 조정할 때 |
Form events
폼 이벤트는 폼이 포커싱을 받거나 받지 않을때, 폼을 수정할 때와 같은 동작에서 이벤트를 발생시키는 것을 말한다.
Focus Event (onfocus)
웹페이지의 요소가 포커스를 얻었을 때 발생하는 이벤트이다.
html에 아래와 같이 추가하고
Focus Me <input type="text" onfocus="highlightInput(this)">
<button type="button">Button</button>.js 에 아래와 같이 추가한다.
function highlightInput(elm) {
elm.style.background = "yellow";
}
인풋박스 클릭하면 노란색으로 포커싱되는 것을 확인할 수 있다.
Document/windows events
Load Event (onload)
페이지 로딩될 때 사용할 수 있는 이벤트
<body onload="window.alert('Page is loaded successfully!');">
이벤트가 뭔지 모르겠다면 아래 포스팅 참고
2021.12.29 - [🎪 놀고있네/Javascript] - [JS] Javascript - Event
[JS] Javascript - Event
자바스크립트에서 이벤트(event)란 사용자가 웹페이지와 상호작용을 하는 모든 동작들을 말한다. 체크박스를 선택하고, 클릭하고, 키값 입력하고, 마우스를 움직이고하는 모든 동작들이 이벤트
miaow-miaow.tistory.com
반응형
'🎪 놀고있네 > Javascript' 카테고리의 다른 글
| [퍼온글] Intellij 에서 JavaScript 프로젝트 생성하기 (0) | 2023.09.18 |
|---|---|
| [JS] Javascript - Event 종류(mouse, keyboard events) (0) | 2021.12.30 |
| [JS] Javascript - Event (0) | 2021.12.29 |
| [JS] Javascript - Data Types (0) | 2021.12.13 |
| [JS] Javascript - Variable 이란 (0) | 2021.12.10 |
댓글