220513~16 Javascript 10

달거북씨 2022. 6. 23. 18:29

2022. 6. 23. 18:29

1. 이벤트(event)

이벤트란 어떤 사건을 의미한다.

브라우저에서의 사건이란, 사용자가 클릭 했을 '때', 스크롤 했을 '때', 필드의 내용을 바꾸었을 '때' 등을 의미한다.

https://developer.mozilla.org/en-US/docs/Web/Events

Event reference | MDN

Events are fired to notify code of "interesting changes" that may affect code execution. These can arise from user interactions such as using a mouse or resizing a window, changes in the state of the underlying environment (e.g. low battery or media events

developer.mozilla.org

[예제 코드]

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<input type="button" value="alert" onclick="alert(window.location);">
	<!-- 
		onlick		: 사용자가 버튼을 클릭했을 '때' 실행
		event target	: 이벤트가 일어날 객체를 의미한다. 여기서는 버튼 태그에 대한 객체가 타겟
		event type	: 이벤트의 종류를 의미한다. click이 이벤트 타입
		event handler	: 이벤트가 발생했을 때 동작하는 코드를 의미한다. 
				  여기서는 alert(window.location)이 해당된다.	
	 -->
</body>
</html>

[출력 결과]

alert버튼을 클릭하면 window.location 정보를 담은 alert 창이 뜬다.

1-1. 인라인(inline) 방식

인라인 방식은 이벤트를 이벤트 대상의 태그 속성으로 지정하는 것

[예제 코드]

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h1>10 + 50 = <span id="question"> ? </span> </h1>
	<input type="button" value="결과보기" 
		onclick="printResult();">
		
	<script>
		// 결과보기 버튼 클릭시, 10 + 50의 결과 값을 '?' 안에 넣어줄것
		function printResult() {
			let result = sum(10, 50);
			
			// id로 접근
			let mytag = document.getElementById("question");
			mytag.innerHTML = result;
		}
		
		function sum(x, y){
			return x + y;
		}
	</script>
</body>
</html>

[출력 결과]

1-2. 자기 자신 참조하기

방법 1 : getElement~로 참조하기. 따로 지정될 id나 class 등을 명시해야 해서 불편하다.
방법2 : this로 참조하기

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<!-- 자기 자신을 참조하는 불편한 방법 -->
	<input type="button" id="target" 
		onclick="alert('event_1 : ' + document.getElementById('target').value);" 
		value="button"/>
        
	 <!-- this를 통해서 간편하게 참조하는 방식 -->
    	 <!-- 이벤트가 발생한 대상을 필요로 하는 경우, this를 통해서 참조할 수 있다 -->
	<input type="button" 
		onclick="alert('event_1 : ' + this.value);"
	 	value="button">
</body>
</html>

[출력 결과]

▶ 두 개의 버튼 모두 방법은 다르지만 동일한 결과를 출력한다.

1-3. 프로퍼티 리스너

이벤트 대상에 해당하는 객체의 프로퍼티로 이벤트를 등록하는 방식이다.

인라인 방식에 비해서 HTML과 Javascript를 분리할 수 있다는 점에서 선호되는 방식이지만, 뒤에서 배울 addEventListener 방식을 추천한다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<input type="button" id="target" value="button" />
	<script>
	 	let t = document.getElementById('target');
	 	t.onclick = function(){
	 		alert('Hello world');
	 	}
	</script>
</body>
</html>

[출력 결과]

function()에 보통 파라미터로 event를 넣는다.

이것을 console.log(event)로 출력해 봄으로써 이벤트가 발생할 때의 정보 확인이 가능하다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<input type="button" id="target" value="button" />
	<script>
	 	let t = document.getElementById('target');
	 	
	 	t.onclick = function(event){
	 		alert('Hello world : ');
	 		console.log(event);
	 	}
	</script>
</body>
</html>

target :  input#target 안의 defaultValue :  "button"

이벤트가 실행된 맥락의 정보가 필요할 때는 이벤트 객체를 사용한다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<input type="button" id="target" value="button" />
	<script>
	 	let t = document.getElementById('target');
	 	
	 	t.onclick = function(event){
	 		alert('Hello world : ' + param.target.value);
	 	}
	</script>
</body>
</html>

[출력 결과]

1-4. addEventListner()

이벤트를 등록하는 가장 권장되는 방식이다. 이 방식을 이용하면 여러 개의 이벤트 핸들러를 등록할 수 있다.

▶ 이벤트 핸들러란?

"어떠한 사건에 대한 동작을 다룬다"는 의미
"마우스가 버튼에 닿았을 때"는 사건(Action)
"마우스가 버튼에 닿으면 버튼 색이 파란색으로 변한다"는 사건에 대한 동작
이 두 개를 묵은 것이 이벤트 핸들러이다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	 <input type="button" id="target" value="button" />
	 <script>
	 	let t = document.getElementById('target');
	 	t.addEventListener('click',function(){
	 		alert('Hello world!!!');
	 	});
	 </script>
</body>
</html>

[출력 결과]

1-5. 이벤트 함수 실행하기

[예제 코드 1]

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<input type="button" id="target1" value="button1">
	
	<script>
		let t1 = document.getElementById('target1');
		
		function btn_listener(event){
			alert("button 클릭! : " + event.target.id);
		}
	
		t1.addEventListener('click', btn_listener );
	</script>
</body>
</html>

▶ gtn_listner 함수 뒤 괄호()는 써주지 않아도 된다.

[출력 결과 1]

[예제 코드 2]

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<input type="button" id="target1" value="button1"/>
	<input type="button" id="target2" value="button2"/>
	
	<script>
		function btn_listener(event){
			switch (event.target.id) {
				case 'target1':
					alert("target1 클릭!!");
					break;
				case 'target2':
					alert("target2 클릭!!");
					break;
			}
		}
		
		let t1 = document.getElementById("target1");
		let t2 = document.getElementById("target2");
		
		t1.addEventListener('click', btn_listener);
		t2.addEventListener('click', btn_listener);
	</script>
</body>
</html>

▶ addEventListener 방식으로 클릭 이벤트 등록
▶ btn_listener 실행 및 내부 분기처리
▶ target1 클릭 시 -> alert(target1 클릭!!);
▶ target2 클릭 시 -> alert(target2 클릭!!);

[출력 결과 2]

1-6. property 방식과 listner 방식 비교

action(), action2() 함수를 각각 property 방식과 listner방식으로 실행해 봄으로써 차이점을 알 수 있다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<input type="button" id="target1" value="property">
	<input type="button" id="target2" value="listener">
	
	<script>
		function action(){
			alert('click!!');
		}	
		
		function action2(){
			alert('클릭!!');			
		}
	
		// property
		document.getElementById("target1").onclick = function(){
			action();
		}
		document.getElementById("target1").onclick = function(){
			action2();
		}
		
		// listener
		document.getElementById('target2').addEventListener('click',action);
		document.getElementById('target2').addEventListener('click',action2);
	</script>
</body>
</html>

[출력 결과 1]

▶ property 방식은 마지막 action2()만 동작하는 것을 볼 수 있고

▶ listner 방식은 action()과 action2()가 차례로 동작하는 것을 볼 수 있다.

▶ properety 방식은 일종의 덮어쓰기로 마지막 함수만 호출이 되고, listner방식은 add 해줌으로써 두 함수가 차례로 동작한다.

add되어 있는 이벤트는 remove도 가능하다.

document.getElementById('target2').removeEventListener('click',action);

▶ action2() 이벤트는 지워지고 action()만 실행되어 'listner' 버튼을 누르면 alert('click!!')만 뜬다.

1-7. 기본 동작의 취소

웹 브라우저의 구성요소들은 각각 기본적인 동작 방법을 가지고 있다.

기본 동작에 대한 기본 이벤트들을 취소할 수 있다.

[예제 코드 - 기본 이벤트 작성]

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	 <p>
	 	<label>prevent event on</label>
	 	<input type="checkbox" id="prevent">
	 </p>
	 <p>
	 	<a href="http://www.naver.com">naver</a>
	 </p>
 	<form action="http://www.naver.com">
 		<input type="submit">
 	</form>
</body>
</html>

[출력 결과]

▶ 체크박스 클릭 여부에 상관없이 링크 또는 submit 버튼을 클릭하면 연결된 링크(네이버)로 이동한다.

[예제 코드 - 체크박스 체크 시 링크와 submit 제출 이벤트 취소 - 인라인 방식]

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<p>
		<label>prevent event on</label>
		<input type="checkbox" id="prevent">
	</p>
    
	<!-- inline 방식 -->
	<!-- 
		checked	: true 	-> 체크가 되어 있는 상태 
    			: false -> 체크가 되어 있지 않은 상태
	-->
	<p>
		<a href="http://www.naver.com"
			onclick="if(document.getElementById('prevent').checked) return false;">
		naver</a>
	</p>
	<form action="http://www.naver.com"
		onsubmit="if(document.getElementById('prevent').checked) return false;">
		<input type="submit">
	</form>
</body>
</html>

[출력 결과]

▶ 체크박스가 체크되어 있으면 "document.getElementById('prevent').checked"가 ture가 되어 if문이 실행되고 false가 리턴됨으로써 이벤트가 실행되지 않는다.

[예제 코드 - 체크박스 체크 시 링크와 submit 제출 이벤트 취소 - property 방식(onclick)]

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	 <p>
	 	<label>prevent event on</label>
	 	<input type="checkbox" id="prevent">
	 </p>
	 <p>
	 	<a href="http://www.naver.com" id="select">naver</a>
	 </p>
 	<form action="http://www.naver.com" id="sel2">
 		<input type="submit">
 	</form>
 	
 	<script>
 		document.getElementById('sel1').onclick = function(){
 			if( document.getElementById('prevent').checked ){
 				return false;
 			}
 		}
 		document.getElementById('sel2').onclick = function(){
 			if( document.getElementById('prevent').checked ){
 				return false;
 			}
 		}
 	</script>
</body>
</html>

[예제 코드 - 체크박스 체크 시 링크와 submit 제출 이벤트 취소 - addEventListner 방식(click / submit)]

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	 <p>
	 	<label>prevent event on</label>
	 	<input type="checkbox" id="prevent">
	 </p>
	 <p>
	 	<a href="http://www.naver.com" id="sel1">naver</a>
	 </p>
 	<form action="http://www.naver.com" id="sel2">
 		<input type="submit">
 	</form>
 	
 	<script>
 		// click
 		document.getElementById('sel1').addEventListener('click',function(event){
 			if( document.getElementById('prevent').checked ){
 				event.preventDefault();
 			}
 		});
 		
        	// submit
 		document.getElementById('sel2').addEventListener('submit',function(event){
 			if( document.getElementById('prevent').checked ){
 				event.preventDefault();
 			}
 		});
 	</script>
</body>
</html>

▶ event.preventDefault()를 호출하면 일반적으로 기존의 액션이 진행되지 않아 해당 이벤트가 발생하지 않는다.

1-8. change

폼 컨트롤의 값이 변경되었을 때 발생하는 이벤트

입력을 끝내고 focus를 빠져나왔을 때 발생한다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	 <p id="result"></p>
	 <input type="text" id="target">
	 
	 <script>
	 	let t = document.getElementById('target');
	 	t.addEventListener('change',function(event){
	 		document.getElementById('result').innerHTML = event.target.value;
	 	});
	 </script>
</body>
</html>

[출력 결과]

1-9. focus, blur

focus : 엘리먼트에 포커스가 생겼을 때
blur : 포커스가 사라졌을 때

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	 <input type="text" id="target" />
	 <script>
	 	let t = document.getElementById("target");
        
        // blur
	 	t.addEventListener('blur',function(){
	 		console.log('blur');
	 	});
        
        // focus
	 	t.addEventListener('focus',function(){
	 		console.log('focus');
	 	});
	 </script>
</body>
</html>

[출력 결과]

1-10. submit 전송 취소

submit : 폼 정보를 서버로 전송하는 명령어인 submit 시에 일어나고 form 태그에 적용된다.

아무것도 입력하지 않고 전송버튼을 눌렀을 때 submit 이벤트를 취소시키는 코드

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	 <form action="result.html" id="target">
	 	<label>
	 		name : <input type="text" id="name">
	 		<input type="submit">
	 	</label>
	 </form>
	 <script>
	 	let t = document.getElementById("target");
	 	t.addEventListener('submit',function(event){
			if( document.getElementById("name").value.length == 0 ){
				alert("Name 필드의 값이 누락되었습니다.");
				event.preventDefault();
			}	 		
	 	});
	 </script>
</body>
</html>

[출력 결과]

▶ 빈 칸으로 제출하면 alert창 띄운 후 submit 전송 취소

▶ 내용을 적어 submit 전송시키면 result.html로 넘어가지만 현재 파일이 없기 때문에 파일에 액세스 할 수 없다고 뜬다

728x90

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

'이론 > 자바 풀스택 국비수업' 카테고리의 다른 글

220518 jQuery 1 (0)	2022.07.06
220517 Javascript 11 (0)	2022.06.23
220513 Javascript 9 (0)	2022.06.23
220512 Javascript 8 (0)	2022.06.22
220512 Javascript 7 (0)	2022.06.22

달거북씨의 코딩생활