[JavaScript] 폼 요소 이벤트 정리 및 예제

안녕하세요. 자바스크립트는 마우스 이벤트, 키보드 이벤트, 폼요소 이벤트 등 많은 종류의 이벤트가 있는데요, 오늘은 이벤트 종류 중에서 Form 태그와 함께 사용되는 폼 요소 이벤트를 정리하고, 해당 이벤트들에 대한 예제를 만들어보려고 합니다.

 

1. 이벤트란?

 

우선 자바스크립트의 이벤트가 무엇일까요? 모던자바스크립트와 모질라 사이트에서는 이벤트에 대해 아래와 같이 설명하고 있습니다. 

이벤트(event)는 무언가 일어났다는 신호입니다. 모든 *DOM *노드는 이런 신호를 만들어 냅니다. 참고로, 이벤트는 *DOM에만 한정되진 않습니다.
출처: https://ko.javascript

이벤트(event)란 여러분이 프로그래밍하고 있는 시스템에서 일어나는 사건(action) 혹은 발생한 것(occurrence)입니다. 
출처: https://developer.mozilla.org

*DOM:문서 객체 모델(The Document Object Model) 
*노드: DOM(Document Object Model)의 계층적 단위.
(W3C HTML DOM 표준에 따르면, HTML 문서의 모든 것은 노드라고 함 예: 주석노드,문서 노드, 속성 노드 등.. )

이벤트는 UI와의 상호작용으로 나타날 수 도 있으며 ( 예: 버튼 클릭 ) 그 외의 상황에도 나타날 수 있습니다. (예: 문서 로드, 오류 발생 등등) 중요한 것은 이벤트는 무언가 발생했다는 것을 의미한다는 것입니다.

 

이벤트에 반응하기 위해서는 이벤트 발생 시에 실행되는 함수인 '이벤트 핸들러(event handler)'를 할당해야합니다. 

핸들러란 이벤트에 어떻게 반응할지를 자바스크립트 코드로 표현한 것입니다. 이벤트 핸들러는 여러 가지 방법으로 할당할 수 있으며, 이때 우리는 이벤트 핸들러를 등록(register)했다고 이야기합니다.

 

그럼 이제 폼요소 이벤트를 등록하기 전, 폼요소와 함께 폼요소 이벤트에는 어떤 것들이 있는지 살펴봅시다.

 

2. 폼 요소

 

폼 요소(Form elements)는 HTML 문서에서 사용자로부터 데이터를 입력받기 위해 사용되는 요소들을 말합니다. 이러한 폼 요소들은 웹 페이지에서 다양한 종류의 입력 필드를 생성하고, 데이터를 서버로 전송하거나 클라이언트 측에서 JavaScript를 사용하여 처리할 수 있도록 도와줍니다. 일반적으로 많이 사용되는 폼 요소에는 다음과 같은 것들이 있습니다:

1. <input>: 사용자로부터 텍스트, 숫자, 이메일, 패스워드 등 다양한 종류의 입력을 받을 수 있는 입력 필드입니다.
2. <textarea>: 여러 줄의 텍스트를 입력받을 수 있는 입력 필드입니다.
3. <select>: 드롭다운 목록을 생성하여 사용자가 항목을 선택할 수 있게 해줍니다.
4. <checkbox>: 여러 개의 선택 사항 중에서 여러 개를 선택할 수 있는 체크 박스를 생성합니다.
5. <radio>: 여러 개의 선택 사항 중에서 하나만 선택할 수 있는 라디오 버튼을 생성합니다.
6. <button>: 클릭 가능한 버튼을 생성합니다.
7. <submit>: 폼을 서버로 제출하는 역할을 하는 버튼입니다.
8. <label>: 폼 요소에 대한 설명이나 레이블을 추가합니다

이 외에도 여러가지 폼요소 태그들이 있습니다.

 

3. 폼 요소 이벤트 

이벤트	이벤트 설명
change	요소 변경이 끝나면 발생. (1.텍스트 입력 요소인 경우에는 요소 변경이 끝날 때가 아니라 포커스를 잃을 때 이벤트가 발생) (2.select와 input type=checkbox,input type=radio는 선택 값이 변경된 직후에 이벤트가 발생)
focus	요소에 포커스가 이동할 때 발생
blur	요소가 포커스를 잃을 때 발생
input	사용자가 값을 수정할 때마다 발생 (어떤 방법으로든 값을 변경할 때 발생. 단, 값을 변경시키지않는 키보드 입력 등에는 반응하지않는다.)
copy cut paste	(cut, copy, paste 이벤트는 각각 값을 잘라내기·복사하기·붙여넣기 할 때 발생)
		reset	폼이 재설정(모든 입력 상태를 초기화)될 때 발생.
		submit	폼이 제출될 때 발생.

이 외에도 텍스트 선택 시 발생하는 select등이 있습니다.

 

이제 각 이벤트의 예제를 살펴봅시다. (copy,cut,paste 제외)

 

예제1. change 와 input.

 

change 이벤트와 input 이벤트는 발생 시기가 다릅니다. 위에서 서술하였 듯 change 이벤트의 경우, '변경 후' 포커스를 잃을 때 발생하며, input 이벤트는 작성 시 바로 발생하게 됩니다.

 

 

change_input.html

 

<div class="frame"> 
  <div class="in">
    <label>input 이벤트:</label>
    <input type="text" id="myInput">
    <label>change 이벤트:</label>
    <input type="text" id="myChange">
  </div>
  <div class="out">
    <h4 id="print"></h4>
  </div>
</div>

 

change_input.js

 

const inputElement = document.getElementById('myInput');
const changeElement = document.getElementById('myChange');
const printElement = document.getElementById('print');

inputElement.addEventListener('input', function(event) {
  if(inputElement.value.length==0){
    printElement.textContent ="";
  }else{
   printElement.textContent = 'input 이벤트 발생:'+inputElement.value;
  }
});

changeElement.addEventListener('change', function(event) {
  if(changeElement.value.length==0){
   printElement.textContent = ""; 
  }else{
    printElement.textContent = 'change 이벤트 발생:'+changeElement.value;
  }
});

change_input.css

 

.frame {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.in {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 20px;
}

.in label {
  margin-bottom: 10px;
}

.in input {
  margin-bottom: 20px;
  padding: 5px;
  border-radius: 5px;
  border: 1px solid gray;
}

.out {
  display: flex;
  justify-content: center;
  align-items: center;
}

#print {
  font-size: 18px;
  font-weight: bold;
  color: navy;
}

 

예제2. focus 와 blur 

 

focus는 포커스를 받을 때, 그리고 blur는 포커스를 잃을 때 발생한다고 말씀드렸습니다. (*change는 입력 값이 변화 한 후 포커스를 잃어야 발생하나 blur는 폼 요소 값 변경 여부와 관계없이 포커스를 잃으면 항상 이벤트가 발생.)

작성시에 input란에 배경색을 지정해주고, 포커스가 떠나면 다시 배경을 하얀색으로 바꿔주는 예제입니다.

 

 

focus_blur.html

 

<input type="text" id="name" placeholder="이름을 입력하세요">
<input type="text" id="nickname" placeholder="닉네임을 입력하세요">

focus_blur.js

 

const name = document.getElementById('name');
const nickname = document.getElementById('nickname');

change(nickname);//닉네임 필드에 적용
change(name);//이름 필드에 적용


function change(inputElement){
    
  inputElement.addEventListener('focus', function(event) {
      // 입력 필드에 포커스가 진입했을 때 동작
      inputElement.style.backgroundColor = 'lightblue';
    });

    inputElement.addEventListener('blur', function(event) {
      // 입력 필드에서 포커스가 벗어났을 때 동작
      inputElement.style.backgroundColor = 'white';
    });
}

 

 

예제3. reset

 

버튼에 type="reset" 속성을 적어놓았습니다.

버튼 클릭 시 사용자가 적은 내용을 value에 있는 값으로 초기화하는 모습을 확인할 수 있습니다. 

 

값 초기화

 

reset.html 

 

<form id="myForm">
    <label for="name">이름:</label>
    <input type="text" id="name" value="김예제"><br>
    <label for="email">이메일:</label>
    <input type="email" id="email"value="sample@example.com"><br>
    <button type="reset">초기화</button>
</form>

 

reset.js

 

const formElement = document.getElementById('myForm');
formElement.addEventListener('reset', function(event) {
      // 이벤트 발생 시 폼 요소의 입력값을 초기화
      formElement.reset();
});

 

예제4 submit

 

submit 이벤트가 발생할 때 다음과 같은 동작을 수행할 수 있습니다:

1. 폼 데이터 유효성 검사: submit 이벤트가 발생하면 폼 데이터의 유효성을 검사할 수 있습니다. 이를 통해 필수 필드가 작성되었는지, 형식이 올바른지 등을 확인할 수 있습니다. 필요한 경우 사용자에게 오류 메시지를 표시하거나 입력 필드를 강조 표시할 수 있습니다.
2. 서버로 데이터 전송: submit 이벤트가 발생하면 폼 데이터를 서버로 전송할 수 있습니다. 이를 위해 AJAX를 사용하여 비동기적으로 데이터를 전송하거나, 폼의 action 속성을 활용하여 페이지를 다시 로드하거나 다른 페이지로 이동할 수 있습니다.
3. 추가 동작 수행: submit 이벤트가 발생할 때 추가적인 동작을 수행할 수 있습니다. 예를 들어, 입력된 데이터를 로컬 스토리지에 저장하거나, 외부 API와 통신하여 추가 데이터를 가져오는 등의 동작을 수행할 수 있습니다.
4. 기본 동작 방지: submit 이벤트 핸들러 내에서 event.preventDefault()를 호출하여 기본 동작을 방지할 수 있습니다. 이를 통해 폼의 제출을 막거나 커스텀 동작을 수행할 수 있습니다.

그러나 이번 예제에서는 submit 시 입력 값이 있는 경우 아래에 출력할 수 있도록 해보겠습니다. 

 

 

submit.html

 

<form id="myForm">
    <label for="name">이름:</label>
    <input type="text" id="name" name="name"><br>

    <label for="email">이메일:</label>
    <input type="email" id="email" name="email"><br>

    <button type="submit">제출</button>
  </form>
<div id="print"></div>

 

submit.js

 

const formElement = document.getElementById('myForm');

formElement.addEventListener('submit', function(event) {
  //submit 이벤트 발생 시 폼 제출 동작
  event.preventDefault(); // 기본 동작 방지

  // 폼 데이터 수집
  const formData = new FormData(formElement);
  const name = formData.get('name');
  const email = formData.get('email');

  //값이 모두 입력된 경우
  if(name.length>0&&email.length>0){
   document.getElementById('print').innerHTML= 
      '이름:'+name+"/이메일:"+email;
   //추가 동작 수행 가능.
  }else{
    //값이 없을 시 submit X 
    return false;
  }
});

 

잘못 된 정보가 있는 경우 말씀드립니다. 위 정보는 아래 링크들을 참조하였으니

+자세한 내용은 아래글 참고 부탁드립니다. 

https://ko.javascript.info/introduction-browser-events

브라우저 이벤트 소개

https://developer.mozilla.org/ko/docs/Web/API/Event

Event - Web API | MDN

http://www.tcpschool.com/javascript/js_dom_concept

코딩교육 티씨피스쿨

https://ko.javascript.info/events-change-input

이벤트: change, input, cut, copy, paste