Certains éléments du DOM génèrent des événements. Je les ai rassemblés dans ce tableau :
| Méthode | Événement géré |
| focus() | Réception de focus par l’élément |
| blur() | Perte de focus par l’élément |
| focusin() | Réception de focus par l’élément ou un de ses enfants |
| focusout() | Perte de focus par l’élément ou un de ses enfants |
| resize() | Redimensionnement d’un élément |
| change() | Modification d’un élément |
A titre d’exemple, ce code utilise l’événement blur() pour tester la validité d’une zone de texte dans un formulaire.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test de la validité d'une zone de texte</title>
</head>
<body>
<script src="jquery.js"></script>
<table>
<tr><td>Entrez un nombre compris entre 10 et 20</td><td><input type="text" id="saisie1" autofocus></td></tr>
<tr><td>Entrez un texte</td><td><input type="text" id="saisie2"></td></tr>
</table>
<span id="message"></span>
<script>
$(function() {
$('#saisie1').blur(function(){
var zone1 = parseInt($('#saisie1').val());
if ((zone1>=10) && (zone1<=20))
$('#message').html('La valeur dans la première zone de texte entrée est valide');
else
$('#message').html('La valeur dans la première zone de texte entrée ne respecte pas la consigne');
});
});
</script>
</body>
</html>
Lorsque la première zone de texte perd le focus :
$('#saisie1').blur(function(){
Le contenu de la zone de texte est lu et mémorisé sous une forme entière (parseInt()) dans la variable zone1 :
var zone1 = parseInt($('#saisie1').val());
Si la valeur saisie est dans la fourchette autorisée, un message est affiché dans le span #message :
if ((zone1>=10) && (zone1<=20))
$('#message').html('La valeur dans la première zone de texte entrée est valide');
Dans le cas contraire, un autre message est affiché dans le span #message :
else
$('#message').html('La valeur dans la première zone de texte entrée ne respecte pas la consigne');
Exercice
Affichez la taille de la fenêtre suite à son redimensionnement
Note : L’élément window représente la fenêtre.
Solution
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Taille de la fenêtre au redimensionnement</title>
</head>
<body>
<script src="jquery.js"></script>
<span id="message">Redimensionnez la fenêtre</span>
<script>
$(function() {
$(window).resize(function(){
var x = $(window).width();
var y = $(window).height();
$('#message').html('Taille de la fenêtre : ' + x + 'px x ' + y + 'px');
});
});
</script>
</body>
</html>
Au redimensionnement de la fenêtre :
$(window).resize(function(){
Les nouvelles dimensions de la fenêtre sont stockées dans les variables x et y :
var x = $(window).width();
var y = $(window).height();
Puis affichées dans le span d’id #message :
$('#message').html('Taille de la fenêtre : ' + x + 'px x ' + y + 'px');
Remarque
Quelques autres événements sont dignes d’intérêt :
-
$(élément).load() est levé quand l’élément est entièrement chargé où élément peut être la page (window) ou un élément auquel est associé une URL (img, script, frame ou iframe).
-
$(window).unload() est levé quand l’utilisateur demande à changer de page