[JS] 자바스크립트 form 이벤트

 

 

 

 

 

 

 

자바스크립트에서 form의 데이터가 변경될 때 실행되는 이벤트는 change, input, cut, copy, paste가 있다.

 

 

1. Change

change 이벤트는 요소 변경이 끝나면 발생한다.

텍스트 입력인 경우에는 요소 변경이 끝날 때가 아니라 포커스를 잃을 때 이벤트가 발생한다.

 

아래 텍스트 입력 필드에 글자를 입력하는 동안에는 이벤트가 발생하지 않지만,

버튼을 클릭하는 등의 동작을 통해 포커스를 다른 곳으로 옮기는 순간 change 이벤트가 발생한다.

<input type="text" onchange="alert(this.value)">
<input type="button" value="버튼">

 

select와 checkbox, radio는 선택 값이 변경된 직후에 이벤트가 발생한다.

<select onchange="alert(this.value)">
  <option value="">선택하세요.</option>
  <option value="1">옵션 1</option>
  <option value="2">옵션 2</option>
  <option value="3">옵션 3</option>
</select>

 

 

 

 

2. input

input 이벤트는 사용자가 값을 수정할 때마다 발생하고, 값을 변경시키지 않는 키보드 입력이나 동작에는 반응하지 않는다. 이벤트는 값이 수정되자마자 발생하기 떄문에 event.preventDefault()를 사용해 기본 동작을 막더라도 값이 수정되면 그 즉시 input이벤트가 발생한다.

<input type="text" id="input"> oninput: <span id="result"></span>
<script>
  input.oninput = function() {
    result.innerHTML = input.value;
  };
</script>

 

 

 

 

3. Cut, Copy, Paste

cut, copy, paste 이벤트는 각각 값을 잘라내기·복사하기·붙여넣기 할 때 발생하고, event.preventDefault()를 사용해 기본 동작을 막을 수 있다. 아래 코드는 잘라내기·복사하기·붙여넣기 동작을 시도하면 모든 동작들이 중단되고 얼럿창을 통해 중단된 이벤트 이름을 보여준다.

<input type="text" id="input">
<script>
  input.oncut = input.oncopy = input.onpaste = function(event) {
    alert(event.type + ' - ' + event.clipboardData.getData('text/plain'));
    return false;
  };
</script>

 

 

 

 

4. 요약

이벤트	설명	특이사항
change	값이 변경될 때 이벤트 발생	텍스트 입력의 경우 포커스를 잃을 때 실행
input	텍스트가 입력될 때마다 이벤트 발생	change와 달리 즉시 실행
cut, copy, paste	잘라내기·복사하기·붙여넣기 할 때 이벤트 발생	브라우저 기본 동작을 막아 이벤트 실행을 막을 수 있음. event.clipboardData 프로퍼티를 사용하면 클립보드에 저장된 데이터를 읽고 쓸 수 있음