[Web/JS] 자바스크립트 - DOM에서 이벤트 처리

티스토리 뷰

Front-end/JS

[Web/JS] 자바스크립트 - DOM에서 이벤트 처리

poopooreum 2024. 5. 16. 19:03

✏️ 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>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 변수로 저장한 후 이벤트가 발생했을 때 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>

빨간 컵을 클릭하면 파란색 컵으로 색깔이 변경됩니다.

✏️ DOM의 event 객체

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

이미지를 클릭하면 알림 창에 클릭한 위치가 나오게 하는 예제입니다.

<!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 객체에는 이벤트 정보만 들어있어서 이벤트가 발생한 대상에 접근하기 위해서는 this라는 예약어를 사용해야 합니다. 아래 예제 코드는 this를 사용하여 이미지 클릭시 이미지의 경로를 알려주는 예제입니다.

<!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.getElementById("cup");
    cup.onclick = function(event) {
       alert("클릭한 이미지 파일 : " + this.src);
    }
  </script>
</body>
</html>

✏️ CSS 속성 접근

자바스크립트를 이용하면 스타일 속성값을 가져와서 그 값을 원하는 대로 수정할 수 있습니다. 그 중 CSS 속성에 접근하기 위해서는 해당 스타일이 적용된 HTML 요소 다음에 예약어 style을 쓰고 속성을 적으면 됩니다.

기본형 => documnet.요소명.style.속성명

// 다음은 id가 desc인 요소의 글자를 파란색으로 변경하는 코드입니다.

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

위의 코드에서는 속성이 color같이 한 단어로 되어있는데 만약 background-color나 border-radius 같이 하이픈으로 이어져 있는 속성들은 backgroundColor나 borderRadius처럼 두 단어를 합쳐서 사용하고 두 번째 단어의 첫 글자는 대문자를 사용합니다.

// 다음은 사각형 위에 마우스 포인터를 올려놓으면 초록색 원으로 바뀌고 마우스 포인터를 내려놓으면 원래 도형으로 돌아가게 하는 예제입니다.

<!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() {  // mouseover 이벤트 처리
       myRect.style.backgroundColor = "green";  // myRect 요소의 배경색 
       myRect.style.borderRadius = "50%";  // myRect 요소의 테두리 둥글게 처리
    });
    myRect.addEventListener("mouseout", function() {  // mouseout 이벤트 처리
       myRect.style.backgroundColor = "";  // myRect 요소의 배경색 지우기 
       myRect.style.borderRadius = "";  // myRect 요소의 테두리 둥글게 처리 안 함
   });
  </script>
</body>
</html>

저작자표시 비영리 변경금지

'Front-end > JS' 카테고리의 다른 글

HTML+CSS+자바스크립트 웹 표준의 정석 17장 마무리 문제 (0)	2024.07.02
[Web/JS] 자바스크립트 - DOM에서의 노드 추가 및 삭제 (0)	2024.05.16
[Web/JS] 자바스크립트 - DOM 요소 접근 및 속성 (0)	2024.05.16
[Web/JS] 자바스크립트 - DOM(문서 객체 모델) (0)	2024.05.15
[Web/JS] 자바스크립트 - 브라우저 객체 (0)	2024.05.14

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2025/01 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

글 보관함

푸으름

티스토리 뷰