[javascript] ‘입력’요소에 대한 ‘변경’이벤트와 ‘입력’이벤트의 차이점

Program / 글쓴이

누군가 change와 input이벤트 의 차이점이 무엇인지 말해 줄 수 있습니까 ?

추가를 위해 jQuery를 사용하고 있습니다.

$('input[type="text"]').on('change', function() {
    alert($(this).val());
})

또한 작동 input대신 change.

초점과 관련된 이벤트 순서에 약간의 차이가 있습니까?

답변

이 게시물 에 따르면 :

  • oninput 이벤트는 사용자 인터페이스를 통해 요소의 텍스트 내용이 변경 될 때 발생합니다.

  • onchange선택, 확인 된 상태 또는 요소의 내용 이 변경 되었을 때 발생합니다 . 어떤 경우에는 요소가 포커스를 잃거나 return(Enter)를 누르고 값이 변경된 경우에만 발생합니다 . onchange를 속성은 사용할 수 있습니다 : <input>, <select>,와 <textarea>.

TL; DR :

  • oninput: 텍스트 내용의 변경
  • onchange:
    • 그것이 있다면 <input />: 변화 + 초점을 잃음
    • 다음과 같은 경우 <select>: 변경 옵션
$("input, select").on("input", function () {
    $("pre").prepend("\nOn input. | " + this.tagName + " | " + this.value);
}).on("change", function () {
    $("pre").prepend("\nOn change | " + this.tagName + " | " + this.value);
}).on("focus", function () {
    $("pre").prepend("\nOn focus | " + this.tagName + " | " + this.value);
}).on("blur", function () {
    $("pre").prepend("\nOn blur | " + this.tagName + " | " + this.value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" />
<select>
  <option>Alice</option>
  <option>Bob</option>
  <option>Carol</option>
  <option>Dave</option>
  <option>Emma</option>
</select>
<pre></pre>

스 니펫 확장

답변

  • change event대부분의 브라우저에서 화재 콘텐츠가 변경 될 때와 요소 잃는다 focus. 기본적으로 변경 사항의 집합체입니다. 경우와 같이 모든 단일 변경에 대해 실행되지 않습니다 input event.

  • input event화재는 요소의 내용의 변화를 동 기적으로. 따라서 이벤트 리스너는 더 자주 실행되는 경향이 있습니다.

  • 특정 유형의 상호 작용에 대해 변경 이벤트를 실행해야하는지 여부에 대해 브라우저마다 항상 동의하는 것은 아닙니다.

답변

MDN 문서에는 명확한 설명이 있습니다 (언제 추가되었는지 확실하지 않음) :

변경 이벤트가 해고되고 input, select그리고 textarea요소 요소의 값으로 변경은 사용자가 최선을 다하고 있습니다 때. 입력 이벤트와 달리 변경 이벤트는 요소의 값이 변경 될 때마다 반드시 발생하는 것은 아닙니다 .

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event

답변