web-dev-qa-db-fra.com

Différence entre les événements "change" et "input" pour un élément `input`

Quelqu'un peut-il me dire quelle est la différence entre les événements change et input?

J'utilise jQuery pour les ajouter:

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

Cela fonctionne aussi avec input au lieu de change.

Peut-être une certaine différence dans le classement des événements par rapport au focus?

javascriptjqueryeventsdom
88
Gabriel Petrovay

Selon ce post :

  • Un événement oninput se produit lorsque le contenu en texte d'un élément est modifié via l'interface utilisateur.

  • onchange se produit lorsque la sélection, l'état coché ou le contenu d'un élément ont changé . Dans certains cas, cela ne se produit que lorsque l'élément perd le focus. L'attribut onchange peut être utilisé avec: <input>, <select>, et <textarea>.

TL; DR:

  • oninput: toute modification apportée au contenu du texte
  • onchange:
    • Si c'est un <input />: changer + perdre le focus
    • Si c'est un <select>: option de changement
$("input, select").on("input", function () {
    $("pre").prepend("\nOn input. | " + this.tagName);
}).on("change", function () {
    $("pre").prepend("\nOn change | " + this.tagName);
}).on("focus", function () {
    $("pre").prepend("\nOn focus | " + this.tagName);
}).on("blur", function () {
    $("pre").prepend("\nOn blur | " + this.tagName);
});
<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>
93
Ionică Bizău

  • Le changeevent est déclenché dans la plupart des navigateurs lorsque le contenu est modifié et que l'élément perd focus. C'est fondamentalement un ensemble de changements. Il ne sera pas déclenché à chaque changement, comme dans le cas inputevent.

  • Le inputevent est déclenché de manière synchrone lors de la modification du contenu de l'élément. En tant que tel, l'auditeur d'événements a tendance à se déclencher plus fréquemment.

  • Les différents navigateurs ne s'accordent pas toujours sur le fait qu'un événement de changement doit être déclenché pour certains types d'interaction.

22
Gabe

La documentation MDN a une explication claire (vous ne savez pas quand elle a été ajoutée):

L'événement change est déclenché pour les éléments input, select et textarea lorsqu'une modification de la valeur de l'élément est validée par l'utilisateur. Contrairement à l'événement d'entrée, l'événement change n'est pas nécessairement déclenché à chaque modification de la valeur d'un élément .

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

0
Joel H