코드 그라데이션

14. 문서 객체 모델 (2) DOM에서 이벤트 처리하기 본문

Front/Mega-JavaScript

14. 문서 객체 모델 (2) DOM에서 이벤트 처리하기

완벽한 장면 2023. 5. 24. 00:50

DOM에서 이벤트 처리하기

  • 웹 문서에서 이벤트가 발생하면 이벤트 처리기를 연결해야 한다.
  • HTML 태그에서 이벤트 처리기를 연결할 수 있지만, 태그와 스크립트 소스가 섞여 있어서 복잡한 프로그램에는        적합하지 않다.
  • 이럴 때 DOM에서 이벤트 처리기를 연결하면 HTML 태그와 스크립트 소스 분리 가능

 

DOM 요소에 직접 함수 연결하기

  • 이벤트 처리기 함수가 간단하다면 DOM 요소에 직접 연결할 수 있다.

ex. 이미지를 클릭하면 알림 창 표시하기

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>DOM event 객체</title>
  <style>
    #container {
      width:300px;
      margin:10px auto;
    }
  </style>
</head>
<body>
  <div id="container">
    <img src="images/cup-1.png" id="cup">		
  </div>

	<script>
		var cup = document.querySelector("#cup");  // id = cup인 요소를 가져옴
    cup.onclick = function(){
      alert("이미지를 클릭했습니다");
    }
	</script>
</body>
</html>

실행 결과

 

함수 이름을 사용해 연결하기

  • 이벤트가 발생했을 때 실행할 함수를 따로 정의해 두었다면 함수 이름을 사용해 연결할 수 있다.
  • 이 경우 함수 이름 다음에 괄호를 추가하지 않는다.

예제 - 이미지를 cup 함수로 저장한 후 click 이벤트가 발생하면 changePic() 함수 실행하기

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>DOM event 객체</title>
  <style>
    #container {
      width:300px;
      margin:10px auto;
    }
  </style>
</head>
<body>
  <div id="container">
    <img src="images/cup-1.png" id="cup">		
  </div>

	<script>
		var cup = document.querySelector("#cup");  // id = cup인 요소를 가져옴
    cup.onclick = changePic;  // cup을 클릭하면 changePic 함수 실행
    
    function changePic() {
      cup.src = "images/cup-2.png";
		}
	</script>
</body>
</html>

 

실행 결과

 

예제 3 - 이미지에서 클릭한 위치 알아내기

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>DOM event 객체</title>
	<style>
    #container {
      width:300px;
      margin:10px auto;
    }
  </style>
</head>
<body>
	<div id="container">
    <img src="images/cup-1.png" id="cup">		
  </div>	

	<script>
		var cup = document.querySelector("#cup");  // id = cup인 요소를 가져옴
		cup.onclick = function(event) {
			alert("이벤트 유형: " + event.type + ", 이벤트 발생 위치 : " + event.pageX + "," + event.pageY);	
		}
	</script>
</body>
</html>

 

실행 결과

 

 

 

event 객체의 주요 프로퍼티와 메서드

 

 

  • event 객체에는 이벤트 정보만 들어 있다.
  • 만약 이벤트가 발생한 대상에 접근하려면 이벤트 처리기에서 예약어 this를 사용해야 한다.

 

 

addEventListener() 메서드 사용하기

  • 지금까지 살펴본 이벤트 처리기는 한 요소에 하나의 이벤트 처리기만 연결할 수 있다.
  • addEventListener() 메서드와 event 객체를 사용하면 한 요소에 여러 이벤트 처리기를 연결해 실행할 수 있다.
  • addEventListener() 메서드는 끝에 세미콜론을 꼭 붙여야 한다.

 

예제 - 이미지 위로 마우스 포인터를 올려놓으면 다른 이미지로 바뀌었다가, 내려놓으면 다시 원래 이미지로 돌아옴.

실행 흐름

- 이미지 위로 마우스 포인터를 올려놓으면 다른 이미지로 바뀌었다가

  내려놓으면 다시 원래 이미지로 돌아옴.

- addEventListener() 메서드를 사용해서 changePic() 함수를 이벤트 처리기로 활용한다.

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>DOM event 객체</title>
  <style>
    #container {
      width:300px;
      margin:10px auto;
    }
  </style>
</head>
<body>
	<div id="container">
		<img src="images/easys-1.jpg" id="cover">	
  </div>
  
	<script>
		var cover = document.getElementById("cover");
		cover.addEventListener("mouseover",changePic, false);
    cover.addEventListener("mouseout",originPic, false);
    
    function changePic() {
      cover.src = "images/easys-2.jpg";
    }
    function originPic() {
      cover.src = "images/easys-1.jpg";
    }
	</script>
</body>
</html>
  • 단순히 이벤트만을 처리하는 함수라면, 메서드 안에서 함수 표현식으로 사용하는 경우가 많다.

정리된 코드

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>DOM event 객체</title>
  <style>
    #container {
      width:300px;
      margin:10px auto;
    }
  </style>
</head>
<body>
	<div id="container">
		<img src="images/easys-1.jpg" id="cover">	
  </div>
  
	<script>
		var cover = document.getElementById("cover");
		cover.addEventListener("mouseover",function() {
      cover.src = "images/easys-2.jpg";
    });
    cover.addEventListener("mouseout", function() {
      cover.src = "images/easys-1.jpg";
    });  
	</script>
</body>
</html>

 

실행 결과

 

 

 

CSS 속성에 접근하기

  • CSS 속성에 접근하려면 해당 스타일이 적용된 HTML 요소 다음에 예약어 style을 쓰고 속성을 적는다.

 id가 desc 인 요소의 글자색 바꾸기

document.getElementById("desc).style.color ="blue";

- 한 단어인 속성명은 그대로 사용하면 되지만 단어 중간에 하이픈이 있는 속성은 두 단어를 합쳐서 사용한다.

(camelCase)

 

 

예제  - 사각형 위에 마우스 포인터 얹으면 초록색 원으로 바꾸고, 내려놓으면 원래 도형으로 되돌아감

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>DOM CSS</title>
	<style>
		#container {
			width:400px;
			margin:50px auto;
			text-align: center;
		}
		#rect {
			width:100px;
			height:100px;			
			border:1px solid #222;
			margin:30px auto;
			transition: 1s;
		}
	</style>
</head>
<body>
	<div id="container">
		<p>도형 위로 마우스 포인터를 올려놓으세요.</p>
		<div id="rect"></div>
	</div>	
	
	<script>
		var myRect = document.querySelector("#rect");
		myRect.addEventListener("mouseover", function() {  // 마우스 포인터를 올리면
			myRect.style.backgroundColor = "green";  // 초록색으로 지정
			myRect.style.borderRadius = "50%";  // 테두리를 50%로 지정
		});
		myRect.addEventListener("mouseout", function() {  // 마우스 포인터를 내리면
			myRect.style.backgroundColor = "";  // 배경색 원래 값으로 지정
			myRect.style.borderRadius = "";  // 테두리 원래 값으로 지정
		});
	</script>
</body>
</html>

 

실행 결과

 

728x90

'Front > Mega-JavaScript' 카테고리의 다른 글

배열 내장 함수  (0) 2024.04.09
15. 문서 객체 모델 (3) DOM에 노드 추가/삭제하기  (0) 2023.05.24
13. 문서 객체 모델 (1) 기본 개념  (0) 2023.05.23
12. 자바스크립트와 객체 (2) 브라우저와 관련된 객체  (0) 2023.05.21
11. 자바스크립트와 객체 (1) 객체의 의미와 내장 객체  (0) 2023.05.21
'Front/Mega-JavaScript' Related Articles more
Comments