-
학원 day58. 폼요소, 이벤트 버블링, 이벤트 실습기록 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>
'기록' 카테고리의 다른 글
학원 day60. 부트스트랩, Jquery (0) 2022.11.29 학원 day59. 검색기능 (0) 2022.11.28 학원 day57. DOM, BOM (0) 2022.11.24 학원 day56. JavaScript 객체, 함수, 이벤트 (0) 2022.11.23 학원 day55. 자바스크립트 (0) 2022.11.22