기록
학원 day58. 폼요소, 이벤트 버블링, 이벤트 실습
devcorn3
2022. 11. 25. 12:55
<html>
<head>
<meta charset="UTF-8">
<title>폼요소의 활성화/비활성화, 읽기전용여부 조회/변경하기</title>
</head>
<body>
<h1>폼요소의 활성화/비활성화, 읽기전용여부 조회/변경하기</h1>
<form>
<div>
<label>입력필드 : </label>
<input type="text" name="username" readonly="readonly"/>
</div>
<div>
<label>입력필드 : </label>
<input type="checkbox" name="skill" value="java">자바
<input type="checkbox" name="skill" value="python">파이썬
</div>
<div>
<label>입력필드 : </label>
<select name="city">
<option value=""> 선택하세요</option>
<option value="서울"> 서울</option>
<option value="부산"> 부산</option>
<option value="대구"> 대구</option>
<option value="인천"> 인천</option>
<option value="광주"> 광주</option>
</select>
</div>
<div>
<button id="btn-register">등록</button>
</div>
</form>
<div>
<button id="btn-1" onclick="disabledField();">입력필드 비활성화 하기</button>
<button id="btn-2" onclick="enabledField();">입력필드 활성화 하기</button>
<button id="btn-3" onclick="readonlyField();">입력필드 읽기전용으로 변경하기</button>
<button id="btn-4" onclick="editableField();">입력필드 편집기능 변경하기</button>
</div>
<script type="text/javascript">
var el1 = document.querySelector("[name=username]");
var el2 = document.querySelectorAll("[name=skill]")[0];
var el3 = document.querySelectorAll("[name=skill]")[1];
var el4 = document.querySelector("[name=city]");
var el5 = document.querySelector("#btn-register");
function disabledField() {
el1.disabled = true; // disabled는 서버로 제출 안됨
el2.disabled = true;
el3.disabled = true;
el4.disabled = true;
el5.disabled = true;
}
function enabledField() {
el1.disabled = false;
el2.disabled = false;
el3.disabled = false;
el4.disabled = false;
el5.disabled = false;
}
function readonlyField() {
el1.readOnly = true; // 읽기전용은 사용자가 직접 값을 입력하는 요소에만 적용된다.
el2.readOnly = true; // 체크박스, 읽기전용 지정이 의미가 없다.
el3.readOnly = true; // 체크박스, 읽기전용 지정이 의미가 없다.
el4.readOnly = true; // 셀렉트박스(콤보박스), 읽기전용 지정이 의미가 없다.
el5.readOnly = true; // 버튼, 읽기전용 지정이 의미가 없다.
}
function enabledField() {
el1.disabled = false;
}
</script>
</body>
</html>
** readonly는 엘리먼트 객체 안에는 O를 대문자로 적고, 설정할 때는 소문자로 적는다.
- 읽기 전용은 값 수정이 안되지만 서버로 제출은 된다.
- 비활성화는 값 수정도 안되고 서버로 제출도 안된다.
- 모든 폼 요소는 비활성화, 활성화가 가능하다.
- 읽기 전용은 사용자가 직접 값을 입력하는 요소에서만 적용되기 때문에,
체크박스, 라디오버튼, 셀렉터박스에 읽기전용 설정은 의미가 없다.
<html>
<head>
<meta charset="UTF-8">
<title>폼 이벤트</title>
</head>
<body>
<h1>폼 이벤트</h1>
<form method="post" action="login.jsp" onreset="return false;" onsubmit="return checkLoginform();">
<div>
<label>사용자명</label>
<input type="text" name="username" />
</div>
<div>
<label>비밀번호</label>
<input type="password" name="userpwd" />
</div>
<button type="reset">취소</button>
<button type="submit">로그인</button> <!-- type="button"이면 submit 이벤트가 발생하지 않는다. -->
</form>
<script type="text/javascript">
function checkloginform() { // 제출여부를 결정할 수 있다.
var el1 = document.querySelector("[name=username]");
var el2 = document.querySelector("[name=userpwd]");
if (el.value === "") {
alert("사용자명은 필수입력값입니다.");
return false;
}
if (el2.value === "") {
alert("비밀번호는 필수입력값이다.");
return false;
}
return true;
}
</script>
</body>
</html>폼 이벤트
onsubmit 이벤트
- submit 버튼을 클릭하면, <form />태그에서 onsubmit 이벤트가 발생한다.
- onsubmit 이벤트에 대한 브라우저의 기본동작은 폼 입력값을 서버로 제출하는 것이다.
- onsubmit처럼 기본동작이 정해져 있는 것은 return true/false를 작성해서 서버로 제출할건지 작성할 수 있다.
onsubmit 이벤트의 활용
- 폼 입력값을 체크해서, 폼 입력값이 유효한 경우에만 서버로 제출되게 한다.
* <button>버튼</button>, <button type="submit">버튼</button>, <input type="submit" value="버튼" /> 이 버튼들을 클릭하면 <form />태그에서 onsubmit 이벤트가 발생한다.
* <button type="button">버튼</button>을 클릭하면 <form />태그에서 onsubmit 이벤트가 발생하지 않는다.
onreset 이벤트
- reset 버튼을 클릭하면, <form />태그에서 onreset 이벤트가 발생한다.
- onreset 이벤트에 대한 브라우저의 기본동작은 폼 입력값을 원래 값으로 리셋하는 것이다.
이벤트 버블링
<html>
<head>
<meta charset="UTF-8">
<title>링크의 클릭이벤트</title>
</head>
<body>
<h1>링크의 클릭이벤트</h1>
<div>
<img src="../resources/images/sample.jpg" width="300" height="450" id="image-gallary">
</div>
<div>
<a href="../resources/images/sample.jpg" onclick="return changeImage(event);"><img src="../resources/images/sample.jpg" width="50" height="75"/></a>
<a href="../resources/images/sample2.jpg" onclick="return changeImage(event);"><img src="../resources/images/sample2.jpg" width="50" height="75"/></a>
</div>
<script type="text/javascript">
function changeImage(event){
// 엘리먼트에서 특정 이벤트가 발생했을 때 기본 동작이 실행되는 것을 막는다.
// event.preventDefault();
// event.target은 지금 이벤트가 발생한 그 엘리먼트를 제공한다.
// 1. 위의 소스에는 img를 클릭했을 때 onclick 이벤트가 발생한다.
// 2. img 태그에서 발생한 onclick 이벤트가 a 태그로 전파된다.
// 3. a 태그에 onclick 이벤트 발생시 실행할 changeImage(event) 함수가 등록되어 있으므로 changeImage(event) 함수를 실행한다.
// 4. changeImage(event) 함수 실행 시 event객체가 전달된다. (event.target으로 조회되는 엘리먼트는 img다.)
var el = event.target; // el에는 img 엘리먼트 객체가 대입된다.
var image = el.getAttribute("src");
var gallary = document.getElementById("image-gallary");
gallary.setAttribute("src", image);
return false;
}
</script>
</body>
</html>
preventDefault() :
해당 엘리먼트에 특정 이벤트 발생시 실행할 기본동작이 지정되어 있는 경우 그 동작의 실행을 취소시킨다.
<form> 태그 안에서 button, submit 버튼 클릭 시 폼이 전송되는 것
<a> 태그 클릭시 지정된 링크로 이동하는 것
이벤트 버블링 중지시키기
stopPropagation() : 이벤트 버블링을 중지시킨다.
stopImmediatePropagation() : 이벤트 버블링을 중지시킨다. (중복 방지)
<html>
<head>
<meta charset="UTF-8">
<title>이벤트 버블링</title>
<style>
div, p {padding: 30px; border: 1px solid black; }
</style>
</head>
<body>
<h1>이벤트 버블링</h1>
<div id="outter-box" onclick="handler4(event)">
<div id="inner-box" onkeyup="handler3(event)">
<p onclick="handler2(event)">
<img src="../resources/images/sample.jpg" width="40" height="100">
</p>
</div>
</div>
<script type="text/javascript">
var el = document.querySelector("img");
el.addEventListener('click', handler1_1);
el.addEventListener('click', handler1_2);
el.addEventListener('click', handler1_3);
function handler1_1(event) {
// 이벤트 버블링을 차단시킨다.
event.stopImmediatePropagation(); // 중복된 이벤트가 있을 경우 한번만 실행되게 함.
console.log("handler11111 실행됨");
console.log("handler1111 -> ", event.target)
}
function handler1_2(event) {
// 이벤트 버블링을 차단시킨다.
event.stopImmediatePropagation();
console.log("handler11111 실행됨");
console.log("handler1111 -> ", event.target)
}
function handler1_3(event) {
// 이벤트 버블링을 차단시킨다.
event.stopImmediatePropagation();
console.log("handler11111 실행됨");
console.log("handler1111 -> ", event.target)
}
function handler2(event) {
console.log("handler2222 실행됨");
console.log("handler2222 -> ", event.target)
}
function handler3(event) {
console.log("handler3333 실행됨");
console.log("handler3333 -> ", event.target)
}
function handler4(event) {
console.log("handler4444 실행됨");
console.log("handler4444 -> ", event.target)
}
</script>
</body>
</html>
<div id="error-message-box" class="alert alert-danger d-none">
<strong>입력값 누락</strong> <span id="message-box"></span>
</div>
<form class="bg-light border p-3" method="post" action="login.jsp" onsubmit="return checkLoginForm();">
<div class="mb-3">
<label class="form-label">아이디</label>
<input type="text" class="form-control" name="id" />
</div>
<div class="mb-3">
<label class="form-label">비밀번호</label>
<input type="password" class="form-control" name="password" />
</div>
<div class="text-end">
<a href="form.jsp" class="btn btn-secondary">회원가입</a>
<button type="submit" class="btn btn-primary">로그인</button>
</div>
</form>
</div>
<script type="text/javascript">
function checkLoginForm() {
var idField = document.querySelector("[name=id]");
var passwordField = document.querySelector("[name=password]");
var errorMessageBox = document.querySelector("#error-message-box");
var messageBox = document.querySelector("#message-box");
if (idField.value === "") {
errorMessageBox.classList.remove("d-none");
messageBox.textContent = "아이디는 필수입력값입니다.";
idField.focus();
return false;
}
if (passwordField.value === "") {
errorMessageBox.classList.remove("d-none");
messageBox.textContent = "비밀번호는 필수입력값입니다."
passwordField.focus();
return false;
}
return true;
}
</script>