Je cherchais pour ajouter un événement à une case à cocher et j'aurais pensé que les gens utiliseraient .change
pour configurer un événement de modification, mais à la place, j'ai constaté que les gens utilisent .click
Y a-t-il une raison à cela? Ils semblent tous les deux fonctionner correctement avec les événements cliqués et avec les changements de clavier. Suis-je en train de manquer quelque chose?
Si vous ne me croyez pas alors essayez-le vous-même
onchange
dans IE ne se déclenche que lorsque la case à cocher perd le focus. Donc, si vous y accédez, appuyez plusieurs fois sur l'espace, tabulez, vous n'obtiendrez qu'un seul événement onchange
, mais plusieurs événements onclick
.
Remarque: c'est l'un des moments très, très, très rares où le comportement d'IE est correct (selon les spécifications) et où les autres navigateurs sont mauvais.
Deux raisons pour lesquelles onclick
est préféré à onchange
.
Internet Explorer ne déclenche l'événement onchange que lorsque la case à cocher perd le focus (onblur). Donc onclick
est plus une solution multi-navigateur.
onchange
ne se produit qu'après que l'élément a perdu le focus (vous ne verrez pas de différence puisque vous appelez alert et perdez le focus à chaque changement). Le pseudo-code sur MDC explique à peu près le element.onchange
implémentation.
control.onfocus = focus;
control.onblur = blur;
function focus () {
original_value = control.value;
}
function blur () {
if (control.value != original_value)
control.onchange();
}
.change ne fonctionne pas correctement pour au moins certains navigateurs populaires en ce qui concerne les changements de touches (l'option de sélection de l'utilisateur avec les touches fléchées haut/bas) mais ensuite .click ne surmonte pas cela non plus. Parfois, l'utilisation de keyup ou keydown ou quelque chose est utilisé en conjonction avec .change pour surmonter ce problème, mais cela commence à devenir un peu compliqué lorsque l'utilisateur tabule le document, car cela peut déclencher l'événement clé s'il n'est pas explicitement géré dans le rappel. Dans l'ensemble, c'est dommage que .change ne fonctionne pas comme vous vous en doutez, car cela résoudrait certains problèmes chronophages.
oui les deux fonctionnent, seul le clic ne regarde pas le changement d'objet réel (comme une case à cocher qui est cochée), le changement le fait.
Techniquement, il est plus fiable, mais dans la pratique, les deux fonctionnent.
Ils peuvent tous deux déclencher une modification de la valeur par défaut, mais vous pouvez remplacer la logique onClick pour NE PAS modifier la valeur d'une chackbox. Vous pouvez modifier la valeur via un autre point d'entrée. Il faut donc avoir un .click et un .change.
modifier - Je suis également d'accord avec le Dr Rob