JS 이벤트 처리 - 1 (기본)

Gun·2023년 10월 5일
js

JS

목록 보기
7/12
post-thumbnail
💡 학습목표
   1. HTML 요소에 이벤트 등록하기 
   2. 이벤트 등록 및 이벤트 핸들러 처리 ( C R U D )

1. HTML 요소에 이벤트 등록하기

자바스크립트 이벤트는 웹 페이지에서 발생하는 다양한 동작이나 발생 상황을 나타냅니다. 이런 이벤트를 활용하여 사용자의 행동에 반응하는 동적인 웹 페이지를 만들 수 있습니다. 예를 들어, 사용자가 버튼을 클릭할 때 메시지가 나타나게 하거나, 마우스를 웹 페이지의 특정 부분에 올렸을 때 스타일이 변경되게 할 수 있습니다.

이벤트를 활용하려면, 먼저 HTML 요소에 이벤트를 등록해야 합니다.

이벤트 등록에 대표적인 3가지 방식

  • Inline Event Handler : HTML 요소 내부에 직접 이벤트를 등록합니다.
  • Element Property : 자바스크립트에서 HTML 요소의 프로퍼티로 이벤트를 등록합니다.
  • addEventListener() 메서드 : 가장 권장되는 방식으로, 여러 이벤트 리스너를 동일한 요소에 추가할 수 있습니다.

1. Inline Event Handler

HTML 요소 내부에 직접 이벤트를 등록하는 방식입니다.

<<button onclick="alert('Inline Event Handler!')">Click me!</button>
💡 이벤트 핸들러란 무슨말일까?
   이벤트 핸들러는 특정 이벤트가 발생했을 때 실행되는 함수 또는 메서드를 말합니다. 
   즉, 이벤트 핸들러는 특정 이벤트가 일어났을 때 어떤 동작이 실행될지를 정의하고, 
   이벤트가 발생하면 그에 따라 코드를 실행합니다.

2. Element Property

자바스크립트에서 HTML 요소의 프로퍼티로 이벤트를 등록하는 방식입니다.

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title>Element Property Example</title>
	</head>
	<body>
		<button id="myButton">Click me!</button>
		<script>
			// 버튼 요소에 접근
			let btn = document.getElementById("myButton");

			// onclick 프로퍼티로 이벤트 핸들러 등록
			btn.onclick = function () {
				alert("HTML 요소의 속성으로 이벤트를 등록 하고 실행 합니다.");
			};
		</script>
	</body>
</html>

3. addEventListener() 메서드

addEventListener() 메서드를 사용하여 이벤트 핸들러를 등록하는 방식입니다. 이 방식은 여러 이벤트 리스너를 동일한 요소에 추가할 수 있습니다.

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title>addEventListener() Example</title>
	</head>
	<body>
		<button id="myButton">Click me!</button>
		<script>
			// 버튼 요소에 접근
			let btn = document.getElementById("myButton");

			// addEventListener() 메서드로 이벤트 핸들러 등록
			btn.addEventListener("click", function () {
				alert("addEventListener() Event Handler!");
			});
		</script>
	</body>
</html>

이 방법은 HTML과 JavaScript 코드를 분리하여 유지 보수를 쉽게 할 수 있습니다. addEventListener() 메서드는 이벤트 이름과 이벤트 핸들러 함수를 인자로 받습니다

1. click : 요소를 클릭할 때 발생합니다.
2. dblclick : 요소를 더블 클릭할 때 발생합니다.
3. mousedown : 요소에서 마우스 버튼이 눌릴 때 발생합니다.
4. mouseup : 요소에서 마우스 버튼이 떼어질 때 발생합니다.
5. mousemove : 요소에서 마우스가 움직일 때 발생합니다.
6. mouseover : 요소에 마우스 커서가 올라갈 때 발생합니다.
7. mouseout : 요소에서 마우스 커서가 벗어날 때 발생합니다.
8. keydown : 키보드에서 키를 누를 때 발생합니다.
9. keyup : 키보드에서 키를 뗄 때 발생합니다.
10. submit : 폼을 제출할 때 발생합니다.
11. change : 요소의 값이 변경될 때 발생합니다.
12. load : 웹 페이지나 이미지 등이 로딩되었을 때 발생합니다.

2. 이벤트 등록 및 이벤트 핸들러 처리

실습 예제 - 1 (노드 숨기기)

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title>Title</title>
		<style>
			/* flex-container 클래스에 대한 스타일 정의 */
			.flex--container {
				display: flex; /* flexbox 레이아웃 적용 */
			}
			/* box 클래스에 대한 스타일 정의 */
			.box {
				border: 1px solid black; /* 테두리 스타일 적용 */
				padding: 10px; /* 패딩 적용 */
			}
		</style>
	</head>
	<body>
		<h1>숨기기</h1>
		<div class="flex--container">
			<!-- Inline Event Handler 방식으로 onclick 이벤트를 등록하여, 버튼 클릭시 hideDisplay() 함수 호출 -->
			<button onclick="hideDisplay()">display로 숨기기</button>
			<button onclick="hideVisible()">visible로 숨기기</button>
			
            <!-- box 클래스를 가진 div 요소. 내부에 두 개의 내부 박스가 있다. -->
			<div class="box">
				<!-- id가 innerBox1인 내부 박스1 -->
				<div class="box" id="innerBox1">내부박스1</div>
				<!-- id가 innerBox2인 내부 박스2 -->
				<div class="box" id="innerBox2">내부박스2</div>
			</div>
		</div>

		<script>
			/* display 속성을 사용하여 요소를 숨기는 함수 */
			function hideDisplay() {
				// id가 innerBox1인 요소 선택
				let el = document.querySelector("#innerBox1");
				el.style.display = "none"; // display 속성을 none으로 설정하여 요소 숨기기
			}
			/* visibility 속성을 사용하여 요소를 숨기는 함수 */
			function hideVisible() {
				// id가 innerBox2인 요소 선택
				let el = document.querySelector("#innerBox2");
				el.style.visibility = "hidden"; // visibility 속성을 hidden으로 설정하여 요소 숨기기
			}
		</script>
	</body>
</html>
💡 display: none과 visibility: hidden은 모두 HTML 요소를 숨기는 방법이지만, 
   그들 사이에는 몇 가지 중요한 차이점이 있습니다.

1. 공간 차지

  • display: none:
    • 요소를 완전히 숨기며, 요소가 차지하던 공간도 제거됩니다.
    • 즉, 화면에서 요소가 완전히 사라지고, 그 자리를 다른 요소들이 차지할 수 있게 됩니다.
  • visibility: hidden:
    • 요소는 화면에서 보이지 않지만, 요소가 차지하던 공간은 유지됩니다.
    • 즉, 요소가 보이지 않게 되지만, 그 자리는 계속 차지하고 있어서 페이지 레이아웃에 영향을 주지 않습니다.

2. 이벤트 발생

  • display: none:
    • 요소가 완전히 비활성화되어, 이벤트를 발생시킬 수 없습니다.
  • visibility: hidden:
    • 이벤트는 발생하지 않지만, 만약 자식 요소가 visibility: visible로 설정되어 있다면, 자식 요소에서는 이벤트가 발생할 수 있습니다.
/* display: none은 요소를 완전히 제거하므로 영역도 차지하지 않습니다. */
.display-none {
  display: none;
}

/* visibility: hidden은 요소를 보이지 않게 하지만 영역은 차지하고 있습니다. */
.visibility-hidden {
  visibility: hidden;
}

실습 예제 - 2 ( 노드 보이기)

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title>Title</title>
		<style>
			.flex--container {
				display: flex;
			}
			.box {
				border: 1px solid black;
				padding: 10px;
			}
			#innerBox1 {
				display: none;
			}
			#innerBox2 {
				visibility: hidden;
			}
		</style>
	</head>
	<body>
		<h1>보이기</h1>
		<div class="flex--container">
			
			<button onclick="showDisplay()">display로 보이기</button>
			<button onclick="showVisible()">visible로 보이기</button>

			<div class="box">
				<!-- display: none으로 설정되어 초기에는 보이지 않습니다. -->
				<div class="box" id="innerBox1">내부박스1</div>
				<!-- visibility: hidden으로 설정되어 초기에는 보이지 않습니다. -->
				<div class="box" id="innerBox2">내부박스2</div>
			</div>
		</div>

		<script>
			function showDisplay() {
				// #innerBox1 요소를 선택하여 display 속성을 block으로 설정하여 보이게 합니다.
				let el = document.querySelector("#innerBox1");
				el.style.display = "block"; // 요소가 보이게 됩니다.
			}

			function showVisible() {
				// #innerBox2 요소를 선택하여 visibility 속성을 visible로 설정하여 보이게 합니다.
				let el = document.querySelector("#innerBox2");
				el.style.visibility = "visible"; // 요소가 보이게 됩니다.
			}
		</script>
	</body>
</html>

실습 예제 - 3 ( 노드 생성하기)

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title>Add Elements Dynamically</title>
		<style>
			/* 리스트에 대한 스타일 */
			ul {
				list-style-type: none;
				padding: 0;
			}
			/* 리스트 아이템에 대한 스타일 */
			li {
				background-color: #f9f9f9;
				margin: 8px 0;
				padding: 8px;
				border: 1px solid #ccc;
			}
		</style>
	</head>
	<body>
		<h1>요소를 동적 추가하기</h1>
		<button onclick="addItem()">아이템 추가</button>
		<!-- addItem 함수 호출 -->
		<ul id="myList">
			<!-- 아이템이 추가될 목록 -->
			<li>아이템 1</li>
		</ul>

		<script>
			let count = 1;
			function addItem() {
				count++;
				// 새로운 li 요소를 생성합니다.
				let newItem = document.createElement("li");
				// 새로운 li 요소의 텍스트 내용을 설정합니다.
				newItem.innerHTML = "새로운 아이템 " + count;

				// myList id를 가진 ul 요소를 선택합니다.
				let list = document.querySelector("#myList");
				// 생성한 li 요소를 ul 요소의 자식으로 추가합니다.
				list.append(newItem);
			}
		</script>
	</body>
</html>

실습 예제 - 3 ( 노드 삭제하기)

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title>Remove Elements Dynamically</title>
		<style>
			ul {
				list-style-type: none;
				padding: 0;
			}

			li {
				background-color: #f9f9f9;
				margin: 8px 0;
				padding: 8px;
				border: 1px solid #ccc;
			}
		</style>
	</head>
	<body>
		<h1>요소를 동적으로 삭제하기</h1>
		<button onclick="removeItem()">아이템 삭제</button>

		<ul id="myList">
			<!-- 아이템이 추가될 목록 -->
			<li>아이템 1</li>
			<li>아이템 2</li>
		</ul>

		<script>
			function removeItem() {
				// myList id를 가진 ul 요소를 선택합니다.
				let list = document.querySelector("#myList");

				// ul 요소의 마지막 자식을 선택합니다.
				let lastChild = list.lastElementChild;

				// 마지막 자식이 있을 경우, 삭제합니다.
				if (lastChild) {
					// 주의!!
					// list.remove(); 해당 요소를 직접 제거
					list.removeChild(lastChild); // 부모 노드에서 특정 자식 노드를 제거하는 형태로 사용 됩니다.
				} else {
					alert("더 이상 삭제할 아이템이 없습니다.");
				}
			}
		</script>
	</body>
</html>
profile
Gun
이전 포스트

JS - 점검 6(웹 페이지 렌더링 과정)

다음 포스트

JS 이벤트 처리 - 2(addEvnetListener)

0개의 댓글