프로그래밍

[Web] day35 : 자바스크립트 이벤트 연결02 본문

Web/Web

[Web] day35 : 자바스크립트 이벤트 연결02

시케 2023. 7. 4. 17:42
728x90
반응형

2023.06.23.금

이벤트 연결

사용자의 커뮤니케이션에 따라 변경되는 이벤트 구현

2023.07.04 - [Web] - [Web] day34 : 자바스크립트 이벤트 연결01

 

[Web] day34 : 자바스크립트 이벤트 연결01

2023.06.22.목 이벤트 연결 웹에서 어떠한 행동을 할 때 변경사항 혹은 어떠한 일을 수행하고 싶을 수 있는데 이러한 '이벤트'를 문서의 요소와 연결 시킬 수있다 이벤트 연결은 상단 배치 무명함수

dev-9rm.tistory.com

 

키보드 입력 이벤트

키보드 입력 이벤트 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>키보드 입력 이벤트</title>
<style type="text/css">
	input {
		border: 5px solid black;
	}
</style>


</head>
<body>

	<input type="text" onkeydown="test(event)" placeholder="keydown 이벤트"> 
	
<script type="text/javascript">
	function test(event){
		console.log(event.keyCode);
		if(event.keyCode == 13){
			
			//event.target.value == input 박스에 있는 값
			console.log(event.target.value); // 상대적으로 느림(스레드)
			alert(event.target.value);
		}
	}

</script>

</body>
</html>

마우스 입력 이벤트

마우스 입력 이벤트 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>마우스 입력 이벤트</title>
<style type="text/css">
	#box {
		width: 50px;
		height: 50px;
		background-color: lightgray;
		cursor: pointer;
	}

</style>
</head>
<body>

<script type="text/javascript">
	function test1(obj){
		obj.style.backgroundColor = 'lightgreen';
	}
	function test2(obj){
		obj.style.backgroundColor = 'lightpink';
	}
	function test3(obj){
		obj.style.backgroundColor = 'lightblue';
	}
</script>

<div id="box" onmouseover="test1(this)" onmousedown="test2(this)" onmouseout="test3(this)">
</div>

</body>
</html>

속성 값에 따라 이벤트 등록

속성 값에 따라 이벤트 등록
  • 1번째 목록
  • 2번째 목록
  • 3번째 목록
  • 4번째 목록
  • 5번째 목록
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>속성 값에 따라 이벤트 등록</title>
</head>
<body>

<button type="button" onclick="test()">id 속성값이 check인 목록에 변화주기</button>
<button type="button" onclick="test2()">class 속성값이 check2인 목록에 변화주기</button>

	<ul>
		<li class = "check2">1번째 목록</li>
		<li id ="check">2번째 목록</li>
		<li class = "check2">3번째 목록</li>
		<li>4번째 목록</li>
		<li class = "check2">5번째 목록</li>
	</ul>
	
<script type="text/javascript">
	function test(){
		var obj = document.getElementById('check');
		obj.style.backgroundColor = 'blue';
	}
	function test2(){
		var arr = document.getElementsByClassName('check2');
		
		for(var i =0; i<arr.length; i++){
			arr[i].style.backgroundColor ='gray';
		}
	}
</script>

</body>
</html>

이벤트 리스너 등록(클래스명 부여 /박탈)

리스너를 통한 이벤트 등록
  • 1번째 목록
  • 2번째 목록
  • 3번째 목록
  • 4번째 목록
  • 5번째 목록
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>리스너를 통한 이벤트 등록</title>
<style type="text/css">
	li {
		margin: 10px;
		cursor: pointer;
		border: 1px solid;
	}
	.click {
		/* 클릭 이벤트를 통해
		클래스명이 click이된 요소가 있다면*/
		background-color: lightpink !important;
	}
</style>

</head>
<body>

	<ul>
		<li>1번째 목록</li>
		<li>2번째 목록</li>
		<li>3번째 목록</li>
		<li>4번째 목록</li>
		<li>5번째 목록</li>
	</ul>
	
	<script type="text/javascript">
		var arr = document.querySelectorAll('li');
		
		// 이벤트를 연결할때
		// 이벤트 리스너를 등록하는 방식으로 적용
		for(var i =0; i<arr.length; i++){
			arr[i].addEventListener('mouseover',function(){
				this.style.backgroundColor='lightgray';
			});
			arr[i].addEventListener('mouseout',function(){
				this.style.backgroundColor='white';
			});
			
			// 함수를 바로 연결하는 방식
			// 일반적으로 사전에 등록해둔 CSS와 연결되게끔 코드를 작성하는 편
			arr[i].onclick = test;
		}
		
		// 클릭시 클래스명을 부여 및 박탈하는 방식
		function test() {
			if(this.className == 'click'){
				this.className='';
			}
			else{
				this.className='click';
			}
		}
	
	</script>

</body>
</html>

 

728x90
반응형

'Web > Web' 카테고리의 다른 글

[Web] day35 : BOM (Browser Object Model)  (0) 2023.07.04
[Web] day35 : 자바스크립트 이벤트 활용 예제  (0) 2023.07.04
[Web] day34 : 자바스크립트 이벤트 연결01  (0) 2023.07.04
[Web] day34 : 자바스크립트  (0) 2023.07.04
[Web] day33 : CSS 애니메이션  (0) 2023.07.04
'Web/Web' Related Articles more
Comments