이벤트 리스너 예시 문제 풀이

자바 스크립트(java script)

이벤트 리스너 예시 문제 풀이

lamarcK 2025. 3. 21. 22:04

문제:

다음 HTML 코드와 JavaScript 코드를 보고, 입력 필드에 텍스트를 입력하고 "확인" 버튼을 클릭했을 때 어떤 일이 발생하는지 설명하고, 코드를 개선할 수 있는 부분을 찾아 설명하세요.

HTML 코드:

<!DOCTYPE html>
<html>
<head>
  <title>이벤트 학습 문제</title>
</head>
<body>
  <input type="text" id="myInput">
  <button id="checkButton">확인</button>
  <p id="result"></p>
  <script src="script.js"></script>
</body>
</html>

JavaScript 코드 (script.js):

const input = document.getElementById('myInput');
const button = document.getElementById('checkButton');
const result = document.getElementById('result');

button.onclick = function() {
  const inputValue = input.value;
  result.textContent = '입력된 값: ' + inputValue;
};

우선 선언된 변수는 3가지 각각

myInput, checkButton, result라는 아이디를 가진 변수를 끌어왔다.

데이터 타입은 텍스트, 버튼, 단락이다.

input 태그는 타입을 텍스트로 설정하여 텍스트를 입력할 수 있도록 했다.

확인 버튼을 누를 경우 <p>에 입력된 텍스트가 '입력된 값: ' + input에 입력된 값 으로 변경된다.

여기에서 이벤트 리스너와 핸들러를 분리시켜야한다.

아래처럼 handleClick이라는 함수 (이벤트 핸들러) 를 만들고

checkButton에서 클릭이라는 행위를 받아오는 addEventListener('click', handleClick); 이벤트 리스너를 만든다.

// 버튼 클릭 시 실행될 함수
function handleClick() {
  const inputValue = input.value;
  result.textContent = '입력된 값: ' + inputValue;
}

// 버튼 클릭 이벤트 리스너 등록
checkButton.addEventListener('click', handleClick);

결과적으로 코드는 아래와 같이 변경된다.

const input = document.getElementById('myInput');
const button = document.getElementById('checkButton');
const result = document.getElementById('result');

// 버튼 클릭 시 실행될 함수
function handleClick() {
  const inputValue = input.value;
  result.textContent = '입력된 값: ' + inputValue;
}

// 버튼 클릭 이벤트 리스너 등록
checkButton.addEventListener('click', handleClick);