학원 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

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

인기포스트

ABOUT ME

개발 일기 개발 일기

이벤트 버블링

'기록' 카테고리의 다른 글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역

인기포스트

ABOUT ME

이벤트 버블링

'기록' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역