Explication détaillée de l'utilisation de la fonction jQuery.change()

La fonction

change() est utilisée pour lier une fonction de gestionnaire à l'événement change de chaque élément correspondant. Cette fonction peut également être utilisée pour déclencher des événements de changement. De plus, vous pouvez également transmettre des données supplémentaires à la fonction gestionnaire d'événements.

l'événement de changement est déclenché lorsque le contenu du texte ou les options sont modifiés. Cet événement s'applique uniquement à et Pour les éléments text et textarea, cet événement se produit lorsque l'élément perd le focus (le contenu du texte change également).

De plus, vous pouvez lier plusieurs gestionnaires d'événements en appelant cette fonction plusieurs fois pour le même élément. Lorsque l'événement de changement est déclenché, jQuery exécutera les fonctions de traitement des événements liés dans l'ordre de liaison.

Pour supprimer un événement lié via change(), utilisez la fonction unbind().

Cette fonction appartient à l'objet (instance) jQuery.

Syntaxe

jQueryObject.change( [ [ data ,]  handler ] )

Si au moins un paramètre est spécifié, cela signifie lier la fonction de gestionnaire de l'événement de changement ; si aucun paramètre n'est spécifié, cela signifie déclencher l'événement de changement.

Paramètres

JQuery 1.4.3 a ajouté la prise en charge : change() prend en charge les paramètres de données.

Ceci dans le gestionnaire de paramètres pointe vers l'élément DOM actuel. change() transmettra également un paramètre au gestionnaire : l'objet Event représentant l'événement en cours.

Si la valeur de retour du gestionnaire de fonction est fausse, cela signifie empêcher le comportement par défaut de l'élément et empêcher l'événement de bouillonner dans l'arborescence DOM. Par exemple, si la fonction de gestionnaire de l'événement click du lien renvoie false, le comportement de saut d'URL par défaut du lien peut être empêché.

<input id="name" name="name" type="text" value="CodePlayer" />
<input id="age" name="age" type="text" value="20" />
<select id="gender" name="gender">
    <option value="男">男性</option>
    <option value="女">女性</option>
</select>
<div id="msg">姓名：[<label for="name">CodePlayer</label>]，年龄：[<label for="age">20</label>]岁，性别：[<label for="gender">男</label>]</div>

function handler(event){
    $("label[for='" + this.name + "']").html( this.value ); 
}

$(":text").change( handler );
$("#gender").change( handler );

// 触发所有text元素的change事件
// $(":text").change( );

var map = { name: "姓名", age: "年龄", gender: "性别" };

function logHandler(event){
    var map = event.data;
    $("#msg").append( new Date().toLocaleString() + &#39; [&#39; + map[this.name] + &#39;]发生了更改<br>&#39; ); 
}

// 记录所有输入每次更改的时间
$(":text").change( map, logHandler );
$("#gender").change( map, logHandler );