(51) [JavaScript] 7일 JavaScript 객체


</head>
<body>

	<h3>Bubbling 과 Capturing</h3>

<!-- 
	Bubbling : 하위 요소에서 이벤트가 발생하면 하위에서 상위로 이벤트가 전파(기본)
	Capturing : 하위 요소에서 이벤트가 발생하면 상위에서 하위로 이벤트가 전파 
 -->



	<div class="box1">
		DIV 영역
		<p class="box2">
			p 영역 <span class="box3">SPAN영역</span>
		</p>
	</div>
	<hr>
	<div class="console"></div>

	<script type="text/javascript">
		const box1 = document.querySelector('.box1');
		const box2 = document.querySelector('.box2');
		const box3 = document.querySelector('.box3');

		const console = document.querySelector('.console');
	
		//기본 :Bubbling 
		//Span 을 클릭하면 : SPAN클릭 > P클릭 < DIV 클릭 순으로 실행 
		
		/*
		box1.addEventListener('click', function(e) {
			console.innerHTML += 'DIV클릭<br>';
		});

		box2.addEventListener('click', function(e) {
			console.innerHTML += 'P 클릭<br>';
		});

		box3.addEventListener('click', function(e) {
			console.innerHTML += 'SPAN 클릭 <br>';		
		});
		*/
		
		
		//Capturing
		//Span 을 클릭하면 "DIV클릭 > P클릭 > SPAN 클릭" 
		
		box1.addEventListener('click', function(e) {
			console.innerHTML += 'DIV클릭<br>';
		},true);

		box2.addEventListener('click', function(e) {
			console.innerHTML += 'P 클릭<br>';
		},true);

		box3.addEventListener('click', function(e) {
			console.innerHTML += 'SPAN 클릭 <br>';		
		},true);
		
		
	</script>


</body>
</html>

</head>
<body>

	<h3>키보드 관련 이벤트</h3>

	<p>
		<input type="text" id="inputs">
	</p>
	<hr>

	<div id="Layout"></div>
	<hr>

	<!-- 
		- ASC II 키 : a~z, 0~9, 엔터 등 
		발생되는 이벤트 : keydown -> keypress -> keyup 
		- 특수키 : SHift, Alt, ctrl , F1~F12 등
		발생되는 이벤트 : keydown - > keyup
		- keypress : 실제 눌러진 키코드로 반환(사용하지 말것을 권장) 
		key 속성으로 실제 눌러진 키를 확인 할 수 있다.  
	 -->

	<script type="text/javascript">
		const inputEL = document.querySelector('#inputs');
		const divEL = document.querySelector('#Layout');
		
		//keydown 이벤트 등록 및 이벤트 핸들러 
		inputEL.onkeydown=e=>{
			//keyCode 대신 key 사용을 권장 
			let keyCode = e.keyCode; // // a키를 누르면 65, A키를 누르면 65 반환
			let key = e.key; // a키를 누르면 'a', A키를 누르면 'A' 반환 
			
			let s = 'keydown : keyCode -' + keyCode +',key-'+key+'<br>';
			
			divEL.innerHTML=s;
		};
		
		
		inputEL.onkeypress=e=>{
			//keypress 이벤트는 사용하지 말것을 권장 
			let keyCode = e.keyCode; // // a키를 누르면 97, A키를 누르면 65 반환
			let key = e.key; // a키를 누르면 'a', A키를 누르면 'A' 반환 
			
			let s = 'keypress : keyCode -' + keyCode +',key-'+key+'<br>';
			
			divEL.innerHTML=s;
		};
		
		inputEL.onkeyup=e=>{
			//keypress 이벤트는 사용하지 말것을 권장 
			let keyCode = e.keyCode; // // a키를 누르면 65, A키를 누르면 65 반환
			let key = e.key; // a키를 누르면 'a', A키를 누르면 'A' 반환 
			
			let s = 'keyup : keyCode -' + keyCode +',key-'+key+'<br>';
			
			divEL.innerHTML+=s;
		};
		
	</script>

</body>
</html>

</head>
<body>

	<h3>키 이벤트</h3>

	<p>
		숫자만 : <input type="text" class="inputNum">
	</p>

	<script type="text/javascript">
	
		const inputNumEL=document.querySelector('input.inputNum');
		
		const onlyNumber = e =>{
			
			/*let key = e.key || e.keyCode;
			if((key==='Enter' && ! e.shiftKey)||(key===13 && key!==16)){
				//Enter를 누른 경우(Shift 키를 누르지 않은 상태)
			}
			*/
			
			let key = e.key;
			//keypress 이벤트로 처리하면 Backspace등을 눌러도 keypress 이벤트가 발생되지
			//않으므로 아래 코드를 작성하지 않아도 된다. 
			if(key==='Backspace' || key ==='Tab' || key ==='ArrowLeft' || key ==='ArrowRight' || key === 'Delete'){
				
			return;
			}
				
			if(key<'0'||key>'9'){
				e.preventDefault();
				
			}
		};
		
		
		
		inputNumEL.addEventListener('keydown',e=> onlyNumber(e))
		
		
	</script>


	<p>
		영문자만 : <input type="text" class="inputAlph">
	</p>

	<script type="text/javascript">
	const inputAlphEl = document.querySelector('input.inputAlph');
	
	const onlyAlphabet = e =>{
		
		let key = e.key;
		if(key==='Backspace' || key ==='Tab' || key ==='ArrowLeft' || key ==='ArrowRight' || key === 'Delete'){
			
		return;
		}
			
		if((key<'A'||key>'Z')&&(key<'a'||key>'z')){
			e.preventDefault();
			
		}
		
	};
	
	inputAlphEl.addEventListener('keydown',e=>onlyAlphabet(e));
	
	</script>

	<p>
		영숫자 : <input type="text" class="inputAlphNum">
	</p>

	<script type="text/javascript">
	const inputAlphNumEL = document.querySelector('input.inputAlphNum');
	const onlyAlphNum = e =>{
		let key = e.key;
		if(key==='Backspace' || key ==='Tab' || key ==='ArrowLeft' || key ==='ArrowRight' || key === 'Delete'){
			
		return;
		};
		
		if(!/^\w{1}$/.test(key)){
			e.preventDefault();
		}
	};
	
// 	//inputAlphNumEL.addEventListener('keydown',e=>onlyAlphNum(e));
	
	inputAlphNumEL.addEventListener('keydown',e=>onlyAlphNum(e));
	
	
	</script>


	<p>
		입력된 한글 삭제 : <input type="text" class="inputDeleteKor">
	</p>
	<script type="text/javascript">
	const inputDeleteKorEL=document.querySelector('input.inputDeleteKor');
	const deleteKorean=e=>{
		target.value=target.value.replace(/[ㄱ-ㅎ ㅏ-ㅣ 가-힣]/g,'');
		
	};
	
	inputDeleteKorEL.addEventListener('keyup',e=>deleteKoeran(e));
	
	</script>

	<p>
		한글만 입력 : <input type="text" class="inputKor">
	</p>
	<script type="text/javascript">
	const inputKorEL=document.querySelector('input.inputKor');
	
	const onlyKorean =e=>{
		let keyCode = e.keyCode;
		
		// 한글은 e.key로 확인 불가
		if( keyCode<12592 || keyCode>12687){
			e.preventDefault();
		}
		
	};
	inputKorEL.addEventListener('keypress',e=>onlyKorean(e));
	
	</script>

	<p>
		한글입력 제한 : <input type="text" class="inputNoKor">
	</p>
	<script type="text/javascript">
		const inputNoKorEL = document.querySelector('input.inputNoKor');
		
		//compositionstart 이벤트 : 한글등 조합 문자를 입력할 때 발생하는 이벤트 
		
		inputNoKorEL.addEventListener('compositionstart',e=>{
			const self = e.currentTarget;
			self.blur();
			
			//다음 리페이트전 실행 
			requestAnimationFrame(()=> self.focus());
		});
		
		</script>


</body>
</html>

</head>
<body>

	<p>한글 입력 제한</p>

	<p>한글 가능 : <input type="text"></p>
	
	<p>한글 제한 : <input type="text" class="notKorean"></p>
	<p>한글 제한 : <input type="text" class="notKorean"></p>
	<p>한글 제한 : <input type="text" class="notKorean"></p>


	<p>한글 가능 : <input type="text"></p>
	
	<script type="text/javascript">
	const inputELements = document.querySelectorAll('input.notKorean');
	
	//영문 입력후 한글 입력하면 앞의 영문이 삭제될                                    수 있음  
	const notKorean =e=>{
		const target = e.currentTarget;
		//target.value=target.value.replace(/^[\W]$/g,'');
		target.value=target.value.replace(/[ㄱ-ㅎ ㅏ-ㅣ 가-힣]/g,'');
	};
	
	
	inputELements.forEach(inputEL=>inputEL.addEventListener('input',e=>notKorean(e)));
	</script>
	
	
</body>
</html>

</head>
<body>

	<h3>F12, 마우스 우측</h3>

	<script type="text/javascript">
	window.addEventListener('load',()=>{
		document.addEventListener('keydown',e=>{
			if(e.key==='F12'){
				alert('개발자 도구 막음...')
				e.preventDefault();
			}
		});
		
		
		document.addEventListener('mousedown',e=>{
			if(e.button===2||e.button===3){
				alert('마우스 우측 누르면 오늘 과제 있다.');
			}
		});
		
	});
	</script>


</body>
</html>

<style type="text/css">
.box {
	width: 150px;
	height: 150px;
	border: 1px solid black;
}
</style>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
</head>
<body>

	<h3>마우스 관련 이벤트</h3>

	<div class="box"></div>
	<hr>

	<div class=:console></div>

	<script type="text/javascript">
	const boxEL = document.querySelector('.box');		
	const consoleEL = document.querySelector('.console');		
	
	
	boxEL.addEventListener('mouseover',e=>{
		//마우스 포인터가 객체 위로 올라올때 
		
		e.currentTarget.style.backgroundColor='#ff0';
		
		consoleEL.innerHTML=`mouseover:<br>`;
	});
	
	boxEL.addEventListener('mouseout',e=>{
		//마우스 포인터가 객체를 벗어날 때 
		consoleEL.innerHTML+=`mouseout:<br>`;
	});
	
	boxEL.addEventListener('mousedown',e=>{
		//마우스를 누를때 
		consoleEL.innerHTML+=`mousedown:<br>`;
	});
	
	boxEL.addEventListener('mouseup',e=>{
		//마우스를 눌렀다 놓을때 
		consoleEL.innerHTML+=`mouseup:<br>`;
	});
	
	boxEL.addEventListener('dblclick',e=>{
		//객체를 더블클릭할 때 
		consoleEL.innerHTML+=`dblclick:<br>`;
		
	});
	
	
	</script>
</body>
</html>

<style type="text/css">
.box {
	width: 300px;
	height: 700px;
	border: 3px dotted gray;
}
</style>

</head>
<body>

	<h3>마우스 클릭 좌표</h3>

	<div class="box"></div>

	<script type="text/javascript">
		const boxEL = document.querySelector('div.box');
		
		boxEL.addEventListener('click',e=>{
			
			//document의 가장 왼쪽 지점부터의 x,y 좌표(스크롤바 제외)
			let x = e.clientX;
			let y = e.clientY;
			boxEL.innerHTML = `client 좌표: (${x},${y})<br>`;
			
			let x2 = e.pageX;
			let y2 = e.pageY;
			boxEL.innerHTML += `page 좌표: (${x2},${y2})<br>`;
			
			let x3 = e.offsetX;
			let y3 = e.offsetY;
			boxEL.innerHTML += `offset 좌표: (${x3},${y3})<br>`;
			
			let x4 = e.screenX;
			let y4 = e.screenY;
			boxEL.innerHTML += `screen 좌표: (${x4},${y4})<br>`;
		});
	</script>

</body>
</html>

<style type="text/css">
.box {
	width: 300px;
	height: 700px;
	border: 3px dotted gray;
}
</style>

</head>
<body>

	<h3>마우스 + ctrl 또는 shift </h3>
	
	<div class="box"></div>
	
	<script type="text/javascript">

		const boxEL = document.querySelector('div.box');
	
		boxEL.addEventListener('click',e=>{
			// e.ctrlkey, e.shiftKey, e.alrKey
			if(e.ctrlkey){
				alert('ctrl+click');
			}else if(e.shiftKey){
				alert('shift+click')
				
			}
		
		});
	</script>

</body>
</html>

</head>
<body>

	<h3>change event</h3>
	<!-- 
		-select : 드롭다운에서 값을 선택한 경우 발생
		-<textarea>, <input type="text"> : 값을 편집후 포커스를 읽을때 발생
		-<input type="checkbox">,<input type="radio"> :값을 선택한 경우  
	 -->

	<form name="myForm">
		<p>
			<select name="selectEmail" onchange="changeEmail();">
				<option value="">선택</option>
				<option value="naver.com">네이버</option>
				<option value="hanmail.net">한메일</option>
				<option value="gmail.com">지메일</option>
				<option value="nate.com">네이트</option>
				<option value="direct">직접입력</option>
				
			</select> 
			
			<input type="text" name="email1">@ <input type="text"
				name="email2" readonly>
		</p>
	</form>

	<script type="text/javascript">
		function changeEmail() {
			const f = document.myForm;
			let s = f.selectEmail.value;

			if (s !== 'direct') {
				f.email2.value = s;
				f.email2.readOnly = true;
				f.email2.focus();

			} else {
				f.email2.value = '';
				f.email2.readOnly = false;
				f.email2.focus();

			}

		}
	</script>


</body>
</html>

<style type="text/css">
.box{
	width: 300px;
	height: 300px;
	border: 3px dotted gray;
}
</style>

<script type="text/javascript">
function init() {
	const boxEL = document.querySelector('.box');
	
	boxEL.addEventListener('mouseover', e=>boxEL.style.backgroundColor='#ff0');
	boxEL.addEventListener('mouseout', e=>boxEL.style.backgroundColor='');
}

//init(); 에러 : DOM이 준비가 안된 상태 
window.addEventListener('load',e=>init());



</script>

</head>
<body>


	<h3>load 이벤트</h3>
	<!-- 
		-load 이벤트 
		 : 스타일등 모든 리소스를 포함하여 전체 페이지가 로드되면 이벤트가 시작
		 : HTML의 DOM 트리 작성이 완료 및 이미지, 스타일등 외부자원이 불러오는것이 끝났을때 발생
	 -->
	 
	 <div class="box"></div>


</body>
</html>

'💻 > Javascript' 카테고리의 다른 글

(52) [JavaScript] 8일 JavaScript 정규 표현식 (1)	2024.04.29
(52) [JavaScript] 8일 JavaScript Form (0)	2024.04.29
(50) [JavaScript] 6일 JavaScript 객체 - 이벤트 (1)	2024.04.28
(50) [JavaScript] 6일 JavaScript 객체 - DOM (1)	2024.04.28
(50) [JavaScript] 6일 JavaScript 객체 - 클래스 (1)	2024.04.28

Power Up!

(51) [JavaScript] 7일 JavaScript 객체 - 이벤트2

'💻 > Javascript' 카테고리의 다른 글

티스토리툴바

(51) [JavaScript] 7일 JavaScript 객체 - 이벤트2

'💻 > Javascript' 카테고리의 다른 글

관련글

티스토리툴바