HTML 입력 요소에서 사용자가 값을 입력할 때마다 실시간으로 반응하고 싶다면 oninput 속성 대신 JavaScript의 document.getElementById()와 addEventListener() 메서드를 함께 사용하면 됩니다. 이 방식은 HTML과 JavaScript 코드를 분리할 수 있어 유지보수 측면에서도 더욱 효율적입니다.
예제 코드
아래는 input 요소에 'input' 이벤트 리스너를 추가하는 전체 HTML 예제입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<label> 값을 입력하세요:</label>
<input id="enterValue" type="text">
</body>
<script>
document.getElementById('enterValue').addEventListener("input", function () {
console.log('값이 입력되었습니다');
});
</script>
</html>코드 설명
document.getElementById('enterValue'): id가 'enterValue'인 input 요소를 가져옵니다.addEventListener("input", ...): 해당 요소에 'input' 이벤트 리스너를 등록합니다. 사용자가 입력 필드에 값을 입력할 때마다 콜백 함수가 실행됩니다.- 콜백 함수 내부의
console.log()는 값이 입력될 때마다 콘솔에 메시지를 출력합니다.
실행 방법
위 프로그램을 실행하려면 파일 이름을 anyName.html(index.html)로 저장한 후, VS Code 편집기에서 해당 파일을 마우스 오른쪽 버튼으로 클릭하고 'Open with Live Server' 옵션을 선택하면 됩니다.
실행 결과
페이지를 열면 다음과 같이 입력 필드가 표시됩니다.
사용자가 값을 입력하면 −
입력이 발생하는 순간마다 브라우저 개발자 도구(F12)의 콘솔 탭에 '값이 입력되었습니다'라는 메시지가 출력되는 것을 확인할 수 있습니다. 이처럼 addEventListener()를 활용하면 oninput 속성을 직접 HTML에 작성하지 않고도 동일한 기능을 구현할 수 있습니다.