[JS] Input 이벤트

안녕하세요! 오늘은 JavaScript에서 Input 요소와 관련된 이벤트들에 대해 알아보려고 해요. 우리가 웹 페이지에서 사용자가 입력하는 부분, 즉 텍스트 필드나 검색창 등을 다룰 때 이 이벤트들이 정말 중요해요. 사용자가 값을 입력하거나, 수정할 때 즉시 반응하는 기능을 구현할 때 주로 쓰이는 이벤트들이에요.

 

 

 

JavaScript Input 관련 이벤트

 

Input 관련 이벤트

 

1. 자주 쓰는 Input 관련 이벤트

2. Input 이벤트 관련 Tip

3. 실전 코딩해보기

4. 마무리

추천글

 

 

자주 쓰는 Input 관련 이벤트

1. input
   input 이벤트는 사용자가 입력 필드에 값을 입력할 때마다 발생하는 이벤트입니다. 값이 바뀔 때마다 실시간으로 발생하므로, 검색창에서 입력한 값에 맞춰 바로 결과를 처리할 때 주로 사용합니다.
   

   document.querySelector('#myInput').addEventListener('input', function(event) {
       console.log(`현재 입력된 값: ${event.target.value}`);
   });

2. change
   change 이벤트는 사용자가 입력을 완료하고 포커스가 다른 곳으로 이동했을 때 발생합니다. 즉, 값이 변경되고 입력이 끝난 후에 발생하는 이벤트입니다. 입력을 실시간으로 처리하는 input과 다르게 입력이 끝났을 때 최종적으로 동작을 원하면 사용합니다.
   

   document.querySelector('#myInput').addEventListener('change', function(event) {
       console.log(`입력이 완료된 값: ${event.target.value}`);
   });

    
3. focus
   focus 이벤트는 사용자가 특정 입력 필드에 포커스를 맞췄을 때 발생합니다. 쉽게 말해, 사용자가 해당 필드를 클릭하거나 Tab 키로 이동해왔을 때를 감지하는 이벤트입니다. 이 이벤트는 주로 입력 필드에 진입했을 때 안내 메시지를 띄우거나 스타일을 변경할 때 사용합니다.
   

   document.querySelector('#myInput').addEventListener('focus', function() {
       console.log('입력 필드에 포커스가 맞춰졌어요!');
   });

4. blur
   blur 이벤트는 focus의 반대 개념입니다. 입력 필드가 포커스를 잃을 때, 즉 사용자가 다른 곳을 클릭하거나 다른 필드로 이동할 때 발생합니다. 주로 입력 필드를 벗어났을 때 검증을 하거나 스타일을 원래대로 돌릴 때 많이 사용합니다.
   

   document.querySelector('#myInput').addEventListener('blur', function() {
       console.log('입력 필드에서 포커스가 사라졌어요!');
   });

5. focusin & focusout
   focusin과 focusout은 각각 focus와 blur와 비슷하지만, 차이점은 버블링이 된다는 점입니다. 즉, 부모 요소에서도 자식의 포커스 변화를 감지할 수 있습니다. focus와 blur는 버블링이 일어나지 않지만, focusin과 focusout은 버블링이 일어나서 이벤트가 상위 요소로 전달됩니다.
   

   document.querySelector('#form').addEventListener('focusin', function() {
       console.log('포커스가 입력 필드로 들어왔습니다.');
   });
   
   document.qeurySelector('#form').addEventListener('focusout', function() {
       console.log('포커스가 입력 필드를 벗어났습니다.');
   });

Input 이벤트 관련 Tip

1. preventDefault()로 기본 동작 막기
   입력 필드에서 발생하는 몇몇 이벤트는 브라우저의 기본 동작이 있을 수 있습니다. 예를 들어, Enter 키를 눌렀을 때 폼이 전송되는 기본 동작을 막고 싶다면, 이벤트 핸들러 안에서 event.preventDefault()를 사용해 기본 동작을 막을 수 있습니다.
   

   document.qeurySelector('#myInput').addEventListener('keydown', function(event) {
       if (event.key === 'Enter') {
           event.preventDefault(); // Enter로 폼 제출을 방지
           console.log('Enter 키로 제출 동작을 막았습니다!');
       }
   });

   
   
   
2. Debouncing
   사용자가 입력하는 동안 이벤트가 너무 자주 발생하는 경우 성능 문제가 생길 수 있습니다. 이럴 때 디바운싱(debouncing)을 사용하면, 사용자가 입력을 멈춘 후에만 이벤트가 트리거되게 처리해 성능을 향상 시킬 수 있습니다.
   

   let debounceTimeout;
   document.querySelector('#myInput').addEventListener('input', function(event) {
       clearTimeout(debounceTimeout);
       debounceTimeout = setTimeout(function() {
           console.log('입력이 끝난 후 실행됩니다:', event.target.value);
       }, 300);
   });

 

실전 코딩해 보기

input 이벤트가 입력 값이 바뀔 때마다 실시간으로 발생하는 점을 이용해서 검색 관련 예제를 만들어 봤습니다.

실시간으로 입력되는 검색어가 아이템 "js", "javascript", "dev", "develop", "developer"를 포함하면 해당하는 내용만 리스트에 보여주는 예제입니다.

 

See the Pen input-event by 강수민 (@rtrnknpb-the-solid) on CodePen.

 

 

 

 

 

정리

JavaScript의 input 관련 이벤트는 사용자의 입력을 실시간으로 감지하고, 그에 따라 동작을 처리하는 데 아주 유용해요. input 이벤트로 실시간 처리를 하거나, change, focus, blur 등으로 특정 시점에 맞춰 동작을 처리할 수 있습니다. 다양한 이벤트를 잘 활용하면, 사용자 경험을 더 향상하는 유용한 기능을 쉽게 구현할 수 있습니다. 입력 이벤트를 직접 사용해 보면서 재미있는 기능을 추가해 보세요!

 

 

 

추천글

2024.09.11 - [개발 공부 일지/JavaScript] - [JS] 키보드 이벤트

[JS] 키보드 이벤트

2024.09.10 - [개발 공부 일지/JavaScript] - [JS] 이벤트 버블링과 캡처링

[JS] 이벤트 버블링과 캡처링