JavaScript 입력 값 변경
이 짧은 자습서에서는 JavaScript에서 addEventListener의 활용에 대해 설명합니다.
JavaScript의 input 이벤트
입력 이벤트는 다음 유형의 HTML 요소와 연결됩니다.
- 입력 유형 - 텍스트 필드, 라디오 및 확인란
- 텍스트 영역 유형
- 드롭다운 또는 유형 선택
이러한 요소의 값이 변경될 때마다 input 이벤트가 발생합니다. 요소 값이 변경될 때마다 input 이벤트가 트리거되는 input 이벤트와 change 이벤트 간에 상당한 차이가 있지만 change 이벤트는 요소가 포커스를 잃을 때만 실행됩니다.
또한 입력 및 텍스트 영역 요소와 관련된 이벤트 인터페이스는 InputEvenet입니다. 다른 요소 유형의 경우 일반적인 Event 인터페이스가 됩니다.
JavaScript 이벤트 리스너를 사용한 입력 이벤트
사용자 상호 작용 시 대상에서 이벤트가 발생할 수 있습니다. 웹 API를 사용하면 대상 요소에서 발생한 지정된 이벤트에 따라 함수가 호출되는 이벤트 리스너를 등록할 수 있습니다.
다음은 input 유형 이벤트에 대한 이벤트 리스너를 등록하는 기본 구문입니다.
통사론:
addEventListener(event_type, listener);
event_type 매개변수는 문자열 표현으로서의 이벤트 유형입니다. 이 시나리오에서 이벤트 유형은 입력입니다.
리스너는 이벤트가 발생하면 호출되는 JavaScript 함수입니다. 이 함수 또는 개체는 지정된 이벤트가 트리거되면 즉시 알림을 받습니다.
다음과 같이 입력 및 단락 요소가 있는 간단한 HTML 페이지를 만들어 보겠습니다.
코드 - HTML:
<html>
<head>
</head>
<body>
<input placeholder="your name" name="name"/>
<p id="nameList"></p>
<script type="text/javascript" src="inputev.js"></script>
</body>
</html>
또한 inputev.js JavaScript 파일을 HTML 페이지에 연결했습니다. JavaScript 로직을 사용하여 입력 요소에 대한 이벤트 리스너를 등록해 보겠습니다.
코드 - inputev.js:
// make the link to the element objects
const inputField = document.querySelector('input');
const displayAreaField = document.getElementById('nameList');
// adding the event listener for input event type
inputField.addEventListener('input', addNames);
// addNames is the function to be called
function addNames(inputevent) {
displayAreaField.textContent = inputevent.target.value;
}
위의 예에 따라 입력 필드에 대한 이벤트 리스너를 등록하고 이벤트가 발생할 때 호출할 함수를 전달했습니다. 이 경우 콜백 함수는 addNames입니다.
예제 코드를 실행하면 입력한 문자가 텍스트 필드 아래에 나타납니다.
언급된 input 이벤트 및 이벤트 리스너 기술은 Web API가 고도의 대화형 애플리케이션에서 제공하는 유용한 기능입니다.
Nimesha is a Full-stack Software Engineer for more than five years, he loves technology, as technology has the power to solve our many problems within just a minute. He have been contributing to various projects over the last 5+ years and working with almost all the so-called 03 tiers(DB, M-Tier, and Client). Recently, he has started working with DevOps technologies such as Azure administration, Kubernetes, Terraform automation, and Bash scripting as well.