'input' 요소의 'change' 이벤트와 'input' 이벤트 간의 차이

'input' 요소의 'change' 이벤트와 'input' 이벤트 간의 차이

누가 나에게 그것들 사이의 차이점이 무엇인지 말해줄 수 있습니까?change그리고.input이벤트는?

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

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

이 기능은 다음과 함께 작동합니다.input대신에change.

이벤트 순서가 초점에 따라 약간의 차이가 있을 수 있습니까?

이 게시물에 따르면:

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

• onchange 선택 항목, 선택된 상태 또는 요소의 내용이 변경된 경우 발생합니다.경우에 따라 요소가 포커스를 잃거나 (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요소의 내용이 변경될 때 동시에 실행됩니다.이와 같이 이벤트 수신기는 더 자주 작동하는 경향이 있습니다.

• 특정 유형의 상호 작용에 대해 변경 이벤트를 발생시켜야 하는지 여부에 대해 브라우저마다 항상 동의하지 않음

이 질문은 제가 가끔 방문하는 질문 중 하나가 된 것 같습니다.저는 간단한 것들을 위해 텍스트 벽을 읽는 것을 좋아하지 않습니다.그래서 실용적인 답변을 올리기로 했습니다.

다음 데모를 사용하여 어떤 이벤트가 발생하고 어떤 순서로 발생하는지 확인할 수 있습니다.

let eventsToListen = [
    "focus",
    "blur",
    "input",
    "change",
];
let inputs = Array.from(
    document.querySelectorAll("#inputs :is(input, textarea, select)")
);
inputs.forEach(input => {
    input.eventQueue = [];
    let queueLimit = eventsToListen.length * 2;
    let queueDisplay = input.closest("td").nextElementSibling;
    eventsToListen.forEach(event => {
        input.addEventListener(event, () => {
            input.eventQueue.push(event);
            if (input.eventQueue.length > queueLimit) {
                Array(input.eventQueue.length - queueLimit).fill(null).forEach(
                    _ => input.eventQueue.shift()
                );
            }
            queueDisplay.textContent = input.eventQueue.join(", ");
        });
    });
});

* {
    margin: 0;
    padding: 0;
    box-sizing: inherit;
    color: inherit;
    font-size: inherit;
    font-family: inherit;
    line-height: inherit;
}
body {
    font-family: sans-serif;
    box-sizing: border-box;
    background-color: hsl(0, 0%, 90%);
}
#inputs {
    margin: 1em;
}
#inputs td {
    padding: 0.1em;
}
#inputs td:nth-child(2) :not(input[type=radio]):not(input[type=checkbox]) {
    width: 100%;
}
#inputs label {
    display: table;
}
#inputs td:last-child {
    font-style: italic;
    font-size: 0.8em;
    opacity: 0.7;
    padding-left: 1em;
}
#notices {
    margin: 1em;
}
#notices ul {
    padding-left: 2em;
    line-height: 2;
}
#notices > ul {
    margin-top: 0.5em;
}
input[type=radio]:focus,
input[type=checkbox]:focus {
    transform: scale(1.5);
}

<table id="inputs">
    <tr>
        <td>text</td>
        <td><input type="text" /></td>
        <td></td>
    </tr>
    <tr>
        <td>number</td>
        <td><input type="number" /></td>
        <td></td>
    </tr>
    <tr>
        <td>textarea</td>
        <td><textarea></textarea></td>
        <td></td>
    </tr>
    <tr>
        <td>select</td>
        <td>
            <select>
                <option>-</option>
                <option>Option 1</option>
                <option>Option 2</option>
                <option>Option 3</option>
            </select>
        </td>
        <td></td>
    </tr>
    <tr>
        <td rowspan="2">radio</td>
        <td>
            <label><input type="radio" name="something" /> Option 1</label>
        </td>
        <td></td>
    </tr>
    <tr>
        <td>
            <label><input type="radio" name="something" /> Option 2</label>
        </td>
        <td></td>
    </tr>
    <tr>
        <td style="padding-right: 0.5em">checkbox</td>
        <td>
            <label><input type="checkbox" name="something2" /> Option 1</label>
        </td>
        <td></td>
    </tr>
</table>

<hr>

<div id="notices">
    notice that:
    <ul>
        <li>"input" event can occur multiple times before a "change" event occurs on text/number/textarea</li>
        <li>"input" and "change" event seem to occur together/sequentially on select</li>
        <li>"input"/"change" event might occur multiple times before a "blur" event occurs on select
            <ul>
                <li>when arrow keys are used to select an option</li>
            </ul>
        </li>
    </ul>
</div>

TL;DR: 가장 큰 차이점은 값 변경을 유발하는 것입니다.

• input값 변경 시 발생하는 이벤트
• change이벤트사용자가 직접 시작한 값 변경 시 발생
  • (정확한 세부 정보는 입력 유형에 따라 다릅니다.)

---

이 두 사건 사이의 가장 중요한 차이점은 무엇이 원인이 되는지입니다.value의 변화<input>.

MDN에 따라:

그input이벤트는 다음 시간에 실행됩니다.value상당한<input>,<select>또는<textarea>요소가 변경되었습니다.

즉, 에서는 변경 사항이 있을 때마다 실행됩니다.

change 조금 더 복잡합니다.

그change에 대해 이벤트가 발생합니다.<input>,<select>,그리고.<textarea>요소가 변경될 때 요소value사용자가 커밋했습니다.과 input 벤트이더, 더,change요소의 각 변경에 대해 이벤트가 반드시 발생하지는 않습니다.value.

즉, 사용자가 를 변경할 때 발생합니다.change일반적으로 종료 값이 시작 값과 다른 경우에만 실행됩니다(이름에서 알 수 있음).

위해서<input>로, 적한타밍이의 한 타이밍.change이트는입따다릅니다에 따라 달라집니다.type일반적으로:

• 유형 텍트기입예력유형반스예(유형▁(:▁for-력)의 경우:search,text,email,password기타:
  • 요소가 초점을 잃었을 때(흐림).
• 메뉴를 일의대메예입여력경는의우를뉴형화종예경(우:▁that)file,date,color기타:
  • UI 요소가 닫혔을 때.
  • 메커니즘: " 유형에직접텍니즘예이메있는커경우력입스트예▁(경▁if우(:date), 그런 다음 텍스트의 각 입력(예: 각 입력된 숫자)에서 실행됩니다.
• 의 경우(예: 아대입예력경의우닌가텍트스형화예▁that경:(우)checkbox,radio, &range):
  • 요소와 상호 작용한 후 요소가 새 상태(예: 클릭, 드래그, 키보드 단축키 트리거)로 남아 있는 경우.

고유의 뉘앙스를 가진 몇 가지 요소가 있지만 일반적인 경우에는 이러한 요소가 사실입니다.

---

대화형 데모

new Vue({
  el: '#app',
  data: {
    inputs: [],
    changes: [],
    types: ['text', 'email', 'color', 'file', 'date', 'range'],
  },
  methods: {
    logEvent(e, index) {
      this.$set(this[e.type + 's'], index, e.target.value);
    },
  },
});

<link href="https://unpkg.com/bootstrap@4/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://unpkg.com/vue@2/dist/vue.min.js"></script>

<div id="app">
  <div class="container mw-100 py-3">
    <div v-for="(type, i) in types" class="row mb-2">
      <div class="col-2">
        <span>{{ type.charAt(0).toUpperCase() + type.slice(1) }}:</span>
      </div>
      <div class="col-5">
        <input :type="type" @input="logEvent($event, i)" @change="logEvent($event, i)" />
      </div>
      <div class="col-5">
        <div class="row">
          <div class="col-6 text-break">
            <span>Input: <span style="color: red">{{ inputs[i] }}</span></span>
          </div>
          <div class="col-6 text-break">
            <span>Change: <span style="color: blue">{{ changes[i] }}</span></span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

MDN 설명서에는 다음과 같은 명확한 설명이 있습니다(추가된 시기는 확실하지 않음).

는 다에대변실행다니됩가벤이에 대해 발생합니다.input,select,그리고.textarea사용자가 요소 값의 변경을 커밋한 경우 요소.입력 이벤트와 달리 요소 값이 변경될 때마다 변경 이벤트가 실행되지 않아도 됩니다.

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

언급URL : https://stackoverflow.com/questions/17047497/difference-between-change-and-input-event-for-an-input-element