L'événement change en JavaScript

Dans cette leçon, vous et moi allons analyser l'événement change, qui se produit dans les champs de saisie lors de leurs modifications. Qu'est-ce que cela signifie ? Supposons, par exemple, que vous ayez une input et qu'il y ait un certain texte à l'intérieur. Si vous modifiez ce texte, alors dans ce cas, cet événement se produira.

Regardons un exemple. Supposons que nous ayons une input :

<input id="elem" value="text">

Lors de sa modification, affichons dans la console sa nouvelle valeur :

let elem = document.querySelector('#elem');

elem.addEventListener('change', function() {
	console.log(this.value);
});

Étant donné une input et un paragraphe. Lors du changement de l'input, affichez son texte dans le paragraphe.

Étant donné une case à cocher. Lors du changement de la case à cocher, affichez à l'écran son nouvel état.

Expliquez quelle est la différence entre les événements blur et change.

Étant donné une input. Lors de son changement, vérifiez si le nombre de caractères qu'elle contient est inférieur à 5 ou non. S'il est inférieur - colorez la bordure de l'input en vert, et s'il est supérieur - en rouge.