ความแตกต่างระหว่างเหตุการณ์ "เปลี่ยนแปลง" และ "อินพุต" สำหรับองค์ประกอบ "อินพุต"

คนที่สามารถบอกสิ่งที่แตกต่างระหว่างchangeและinputเหตุการณ์ที่เกิดขึ้นคืออะไร?

ฉันใช้ jQuery เพื่อเพิ่ม:

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

นอกจากนี้ยังทำงานร่วมกับแทนinputchange

อาจจะแตกต่างกันบ้างในการเรียงลำดับเหตุการณ์ที่สัมพันธ์กับโฟกัส?

ตามโพสต์นี้ :

• 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

ความแตกต่างที่สำคัญที่สุดระหว่างสองเหตุการณ์นี้คือสิ่งที่ทำให้เกิดการvalueเปลี่ยนแปลงใน<input>.

ตามMDN :

inputเหตุการณ์ fires เมื่อvalueของ<input>, <select>หรือ<textarea>องค์ประกอบที่มีการเปลี่ยนแปลง

inputเริ่มทำงานทุกครั้งที่มีvalueการเปลี่ยนแปลง

change ซับซ้อนกว่าเล็กน้อย:

changeเหตุการณ์ถูกยิง<input>, <select>และ<textarea>องค์ประกอบเมื่อมีการเปลี่ยนแปลงองค์ประกอบของvalueความมุ่งมั่นโดยผู้ใช้ ซึ่งแตกต่างจากinputเหตุการณ์ที่เหตุการณ์ไม่ได้ยิงจำเป็นสำหรับแต่ละการเปลี่ยนแปลงไปขององค์ประกอบchangevalue

changeเริ่มทำงานเมื่อผู้ใช้เปลี่ยนไฟล์value.

เมื่อว่ามันยิงขึ้นอยู่กับtypeของ<input>:

สำหรับ...

• "วิทยุ" และ "ช่องทำเครื่องหมาย":
  • เมื่อองค์ประกอบคือ:checkedโดยแป้นพิมพ์หรือคลิกเมาส์
• "วันที่" และ "ไฟล์":
  • เมื่อมีการเปลี่ยนแปลงอย่างชัดเจนเช่น เลือกวันที่หรือไฟล์
• "text":
  • เมื่อองค์ประกอบสูญเสียโฟกัสหลังจากเปลี่ยนค่าแล้ว แต่ไม่มีข้อผูกมัด

คำเตือนที่เป็นธรรมว่าเบราว์เซอร์ไม่แน่นอนและไม่เห็นด้วยกับเหตุการณ์เสมอไป อย่างไรก็ตามนี่เป็นข้อมูลจำเพาะและคุณควรจะสามารถนับเวลาเหล่านี้ได้