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

Question

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

J'utilise jQuery pour les ajouter :

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

Il fonctionne également avec input au lieu de change .

Peut-être une différence dans l'ordre des événements par rapport à la mise au point ?

Answer 1

Selon ce poste :

• oninput se produit lorsque le contenu textuel d'un élément est modifié par 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 ou lorsque l'on appuie sur la touche return (Enter) et la valeur a été modifiée. L'attribut onchange peut être utilisé avec : <input> , <select> y <textarea> .

TL;DR :

• oninput : toute modification apportée au contenu du texte

• onchange :

  • S'il s'agit d'un <input /> : changer + perdre le focus
  • S'il s'agit d'un <select> : option de changement

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

Answer 2

• Le site change event se déclenche dans la plupart des navigateurs lorsque le contenu est modifié et l'élément perd focus . Il s'agit essentiellement d'un agrégat de changements. Il ne se déclenchera pas pour chaque changement comme dans le cas input event .

• Le site input event se déclenche de manière synchrone lors de la modification du contenu de l'élément. Ainsi, l'écouteur d'événements a tendance à se déclencher plus fréquemment.

• Les différents navigateurs ne sont pas toujours d'accord sur la nécessité de déclencher un événement de changement pour certains types d'interaction.

Answer 3

La différence la plus significative entre ces deux événements est quelles sont les causes le site value changement sur le <input> .

Selon MDN :

Le site input se déclenche lorsque le value d'un <input> , <select> ou <textarea> a été modifié.

ALIAS,

input incendies à tout moment le site value changements.

change est un peu plus compliqué :

Le site change est déclenché pour <input> , <select> y <textarea> lorsqu'une altération de l'élément value est commis par l'utilisateur. Contrairement à la input l'événement, le change n'est pas nécessairement déclenché pour chaque modification de l'élément value .

En d'autres termes,

change se déclenche lorsque l'utilisateur modifie le value .

Le moment exact où il se déclenche dépend de la type de <input> :

Pour...

• "radio" et "case à cocher" :
  • Lorsque l'élément est :checked soit par le clavier, soit par un clic de souris
• "date" et "fichier" :
  • Lorsqu'un changement est explicitement engagé, par exemple en sélectionnant une date ou un fichier.
• "texte" :
  • Lorsque l'élément perd le focus après que sa valeur ait été modifiée, mais pas validée.

Il faut savoir que les navigateurs sont inconstants et qu'ils ne sont pas toujours d'accord sur les événements. Cependant, il s'agit bien de la spécification, et vous devrait être en mesure de compter sur ces timings.

Answer 4

Il semble que cette question soit devenue l'une de celles que je consulte de temps en temps. Je ne suis pas fan de lire des murs de texte pour des choses simples. J'ai donc décidé de poster une réponse pratique.

À l'aide de la démo suivante, on peut examiner quels événements sont déclenchés et dans quel ordre.

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>

Answer 5

La documentation MDN contient une explication claire (je ne sais pas quand elle a été ajoutée) :

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

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