December 6, 2021

이벤트: change

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

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

텍스트 입력 요소 예시를 살펴봅시다. 아래 텍스트 입력 필드에 글자를 입력하는 동안엔 이벤트가 발생하지 않습니다. 하지만 버튼을 클릭하는 등의 동작을 통해 포커스를 다른 곳으로 옮기는 순간 change 이벤트가 발생합니다.

또 다른 요소를 기준으로 change이벤트가 언제 발생하는지 살펴봅시다. select와 input type=checkbox,input type=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>

이벤트: input

input 이벤트는 사용자가 값을 수정할 때마다 발생합니다.

키보드 이벤트와 달리 input 이벤트는 어떤 방법으로든 값을 변경할 때 발생합니다. 마우스를 사용하여 글자를 붙여 넣거나 음성인식 기능을 사용해 글자를 입력할 때처럼 키보드가 아닌 다른 수단을 사용하여 값을 변경시킬 때도 input 이벤트가 발생합니다.

예시를 살펴봅시다.

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

수정이 일어날 때마다 이벤트를 실행하고 싶다면 <input> 이벤트가 가장 적절합니다.

한편, input 이벤트는 ⇦, ⇨ 키같이 값을 변경시키지 않는 키보드 입력이나 동작에는 반응하지 않습니다.

이벤트: cut, copy, paste

cut, copy, paste 이벤트는 각각 값을 잘라내기·복사하기·붙여넣기 할 때 발생합니다.

세 이벤트는 ClipboardEvent 클래스의 하위 클래스이며 복사하거나 붙여넣기 한 데이터에 접근할 수 있도록 해줍니다.

input 이벤트와는 달리 세 이벤트는 event.preventDefault()를 사용해 기본 동작을 막을 수 있습니다. 이렇게 하면 아무것도 복사·붙여넣기 할 수 없습니다.