수업내용/Javascript & jQuery

[2022.11.25.금] 자바스크립트3 - 이벤트

주니어주니 2022. 11. 25. 14:12

 

 

Event 객체

프로퍼티

프로퍼티명 설명
target 이벤트가 발생된 엘리먼트객체를 반환한다.
type 발생된 이벤트이름을 반환한다.
dataTransfer drag & drop에서 값을 전달하기 위한 객체를 반환한다.
pageX, pageY 마우스의 현재 좌표를 반환한다.
which 입력한 문자의 아스키코드값을 반환한다.

 

 

Method

메소드명 설명
preventDefault() 해당 엘리먼트에 특정 이벤트 발생시 실행할 기본동작이 지정되어 있는 경우 그 동작의 실행을 취소시킨다.
<form> 태그 안에서 button, submit 버튼 클릭시 폼이 전송되는 것 <a> 태그 클릭시 지정된 링크로 이동하는 것
stopPropagation() 이벤트 버블링을 중지시킨다.
stopImmediatePropagation() 이벤트 버블링을 중지시킨다.

 

 

 

1. 폼이벤트

 

  • onsubmit 이벤트
    • submit 버튼을 클릭하면, <form />태그에서 onsubmit 이벤트 발생 => form태그에 onsubmit을 적어야함
    • onsubmit 이벤트에 대한 브라우저의 기본동작은 폼 입력값을 서버로 제출하는 것
    • onsubmit 이벤트의 활용
      - 폼 입력값을 체크해서, 폼 입력값이 유효한 경우에만 서버로 제출되게 한다.

    • * 제출 안되는 버튼
      <button type="button">버튼</button>
      버튼의 타입을 "버튼"으로 하면 제출이 안됨. 

    • * 제출 버튼
      <button>버튼</button>
      <button type="submit">버튼</button>
      <input type="submit" value="버튼" />
      이 버튼들은 클릭하면 <form />태그에서 onsubmit 이벤트가 발생한다. 

  • onreset 이벤트
    • reset 버튼을 클릭하면, <form />태그에서 onreset 이벤트가 발생한다.
    • onreset 이벤트에 대한 브라우저의 기본동작은 폼 입력값을 원래 값으로 리셋하는 것

 

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>폼 이벤트</title>
</head>
<body>
	<h1>폼 이벤트</h1>
	<form method="post" action="login.jsp" onreset="return true" 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>
	</form>
	
	<script type="text/javascript">
		function checkLoginform(){
			var el1 = document.querySelector("[name=username]");
			var el2 = document.querySelector("[name=userpwd]");
			
			if(el1.value === ""){
				alert("사용자명은 필수입력값입니다.");
				return false;
			}
			if(el2.value === ""){
				alert("비밀번호는 필수입력값입니다.");
				return false;
			}
			
			return true;
		}
	</script>
</body>
</html>

 

 

 

 

 

 

 

2. 이벤트 버블링

: 엘리먼트에서 이벤트가 발생하면 상위 엘리먼트로 이벤트가 전파되는 것 

 

 

(그림) 

 

  • 제일 안쪽에서 onclick 이벤트가 발생 -> 이벤트가 상위로 전파
    결국 img 태그를 클릭하면
    handler1() -> handler2() -> handler5()가 실행됨
  • 이벤트가 발생한 곳은 img 니까 
    handler1, 2, 5에서 event.target을 조회하면 전부 img가 나옴

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<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" onclick="handler3(event)">
         <p onclick="handler2(event)">
            <img src="../resources/images/sample.jpg" width="40" height="100" onclick="handler1(event);">
         </p>
      </div>
   </div>
   
   <script type="text/javascript">
      function handler1(event) {
         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>

 

 

 

 

 

* 이벤트가 발생한 곳은 inner-box 니까 -> inner-box의 이벤트 소스 실행, 

   inner-box와 outter-box의 onclick이벤트 실행

 

 

 

 

 

==> 전파가 안되게 막아야 함

function handler1 () {

      event.stopPropagation();

}

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<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" onclick="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.stopPropagation();	// 전파는 안되고, 같은 이벤트 반복은 됨
    	  
         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.stopPropagation();
    	  
         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>

 

 

 

* 이벤트 발생시 기본동작이 실행되지 않게 하기 (2가지) 

 

  • onsubmit 이벤트
    : <form /> 태그에서 onsubmit 이벤트가 발생하면 폼 입력값을 서버로 제출한다.
    • <form onsubmit="return handler();" > (어떨때는 실행, 어떨때는 실행 x ) 
           이메일 찾기 : <input type="text" name="email" /> <button type="submit">이메일찾기</button>
      </form>

      function handler() {
           var el  = document.querySelector("[name=email]");
           if (el.value === " ") {
                return false;    // 폼입력값이 서버로 제출되지 않게 한다.
           } 
           return true;           // 폼입력값이 서버로 제출된다. 

      }

 

  • onclick 이벤트
    : <a /> 태그에서 onclick 이벤트가 발생하면 지정된 링크로 이동한다. 
    • event.preventDefault ();    // a태그에서 onclick 이벤트가 발생해도 링크로 이동되지 않게 한다.
                                                    (무조건 막음)

 

 

 

 

 

 

3. 링크의 클릭 이벤트

 

 

* 사진에 손가락 모양 가게 하기 -> img태그에 <a>태그를 건다

 

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<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를 클릭했을 때 onlick 이벤트가 발생한다. (이벤트 소스는 img다.) -> 근데 onclick이벤트가 등록 안되어있으니까 패스
			// 2. img 태그에서 발생한 onclick 이벤트가 a 태그로 전파된다.
			// 3. a 태그에 onclick 이벤트 발생시 실행할 changeImage(event) 함수가 등록되어 있으므로 함수를 실행한다.
			// 4. changeImage(event) 함수 실행시 event 객체가 전달된다. (event.target으로 조회되는 엘리먼트는 img다.)
			//    (이벤트가 발생한 곳은 img니까)
			var el = event.target;	// el에는 image가 담김
		
			var gallary = document.getElementById("image-gallary");
			var image = el.getAttribute("src"); 
			gallary.setAttribute("src", image);
	
		}
	</script>
</body>
</html>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

저작자표시 비영리 변경금지 (새창열림)

'수업내용 > Javascript & jQuery' 카테고리의 다른 글

[2022.11.29.화] jQuery 선택자  (0) 2022.11.29
[2022.11.25.금] web-board 에 자바스크립트 기능 (입력값 누락방지, 검색)  (0) 2022.11.25
[2022.11.24.목] 자바스크립트3 - 값 조회, 변경  (0) 2022.11.24
[2022.11.23.수] 자바스크립트2  (0) 2022.11.23
[2022.11.22.화] 자바스크립트  (0) 2022.11.22

'수업내용/Javascript & jQuery'의 다른글

  • 현재글[2022.11.25.금] 자바스크립트3 - 이벤트

관련글

댓글

티스토리툴바