Bir "giriş" öğesi için "değişiklik" ve "giriş" etkinliği arasındaki fark

110

Birisi arasındaki fark nedir bana söyleyebilir changeve inputolaylar nedir?

Bunları eklemek için jQuery kullanıyorum:

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

Bunun inputyerine ile de çalışır change.

Odaklanmaya göre olay sıralamasında belki bir fark var mı?

— Gabriel Petrovay
kaynak

rakshasingh.weebly.com/1/post/2012/12/… Eski tarayıcıda oninput'un desteklenmediğini unutmayın. Ardından, geçici çözüm olarak onchange, onpaste ve onkeyup kullanabilirsiniz. Not: oninput olayı IE9'da da hatalı ve silinirken tetiklenmiyor.

— A. Wolff

girdi, bir tuşa basıldıktan sonra olduğu gibi daha sık tetiklenir, oysa değişiklik temelde girdi bulanık olduğunda ve değer girdiye odaklanıldığında olduğu gibi olmadığında tetiklenir.

— dandavis

inputEtkinlikte yapıştırarak yakalar. Stackoverflow.com/questions/15727324/… sayfasına

— Antony

TLDR: siz yazarken giriş tetiklenir, dışarıya tıkladığınızda ateşi değiştirin

— Muhammad Umer

Yanıtlar:

118

Bu gönderiye göre :

oninput olay, bir öğenin metin içeriği kullanıcı arabirimi aracılığıyla değiştirildiğinde gerçekleşir.
onchangebir elemanın seçimi, kontrol durumu veya içeriği değiştiğinde oluşur . Bazı durumlarda, yalnızca öğe odağı kaybettiğinde veya return(Enter) tuşuna basıldığında ve değer değiştirildiğinde meydana gelir. Onchange nitelik ile kullanılabilir: <input>, <select>, ve <textarea>.

TL; DR:

oninput: metin içeriğinde yapılan herhangi bir değişiklik
onchange:
- Eğer öyleyse <input />: değiştir + odağı kaybet
- Eğer bir <select>: seçeneği değiştirdiyseniz

$("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>

Snippet'i genişlet

— İonică Bizău
kaynak

Hala ikisi arasındaki fark konusunda kararsızım. Açıklamalarınızdan çok benzer geliyorlar.

— Justin Morgan

@JustinMorgan JSFiddle örneğinde olduğu gibi, her metin değişikliğinde meydana onchangegelirken "öğe odağı kaybettiğinde" oninputortaya çıkar.

— Ionică Bizău

Aradaki fark, oninput olayının bir öğenin değeri değiştikten hemen sonra meydana gelmesi ve onchange, içerik değiştirildikten sonra öğe odağı kaybettiğinde gerçekleşmesidir.

— NinoLopezWeb

Başka bir deyişle, herhangi bir karakter değiştirildiğinde, silindiğinde veya eklendiğinde "girdi" anında tetiklenir ve kontrol odağı kaybettikten sonra "değişiklik" değerlendirilir ve yalnızca değer değiştiğinde gerçekleşir

— Adam Moszczyński 10'17

Az önce Chrome ile denedim. onchangeayrıca odaklanırken enter tuşuna bastığınızda da tetiklenir.

— Rick

change eventÇoğu tarayıcıda yangınlar içeriği değiştiğinde ve eleman kaybeder focus. Temelde bir dizi değişiklik. Durumdaki gibi her değişiklik için ateşlenmeyecektir input event.
input eventYangınlar elemanı için içeriğin değişikliği eşzamanlı. Bu nedenle, olay dinleyicisi daha sık ateşleme eğilimindedir.
Farklı tarayıcılar, belirli etkileşim türleri için bir değişiklik etkinliğinin tetiklenmesi gerekip gerekmediğini her zaman kabul etmez

— Gabe
kaynak

Girdi etkinliğinin eşzamanlı olarak tetiklenmesinin garantili olduğunu sanmıyorum.

— Tim Down

Ayrıca, tüm tarayıcıların güncel sürümleri inputetkinliği desteklemektedir .

— Tim Down

@TimDown, bu yüzden tarayıcı desteğinin değiştiğini söyledim. Herkes her tarayıcının güncel sürümüne sahip değildir.

— Gabe

@TimDown Eşzamanlı olarak ateşleniyor mu?

— Suraj Jain

@SurajJain: Dürüst olmak gerekirse emin değilim.

— Tim Down

MDN belgelerinin net bir açıklaması var (ne zaman eklendiğinden emin değil):

Değişim olayı için harekete geçirilir input, selectve textareaelementler elemanın değerini bir değişiklik kullanıcı tarafından kararlıdır zaman. Girdi olayından farklı olarak, bir elemanın değerine yapılan her değişiklik için değişiklik olayının tetiklenmesi gerekmez .

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

— Joel H
kaynak