자바스크립트 이벤트 중 Focus와 Form과 관련된 이벤트들이다. 이벤트를 보고 아래 코드를 보며 어떤 작용을 할지 생각해보면 좋을 것 같다.
Focus & Form Event
focus : 요소가 포커스를 얻었을 때
blur: 요소가 포커스를 잃었을 때
input : 값이 변경되었을 때
change : 상태가 변경되었을 때
submit : 제출 버튼을 선택했을 때
reset : 리셋 버튼을 선택했을 때
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
form {
padding: 10px;
border: 4px solid transparent;
flex-wrap: wrap;
gap: 6px;
}
form.active {
border-color: skyblue;
}
</style>
</head>
<body>
<form>
<input type="text" placeholder="ID">
<br>
<input type="password" placeholder="PW">
<br>
<input type="submit" value="제출">
<input type="reset" value="초기화">
</form>
<script>
// Focus & Form Events
// focus : 요소가 포커스를 얻었을 때
// blur: 요소가 포커스를 잃었을 때
// input : 값이 변경되었을 때
// change : 상태가 변경되었을 때
// submit : 제출 버튼을 선택했을 때
// reset : 리셋 버튼을 선택했을 때
const formEl = document.querySelector('form');
const inputEls = document.querySelectorAll('input');
inputEls.forEach(el=>{
el.addEventListener('focus',()=>{
formEl.classList.add('active');
});
el.addEventListener('blur',()=>{
formEl.classList.remove('active');
});
el.addEventListener('input',event=>{
console.log(event.target.value);
});
})
formEl.addEventListener('submit',event=>{
event.preventDefault();
const data= {
id: event.target[0].value,
pw: event.target[1].value
}
console.log('제출!', data);
});
formEl.addEventListener('reset',()=>{
console.log('리셋!');
});
</script>
</body>
</html>'JAVASCRIPT' 카테고리의 다른 글
| [JavaScript] 얕은 복사와 깊은 복사 (0) | 2023.04.27 |
|---|---|
| [JavaScript] 불변성과 가변성 (0) | 2023.04.27 |
| [JavaScript] 이벤트 - Keyboard Event (0) | 2023.04.24 |
| [JavaScript] 이벤트 - Mouse Event (0) | 2023.04.24 |
| [JavaScript] 이벤트 - 이벤트 위임, 커스텀 이벤트 (0) | 2023.04.23 |
자바스크립트 이벤트 중 Focus와 Form과 관련된 이벤트들이다. 이벤트를 보고 아래 코드를 보며 어떤 작용을 할지 생각해보면 좋을 것 같다.
Focus & Form Event
focus : 요소가 포커스를 얻었을 때
blur: 요소가 포커스를 잃었을 때
input : 값이 변경되었을 때
change : 상태가 변경되었을 때
submit : 제출 버튼을 선택했을 때
reset : 리셋 버튼을 선택했을 때
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
form {
padding: 10px;
border: 4px solid transparent;
flex-wrap: wrap;
gap: 6px;
}
form.active {
border-color: skyblue;
}
</style>
</head>
<body>
<form>
<input type="text" placeholder="ID">
<br>
<input type="password" placeholder="PW">
<br>
<input type="submit" value="제출">
<input type="reset" value="초기화">
</form>
<script>
// Focus & Form Events
// focus : 요소가 포커스를 얻었을 때
// blur: 요소가 포커스를 잃었을 때
// input : 값이 변경되었을 때
// change : 상태가 변경되었을 때
// submit : 제출 버튼을 선택했을 때
// reset : 리셋 버튼을 선택했을 때
const formEl = document.querySelector('form');
const inputEls = document.querySelectorAll('input');
inputEls.forEach(el=>{
el.addEventListener('focus',()=>{
formEl.classList.add('active');
});
el.addEventListener('blur',()=>{
formEl.classList.remove('active');
});
el.addEventListener('input',event=>{
console.log(event.target.value);
});
})
formEl.addEventListener('submit',event=>{
event.preventDefault();
const data= {
id: event.target[0].value,
pw: event.target[1].value
}
console.log('제출!', data);
});
formEl.addEventListener('reset',()=>{
console.log('리셋!');
});
</script>
</body>
</html>'JAVASCRIPT' 카테고리의 다른 글
| [JavaScript] 얕은 복사와 깊은 복사 (0) | 2023.04.27 |
|---|---|
| [JavaScript] 불변성과 가변성 (0) | 2023.04.27 |
| [JavaScript] 이벤트 - Keyboard Event (0) | 2023.04.24 |
| [JavaScript] 이벤트 - Mouse Event (0) | 2023.04.24 |
| [JavaScript] 이벤트 - 이벤트 위임, 커스텀 이벤트 (0) | 2023.04.23 |
