DOM에서 이벤트 처리하기

📁Web Developing/JavaScript 기초

DOM에서 이벤트 처리하기

Hush 2022. 6. 25. 18:19

HTML 태그에서 이벤트 처리기를 연결핼 수도 있지만 태그와 스크립트 소스가 섞여 있어서 복잡한 프로그램에는 적합하지 않다.

이럴 때 DOM 에서 이벤트 처리기를 연결하면 HTML 태그와 스크립트 소스를 분리할 수 있다.

여기에서는 DOM의 이벤트 처리 방법을 알아보겠다.

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

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

예를 들어 다음 예제는 img 요소를 가져와 변수에 저장한 후 onclick을 사용해 변수에 이벤트 처리기(함수)를 직접 연결한다.

이미지를 클릭하면 알림 창이 나타나지만 이미지 외의 다른 곳을 클릭하면 실행되지 않는다.

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>innerText, innerHTML 프로퍼티</title>
</head>
<body>
	<img src="images/EiffleTower.jpg" alt="ET" id="et">
	<script>
		var et=document.querySelector("#et")
		et.onclick = function(){
			alert("이미지를 클릭했습니다");
		}
	</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>innerText, innerHTML 프로퍼티</title>
</head>
<body>
	<img src="images/EiffleTower.jpg" alt="ET" id="et">
	<script>
		var et=document.querySelector("#et")
		et.onclick = AlertClick;
		
		function AlertClick(){
			alert("이미지를 클릭했습니다");
		}
	</script>
</body>
</html>

DOM의 event 객체 알아보기

DOM에는 이벤트 정보를 저장하는 event 객체가 있다.

이 객체에는 웹 문서에서 이벤트가 발생한 요소가 무엇인지, 어떤 이벤트가 발생했는지 등의 정보가 들어있다.

다음은 이미지에 발생한 이벤트의 유형과 위치를 알림 창으로 보여 주는 예제이다.

여기에서 img요소를 클릭하면 그 위치를 확인하기 위해 event 객체를 함수의 인자로 사용한다.

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>innerText, innerHTML 프로퍼티</title>
</head>
<body>
	<img src="images/EiffleTower.jpg" alt="ET" id="et">
	<script>
		var et=document.querySelector("#et");
		et.onclick = function(event) {
			alert("이벤트 유형: "+event.type + ", 이벤트 발생 위치: " + event.pageX + "," + event.pageY);
		}
	</script>
</body>
</html>

다음 표는 event 객체의 주요 프로퍼티와 메서드를 정리한 것이다.

구분		설명
프로퍼티	altKey	이벤트가 발생할 때 Alt를 눌렀는지 여부를 boolean 값으로 반환
	button	마우스에서 누른 버튼의 키값을 반환
	charCode	keypress 이벤트가 발생할 떄 어떤 키를 눌렀는지 유니코드 값으로 반환
	clientX	이벤트가 발생한 가로 위치를 반환
	clientY	이벤트가 발생한 세로 위치를 반환
	ctrlKey	이벤트가 발생했을 떄 Ctrl을 눌렀는지 여부를 boolean 값으로 반환
	pageX	현재 문서 기준으로 이벤트가 발생한 가로 위치를 반환
	pageY	현재 문서 기준으로 이벤트가 발생한 세로 위치를 반환
	screenX	현재 화면 기준으로 이벤트가 발생한 가로 위치를 반환
	screenY	현재 화면 기준으로 이벤트가 발생한 세로 위치를 반환
	shiftKey	이벤트가 발생할 때 Shift를 눌렀는지 여부를 boolean 값으로 밯놘
	target	이벤트가 최초로 발생한 대상을 반환
	timeStamp	이벤트가 발생한 시간을 반환
	type	발생한 이벤트 이름을 반환
	which	키보드와 관련된 이벤트가 발생할 때 키의 유니코드값을 반환
메서드	preventDefault()	이벤트를 취소할 수 있는 경우에 취소

event 객체에는 이벤트 정보만 들어있다.

만약 이벤트가 발생한 대상에 접근하려면 이벤트 처리기에서 예약어 this를 사용해야 한다.

다음 예제처럼 클릭한 이미지의 파일 경로를 알고 싶다면 this.src를 사용한다.

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>innerText, innerHTML 프로퍼티</title>
</head>
<body>
	<img src="images/EiffleTower.jpg" alt="ET" id="et">
	<script>
		var et=document.querySelector("#et");
		et.onclick = function(event) {
			alert("클릭한 이미지 파일 : " + this.src);
		}
	</script>
</body>
</html>

addEventListener() 메서드 사용하기

지금까지 살펴본 이벤트 처리기는 한 요소에 하나의 이벤트 처리기만을 연결할 수 있다.

하지만 다음과 같이 addEventListener() 메서드와 event 객체를 사용하면 한 요소에 여러 이벤트 처리기를 연결해 실행할 수 있다.

addEventListener()메서드는 끝에 세미콜론을 꼭 붙여야 한다.

요소.addEventListner(이벤트, 함수, 캡처 여부);

1. 이벤트: 이벤트 유형을 지정한다. 단 click과 keypress처럼 on을 붙이지 않고 쓴다.

2. 함수: 이벤트가 발생하면 실행할 명령이나 함수를 지정한다. 여기에서 함수를 정의할 때는 event 객체를 인수로 받는다.

3. 캡처 여부: 이벤트를 캡처하는지 여부를 지정하며 기본값은 false이고 true와 false 중에서 선택할 수 있다. ture이면 캡처링, false이면 버블링한다는 의미이다. 이벤트 캡처링은 DOM의 부모 노드에서 자식 노드로 전달되는 것이고, 이벤트 버블링은 DOM의 자식 노드에서 부모 노드로 전달되는 것이다.

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

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

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>innerText, innerHTML 프로퍼티</title>
</head>
<body>
	<img src="images/EiffleTower.jpg" alt="ET" id="et">
	<script>
		var et=document.querySelector("#et");
		et.addEventListener("mouseover",ChangePic);
		et.addEventListener("mouseout",OriginPic);

		
		function ChangePic(event) {
			this.src="images/Lewis.png"
		}
		function OriginPic(event) {
			this.src="images/EiffleTower.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>innerText, innerHTML 프로퍼티</title>
</head>
<body>
	<img src="images/EiffleTower.jpg" alt="ET" id="et">
	<script>
		var et=document.querySelector("#et");
		et.addEventListener("mouseover",function(event) {
			this.src="images/Lewis.png"
		});
		et.addEventListener("mouseout",function(event) {
			this.src="images/EiffleTower.jpg"
		});
	</script>
</body>
</html>

CSS 속성에 접근하기

자바스크립트를 이용하면 스타일 속성값을 가져와서 그 값을 원하는 대로 수정할 수 있다.

자바스크립트에서는 각 요소의 스타일을 자유롭게 수정할 수 있으므로 웹 문서에서 다양한 효과를 만들 수 있다.

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

document.요소명.style.속성명

예를 들어 id가 desc인 요소의 글자를 파란색으로 변경하려면 다음과 같이 작성한다.

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

이렇게 color처럼 한 단어인 속성명은 그대로 사용하면 되지만 background-color, border-radius처럼 중간에 하이픈이 있는 속성은 backgroundColor나 borderRadius처럼 두 단어를 합쳐서 사용한다.

이때 두 번째 단어의 첫 글자는 Color와 Radius처럼 대문자로 표시한다.

+form 요소에 접근하는 특별한 프로퍼티와 메서드

input과 같은 form 요소에 쉽게 접근하기 위해 DOM은 특별한 프로퍼티와 메서드를 제공한다.

element = document.forms.nameOfElement

위의 기본형의 nameOfElement에 접근하고자 하는 폼 요소의 name 속성값을 넣어주면 폼 요소에 바로 접근할 수 있다.

태그 구조나 class, id 속성을 거치지 않고 오직 name으로만 폼 요소에 접근할 수 있다는 점에서 간편하게 쓰일 수 있다.

자세한 내용은 다음 링크를 참고하자.

https://ko.javascript.info/form-elements

저작자표시 (새창열림)