`इनपुट` तत्व के लिए" परिवर्तन "और" इनपुट "घटना के बीच अंतर

Question

क्या कोई मुझे बता सकता है कि घटनाओं changeऔर inputघटनाओं के बीच अंतर क्या है?

मैं उन्हें जोड़ने के लिए jQuery का उपयोग कर रहा हूं:

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

इसके inputबदले भी काम करता है change।

शायद ध्यान केंद्रित करने के लिए आदेश देने वाली घटना में कुछ अंतर?

Comments

rakshasingh.weebly.com/1/post/2012/12// ध्यान दें कि पुराने ब्राउज़र में oninput समर्थित नहीं है। आप तब उपयोग कर सकते हैं: onchange, onpaste और onkeyup को वर्कअराउंड के रूप में। पुनश्च: oninput घटना IE9 में भी छोटी गाड़ी है और इसे हटाने पर निकाल नहीं दिया जाता है।

— ए। वोल्फ

इनपुट अधिक बार फायर करता है, जैसे कि कीपर के बाद, जबकि परिवर्तन मूल रूप से तब होता है जब इनपुट धुंधला हो जाता है और मान वह नहीं होता है जब इनपुट केंद्रित था।

— दंडवती

inputघटना भी चिपकाने कैप्चर करता है। देखें stackoverflow.com/questions/15727324/...

— एंटनी

TLDR: जब आप बाहर टाइप करते हैं, तो आग भड़कती है, जब आप बाहर क्लिक करते हैं तो आग बदल देते हैं

— मुहम्मद उमेर

Answer 1

इस पोस्ट के अनुसार :

• oninput घटना तब होती है जब उपयोगकर्ता इंटरफ़ेस के माध्यम से किसी तत्व की पाठ सामग्री को बदल दिया जाता है।

• onchangeतब होता है जब चयन, जाँच की गई स्थिति या किसी तत्व की सामग्री बदल गई हो । कुछ मामलों में, यह केवल तब होता है जब तत्व फोकस खो देता है या दबाते समय return(एंटर) और मान बदल दिया जाता है। Onchange विशेषता के साथ प्रयोग किया जा सकता है: <input>, <select>, और <textarea>।

टी एल; डॉ:

• 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>

Comments

मैं अभी भी दोनों के बीच अंतर पर स्पष्ट नहीं हूं। वे आपके विवरण से बहुत समान लगते हैं।

— जस्टिन मॉर्गन

JSField उदाहरण में @JustinMorgan, onchangeतब होता है जब " oninputप्रत्येक पाठ परिवर्तन पर तत्व फोकस खो देता है" ।

— Ionică Bizău

अंतर यह है कि किसी तत्व के मूल्य में बदलाव के तुरंत बाद ऑनिनपुट घटना घटित होती है, जबकि ऑनकेंज तब होता है जब तत्व परिवर्तित होने के बाद फोकस खो देता है।

— NinoLopezWeb

दूसरे शब्दों में "इनपुट" तुरंत ट्रिगर हो जाता है जब किसी भी चरित्र को बदल दिया जाता है, हटा दिया जाता है या जोड़ा जाता है जबकि "परिवर्तन" का मूल्यांकन नियंत्रण खो जाने के बाद किया जाता है और केवल तभी होता है जब मूल्य बदल गया हो

— एडम मोस्ज़्ज़स्की

मैंने सिर्फ क्रोम के साथ कोशिश की। onchangeजब आप ध्यान केंद्रित करते हुए प्रवेश करते हैं, तब भी ट्रिगर हो जाता है।

— रिक

Answer 2

• change eventअधिकांश ब्राउज़र में आग सामग्री बदल जाता है और तत्व खो देता है जब focus। यह मूल रूप से परिवर्तनों का एक समूह है। यह मामले में हर एक बदलाव के लिए आग नहीं करेगा input event।

• input eventआग तत्व के लिए सामग्री के परिवर्तन पर तुल्यकालिक। जैसे, ईवेंट श्रोता अधिक बार आग लगाता है।

• विभिन्न ब्राउज़र हमेशा इस बात से सहमत नहीं होते हैं कि कुछ प्रकार के इंटरैक्शन के लिए एक परिवर्तन घटना को निकाल दिया जाना चाहिए या नहीं

Comments

मुझे नहीं लगता कि इनपुट ईवेंट को सिंक्रोनाइज़ करने की गारंटी है।

— टिम डाउन

साथ ही, सभी ब्राउज़रों के वर्तमान संस्करण inputघटना का समर्थन करते हैं ।

— टिम डाउन

@ टिमडाउन, यही कारण है कि मैंने कहा कि ब्राउज़र समर्थन भिन्न होता है। हर किसी के पास हर ब्राउज़र का वर्तमान संस्करण नहीं है।

— गाबे

@TimDown क्या यह समकालिक रूप से आग लगाता है?

— सूरज जैन

@ सूरजजैन: मुझे यकीन नहीं है, ईमानदार होना।

— टिम डाउन

Answer 3

MDN प्रलेखन की स्पष्ट व्याख्या है (सुनिश्चित नहीं है कि इसे कब जोड़ा गया):

परिवर्तन घटना के लिए निकाल दिया गया है input, selectऔर textareaतत्वों तत्व का मान करने के लिए एक परिवर्तन उपयोगकर्ता द्वारा प्रतिबद्ध है जब। इनपुट ईवेंट के विपरीत, किसी ईवेंट के मान में प्रत्येक परिवर्तन के लिए परिवर्तन ईवेंट जरूरी नहीं है ।

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