13-3. JS 함수 (익명함수, 화살표함수, 이벤트, DOM )

13-3. JS 함수 (익명함수, 화살표함수, 이벤트, DOM )

2021. 10. 19. 15:39ㆍHTML + CSS + JS

728x90

1. 익명함수

익명함수는 함수의 이름이 없는 함수이다.

따라서 익명함수를 선언할때는 함수의 이름이 없다.

2. 즉시 실행 함수

즉시 실행 함수는 한번만 실행하는 함수를 정의하고 동시에 실행하는 함수이다.

(function () {

명령

} () );

(function (매개변수) {

명령

} (인수) );

3. 화살표 함수

(매개변수) => { 함수 내용 }

4. 이벤트

1️⃣ 마우스 이벤트

click : 사용자가 html 요소를 클릭할 때 이벤트 발생

dbclick : 사용자가 html 요소를 더블 클릭할 때 이벤트 발생

mousedown : 사용자가 요소 위에서 마우스 버튼을 눌렀을 때 이벤트 발생

mousemove : 사용자가 요소 위에서 마우스 포인터를 움직였을 때 이벤트 발생

mouseover : 마우스 포인터가 요소 위로 옮겨질 때 이벤트가 발생

mouseout : 마우스 포인터가 요소를 벗어날 때 이벤트 발생

mouseup : 사용자가 요소 위에 놓인 마우스 버튼에서 손을 뗄 때 이벤트 발생

2️⃣ 키보드 이벤트

keydown : 사용자가 키를 누르는 동안 이벤트 발생

keypress : 사용자가 키를 눌렀을 때 이벤트 발생

keyup : 사용자가 키에서 손을 뗄 때 이벤트 발생

3️⃣ 문서 로딩 이벤트

abort : 문서가 완전히 로딩되기 전에 불러오기를 멈췄을 때 이벤트 발생

error : 문서가 정확히 로딩되지 않았을 때 이벤트 발생

load : 문서 로딩이 끝나면 이벤트 발생

resize : 문서 화면 크기가 변경됐을 때 이벤트 발생

scroll : 문서 화면이 스크롤 되었을 때 이벤트 발생

unload : 문서에서 벗어날 때 이벤트 발생

4️⃣ 폼 이벤트

blur : 폼 요소에 포커스를 잃었을 때 이벤트 발생

change : 목록이나 체크상태 등이 변경되면 이벤트 발생

focus : 폼 요소에 포커스가 놓였을 때 이벤트 발생

reset : 폼이 리셋되었을 때 이벤트 발생

submit : submit 버튼이 클릭했을 때 이벤트 발생

5. 이벤트 처리기

웹 문서에서 이벤트가 발생하면 처리하는 함수를 이벤트 처리기 혹은 이벤트 헨들러라고 한다.

<태그 on이벤트명 = "함수명">

* 연습문제 1

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>자바스크립트 이벤트</title>
	<link rel="stylesheet" href="css/event.css">
</head>
<body>
	<div id="item">
		<img src="images/flower.jpg" alt="">
		<button class="over" id="open" onclick="showDetail()">상세 설명 보기</button>
		<div id="desc" class="detail">
			<h4>등심붓꽃</h4>
			<p>북아메리카 원산으로 각지에서 관상초로 흔히 심고 있는 귀화식물이다. 길가나 잔디밭에서 흔히 볼 수 있다. 아주 작은 씨앗을 무수히 많이 가지고 있는데 바람을 이용해 씨앗들을 날려보내거나, 뿌리줄기를 통해 동일한 개체들을 많이 만들어 냄으로써 번식한다. </p>
			<button id="close" onclick="hideDetail()">상세 설명 닫기</button>
		</div>
	</div>	

	<script>
    function showDetail() {
      document.querySelector('#desc').style.display = "block";	// 상세 설명 부분을 화면에 표시
      document.querySelector('#open').style.display = "none";   // '상세 설명 보기' 단추를 화면에서 감춤
    }

    function hideDetail() {
      document.querySelector('#desc').style.display = "none";	   // 상세 설명 부분을 화면에서 감춤
      document.querySelector('#open').style.display = "block";	 // '상세 설명 보기' 단추를 화면에 표시
    }
  </script>
</body>
</html>

6. DOM을 이용한 이벤트 처리

웹요소.onclick = 함수;

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>자바스크립트 이벤트</title>
	<link rel="stylesheet" href="css/event.css">
</head>
<body>
	<div id="item">
		<img src="images/flower.jpg" alt="">
		<button class="over" id="open">상세 설명 보기</button>
		<div id="desc" class="detail">
			<h4>등심붓꽃</h4>
			<p>북아메리카 원산으로 각지에서 관상초로 흔히 심고 있는 귀화식물이다. 길가나 잔디밭에서 흔히 볼 수 있다. 아주 작은 씨앗을 무수히 많이 가지고 있는데 바람을 이용해 씨앗들을 날려보내거나, 뿌리줄기를 통해 동일한 개체들을 많이 만들어 냄으로써 번식한다. </p>
			<button id="close">상세 설명 닫기</button>
		</div>
	</div>	

	<script>		
		document.querySelector('#open').onclick = function() {
			document.querySelector('#desc').style.display = "block";	// 상세 설명 부분을 화면에 표시
			document.querySelector('#open').style.display = "none";   // '상세 설명 보기' 단추를 화면에서 감춤
		}
		document.querySelector('#close').onclick = function() {
			document.querySelector('#desc').style.display = "none";	   // 상세 설명 부분을 화면에서 감춤
			document.querySelector('#open').style.display = "block";	 // '상세 설명 보기' 단추를 화면에 표시
		}				
	</script>
</body>
</html>

앞에 연습문제 1의 html을 dom을 이용해서 이벤트를 처리한 것이다.

지금까지는 html이 중점이 되어 자바스크립트의 함수를 불러와 사용한 것이라면

dom을 사용하면 자바스크립트가 중점이 되어 html 요소를 가져와 이벤트를 처리한다.

위의 소스코드를 보면

728x90

'HTML + CSS + JS' 카테고리의 다른 글

14-1. JS 객체 (객체, 인스턴스, 프로퍼티, 메서드, Array객체, Date 객체, Math 객체), 연습문제 (0)	2021.10.20
13-4. JS 함수 연습문제 (0)	2021.10.19
13-2. JS 함수 (let, const, 재사용 가능한 함수) (0)	2021.10.19
13-1. JS 함수 (지역변수, 전역변수, 호이스팅, 재선언, 재할당) (0)	2021.10.19
12-4. JS 연습문제 1,2 (0)	2021.10.18

💖💗

💖💗

태그

최근글

댓글

공지사항

아카이브

'HTML + CSS + JS' 카테고리의 다른 글

관련글

티스토리툴바