• Facile

Ce cours est visible gratuitement en ligne.

Ce cours existe en livre papier.

Vous pouvez obtenir un certificat de réussite à l'issue de ce cours.

Vous pouvez être accompagné et mentoré par un professeur particulier par visioconférence sur ce cours.

J'ai tout compris !

Les bases de la gestion événementielle

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Vous avez déjà fait connaissance avec la gestion événementielle dans le TP de la deuxième partie de ce cours. Cela vous a permis de faire réagir le survol d'un lien hypertexte. Ce chapitre va aller beaucoup plus loin en présentant les très nombreux événements qui peuvent être gérés par du code jQuery.

La souris

Avant de commencer

Quel que soit l'événement à gérer, vous devrez mettre en place une méthode qui ressemblera à ceci :

$(sel).mge(function() {
  // Une ou plusieurs instructions jQuery 
  // pour gérer l'événement lorsqu'il se produit
}

… où sel est un sélecteur jQuery comme ceux que vous avez rencontrés jusqu'ici et mge est une méthode de gestion événementielle comme celles que vous rencontrerez tout au long de ce chapitre.

La mise en place d'un événement concerne tous les éléments retournés par le sélecteur. Ainsi par exemple, en appliquant une gestion événementielle au sélecteur $('img'), elle concernera toutes les balises <img> du document. Ou encore, en appliquant une gestion événementielle au sélecteur $('.resultat'), elle s'appliquera à toutes les balises de classe resultat. Bref, vous l'aurez compris : une seule instruction permet de mettre en place plusieurs gestions événementielles. Quel gain de temps ! À vous de trouver le sélecteur le plus approprié à chaque cas.

La souris est un périphérique universellement utilisé pour communiquer avec l'ordinateur. Vous pouvez désigner un élément en le pointant, sélectionner ou donner le focus à un élément en cliquant dessus, ou encore déplacer le contenu d'un élément doté d'une barre de défilement en agissant sur la roulette. Autant d'événements accessibles en jQuery. Dans ce sous-chapitre, nous allons nous intéresser aux événements décrits dans le tableau suivant.

Méthode

Événement géré

click()

Clic gauche

dblclick()

Double-clic

mousedown()

Appui sur le bouton gauche ou droit de la souris alors que le pointeur est au-dessus de l'élément

mouseenter() ou mouseover()

Début de survol de l'élément

mouseleave() ou mouseout()

Arrêt de survol de l'élément

mousemove()

Déplacement du pointeur au-dessus de l'élément

mouseup()

Relâchement du bouton gauche ou droit alors que le pointeur est au-dessus de l'élément

scroll()

Utilisation de la roulette alors que le pointeur se trouve au-dessus d'un élément concerné par ce type d'événement

Clics et positions de la souris

Je suis bien conscient que vous avez appris beaucoup de choses dans les chapitres précédents et que vous avez besoin de vous détendre. Que diriez-vous d'un mini-jeu écrit en jQuery pour bien comprendre comment fonctionnent les méthodes de gestion événementielle de la souris ? Nous allons afficher une image de petite taille à une position aléatoire sur l'écran. Lorsque le joueur cliquera sur cette image, elle sera affichée à un autre emplacement. Voici le code utilisé :

<img id="target" src="petitchat.jpg">

<script src="jquery.js"></script>
<script>
  $(function() {
    // Dimensions de la fenêtre
    var largeur = ($(window).width()) - 50;
    var hauteur = ($(window).height()) - 50;

    // Affichage de la première image en (100, 100)
    var p = $('#target').offset();
    p.top=100;
    p.left=100;
    $('#target').offset(p);
    
    // Gestion du clic et déplacement de l'image
    $("#target").click(function() {
      x = Math.floor(Math.random()*largeur);
      y = Math.floor(Math.random()*hauteur);
      var p = $('#target').offset();
      p.top = y;
      p.left = x;
      $('#target').offset(p);
    });
  });
</script>

Examinons les instructions qui composent ce document. Une balise <img> d'identifiant #target fait référence à l'image petitchat.jpg. Le reste du code utilise des instructions jQuery pour modifier l'emplacement de l'image et réagir aux clics de l'utilisateur.

Après avoir attendu la disponibilité du DOM, les dimensions de la fenêtre sont mémorisées dans les variables largeur et hauteur :

var largeur = ($(window).width()) - 50;
var hauteur = ($(window).height()) - 50;

Je comprends qu'il soit nécessaire de connaître les dimensions de la fenêtre pour afficher l'image, mais pourquoi avoir soustrait 50 de la largeur et de la hauteur ?

L'image affichée a une dimension de 50×50 pixels. En soustrayant ces valeurs de la largeur et de la hauteur de la fenêtre, on s'assure que l'image sera toujours affichée dans la partie visible de la fenêtre. La méthode jQuery offset() est utilisée pour modifier l'emplacement initial de l'image, et la méthode target() pour connaître l'emplacement actuel de l'image :

var p = $('#target').offset();

À quoi peut bien servir de connaître l'emplacement de l'image ?

Vous avez raison, cette instruction n'a apparemment aucun intérêt. Et pourtant, en y regardant d'un peu plus près… En utilisant l'instruction $('#target').offset() et en mémorisant son résultat dans la variable JavaScript p, on définit du même coup un objet jQuery par lequel les coordonnées de l'image pourront être modifiées. C'est d'ailleurs ce que font les deux instructions suivantes en affichant l'image aux coordonnées (100, 100) :

p.top=100;
p.left=100;

Il ne reste plus qu'à utiliser la méthode offset() pour afficher l'image aux coordonnées (100, 100) :

$('#target').offset(p);

Une gestion événementielle est mise en place pour l'événement click, c'est-à-dire lorsque l'utilisateur clique sur le bouton gauche de la souris :

$("#target").click(function() {

Une nouvelle position aléatoire est choisie pour l'image (tout en restant dans les limites de la fenêtre) en attendant un autre clic de l'utilisateur. Un nombre aléatoire compris entre 0 et la largeur de la fenêtre est choisi et mémorisé dans la variable x :

x = Math.floor(Math.random()*largeur);

Math.random() est une fonction JavaScript qui retourne un nombre aléatoire compris entre 0 et une valeur proche de 1. Dans cet exemple, afin de simplifier les choses, nous allons admettre que le nombre retourné est compris entre 0 et 1.

En multipliant la valeur retournée par la largeur de la fenêtre, on obtient un nombre compris entre 0 et la largeur de la fenêtre. Enfin, en appliquant la fonction JavaScript Math.floor() à ce nombre, on obtient la valeur entière la plus proche de ce nombre. C'est exactement l'effet recherché.

La ligne suivante utilise la même technique pour choisir un nombre aléatoire compris entre 0 et la hauteur de la fenêtre. Ce nombre est mémorisé dans la variable y.

Pour déplacer l'image, nous utilisons la technique traditionnelle. Après avoir obtenu un objet jQuery qui correspond à la position actuelle de l'image :

var p = $('#target').offset();

… les coordonnées de l'image sont modifiées en utilisant les coordonnées tirées aléatoirement dans l'étape précédente :

p.top = y;
p.left = x;

Puis l'image est déplacée en utilisant la méthode offset() :

$('#target').offset(p);

Le code est fonctionnel, vous pouvez le tester dans un navigateur quelconque.

Vous pouvez évidemment remplacer la méthode click() par une autre de votre choix. Par exemple, pour réagir au début du survol de l'image, vous utiliserez cette instruction :

$("#target").mouseenter(function() {

La méthode scroll

Pour terminer avec les méthodes événementielles relatives à la souris, il ne reste plus qu'à écrire un peu de code pour utiliser la méthode scroll().

<style type="text/css">
  div {
    width: 200px;
    height: 200px;
    overflow: scroll;
    background-color: yellow;
    border: 2px black solid;
  }
</style>

<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
    
<script src="jquery.js"></script>
<script>
  $(function() {
    $('div').scroll(function() {
      alert('Utilisation de la roulette dans la balise <div>');
    });
    $(window).scroll(function() {
      alert('Utilisation de la roulette dans le document');
    });
  });
</script>

Pour détecter l'utilisation de la roulette dans la balise <div>, il suffit de sélectionner la balise et de lui appliquer la méthode scroll() :

$('div').scroll(function() {

La détection d'un mouvement de roulette déclenche l'affichage d'une boîte de message :

alert('Utilisation de la roulette dans la balise <div>');

Pour détecter l'utilisation de la roulette dans le document, procédez de même, en insérant le mot window dans le sélecteur, sans le mettre entre apostrophes :

$(window).scroll(function() {

Ici aussi, la détection d'un mouvement de roulette déclenche l'affichage d'une boîte de message :

alert('Utilisation de la roulette dans le document');

which et type

Dans certains cas particuliers, il peut être nécessaire de savoir quel bouton de la souris a été pressé. Pour cela, vous ferez appel à la méthode event.which, qui renvoie l'une des valeurs suivantes :

  • 1 : bouton gauche pressé ;

  • 2 : bouton central pressé ;

  • 3 : bouton droit pressé.

Pour connaître le type d'événement qui a été levé par la procédure de gestion événementielle, vous utiliserez la méthode event.type. La valeur renvoyée pourra être click, dblclick, mousedown, mouseenter, mouseover, mouseleave, mouseout, mousemove ou mouseup.

Voyons comment utiliser ces deux méthodes en pratique.

Cliquez sur l'image avec un des boutons de la souris.<br ></code>
<img id="target" src="petitchat.jpg"><br />
<span id="rapport"></span>

<script src="jquery.js"></script>
<script>
  $(function() {
    $('#target').mousedown(function(e){
      $('#rapport').html('Événement : ' + e.type + '. Bouton pressé : ' +  e.which );
    });
  });
</script>

Le code jQuery met en place un gestionnaire événementiel en rapport avec la balise d'identifiant #target, c'est-à-dire l'image. Ce gestionnaire capture l'événement mousedown. Remarquez le paramètre e passé à la fonction :

$('#target').mousedown(function(e){

Les méthodes e.type et e.which sont utilisées pour indiquer le type d'événement levé et le bouton qui a été pressé. Ces informations sont affichées dans la balise <span> d'identifiant #rapport :

$('#rapport').html('Événement : ' + e.type + '. Bouton pressé : ' +  e.which );

Le clavier

Le clavier est également un périphérique fondamental pour communiquer avec l'ordinateur. Sur le Web, il est essentiellement utilisé pour saisir des données textuelles dans des formulaires. jQuery est en mesure de capturer trois événements en rapport avec le clavier.

Méthode

Événement géré

keydown()

Appui sur une touche du clavier

keyup()

Relâchement d'une touche du clavier préalablement enfoncée

keypress()

Maintien d'une touche du clavier enfoncée

Voyons comment utiliser ces méthodes en raisonnant sur un cas pratique. À titre d'exemple, nous allons afficher un petit rectangle de couleur verte chaque fois qu'un caractère sera ajouté dans une balise <textarea>. Ce rectangle deviendra blanc lorsque la touche sera relâchée. Voici le code utilisé :

<style type="text/css">
  #lumiere {
    width: 10px;
    height: 10px; 
    background-color: white; }
</style>

<div id="lumiere"></div>
<textarea id="target"></textarea>

<script src="jquery.js"></script>
<script>
  $(function() {
    $('#target').keydown(function(){
      $('#lumiere').css('background-color', 'green');
    });
    $('#target').keyup(function(){
        $('#lumiere').css('background-color', 'white');
    });
  });
</script>

Le code jQuery met en place deux procédures événementielles : une relative à l'événement keydown et l'autre à l'événement keyup. Lorsqu'une touche du clavier est enfoncée, la couleur d'arrière-plan de la balise <div> devient verte. Lorsque la touche est relâchée, la balise redevient blanche.

Dans certains programmes écrits en jQuery, il peut être nécessaire de savoir quelle touche du clavier a été pressée. Pour cela, vous ferez appel à la méthode event.which qui renvoie précisément cette information. Pour connaître le type d'événement qui a été levé par la procédure de gestion événementielle, vous utiliserez la méthode event.type. La valeur renvoyée pourra être keydown, keypress ou keyup, en fonction de la méthode événementielle utilisée. Voyons comment utiliser la méthode event.which en pratique.

<form>
  Laissez aller votre imagination : saisissez quelques mots<br />
  <textarea id="saisie"></textarea>
</form><br />
Caractère saisi : <span id="unelettre"></span>

<script src="jquery.js"></script>
<script>
  $(function() {
    $('#saisie').keypress(function(e) {
      $('#unelettre').text(e.which);  //keyCode
    });
  });
</script>

L'utilisateur est invité à taper quelques mots dans la zone de texte multilignes. Chacun des caractères tapés est alors affiché en dessous de la zone de saisie. Le code jQuery met en place un gestionnaire événementiel sur la balise d'identifiant #saisie, c'est-à-dire sur le <textarea>. La touche frappée est récupérée et affichée dans la balise <span>, comme le montre la figure suivante.

La méthode e.which retourne le code de la touche frappée
La méthode e.which retourne le code de la touche frappée

Caractère

ASCII

Caractère

ASCII

Caractère

ASCII

Caractère

ASCII

Caractère

ASCII

Espace

32

3

51

F

70

Y

89

l

108

!

33

4

52

G

71

Z

90

m

109

"

34

5

53

H

72

[

91

n

110

#

35

6

54

I

73

\

92

o

111

$

36

7

55

J

74

]

93

p

112

%

37

8

56

K

75

^

94

q

113

&

38

9

57

L

76

_

95

r

114

'

39

:

58

M

77

`

96

s

115

(

40

;

59

N

78

a

97

t

116

)

41

<

60

O

79

b

98

u

117

*

42

=

61

P

80

c

99

v

118

+

43

>

62

Q

81

d

100

w

119

,

44

?

63

R

82

e

101

x

120

-

45

@

64

S

83

f

102

y

121

.

46

A

65

T

84

g

103

z

122

/

47

B

66

U

85

h

104

{

123

0

48

C

67

V

86

i

105

|

124

1

49

D

68

W

87

j

106

}

125

2

50

E

69

X

88

k

107

~

126

Avec keydown() et keyup(), il s'agit d'une version simplifiée du code ASCII dans laquelle les caractères minuscules et majuscules sont confondus.

Touche

Code

Touche

Code

Touche

Code

Touche

Code

Retour arrière

8

6

54

v

86

F3

114

Tab

9

7

55

w

87

F4

115

Entrée

13

8

56

x

88

F5

116

Maj

16

9

57

y

89

F6

117

Ctrl

17

a

65

z

90

F7

118

Alt

18

b

66

Windows gauche

91

F8

119

Pause

19

c

67

Windows droit

92

F9

120

Verr Maj

20

d

68

Sélection

93

F10

121

Echap

27

e

69

0 pavé num.

96

F11

122

Page Préc

33

f

70

1 pavé num.

97

F12

123

Page Suiv

34

g

71

2 pavé num.

98

Verr Num

144

Fin

35

h

72

3 pavé num.

99

Arrêt Defil

145

Origine

36

i

73

4 pavé num.

100

;

186

Gauche

37

j

74

5 pavé num.

101

=

187

Haut

38

k

75

6 pavé num.

102

,

188

Droite

39

l

76

7 pavé num.

103

-

189

Bas

40

m

77

8 pavé num.

104

.

190

Inser

45

n

78

9 pavé num.

105

/

191

Suppr

46

o

79

*

106

`

192

0

48

p

80

+

107

[

219

1

49

q

81

-

109

\

220

2

50

r

82

.

110

]

221

3

51

s

83

/

111

Espace

222

4

52

t

84

F1

112

-

-

5

53

u

85

F2

113

-

-

Si vous voulez obtenir non pas le code du caractère mais le caractère lui-même, assurez-vous que vous utilisez la méthode keypress() :

$('#saisie').keypress(function(e) {

Et remplacez la ligne suivante par :

var c = String.fromCharCode(e.which);
$('#unelettre').text(c);

La première instruction récupère le code tapé au clavier (e.which), le convertit en un caractère (String.fromCharCode) et le stocke dans la variable c. La deuxième instruction affiche ce caractère dans la balise d'identifiant #unelettre, c'est-à-dire dans le <span>.

Les éléments

J'ai ici regroupé les méthodes événementielles en rapport avec le gain et la perte de focus, la modification de la taille et du contenu, et la sélection d'un élément.

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

Les méthodes focus() et blur() détectent respectivement la réception de focus et la perte de focus par un élément dans un formulaire. Cela peut se produire suite à l'appui sur une touche ou une combinaison de touches du clavier (Tab ou Maj + Tab par exemple) ou par un clic de souris.

Les méthodes focusin() et focusout() sont comparables aux méthodes focus() et blur() et peuvent les remplacer. Cependant, elles détectent également la réception et la perte de focus d'un élément parent.

focus() et blur()

Un peu de code va éclaircir ce que je viens de dire. Tout d'abord, intéressons-nous aux méthodes focus() et blur().

<form>
  Cliquez sur les zones de texte<p>
  <input type="text" class="f" id="Zone-de-texte-1"><p>
   <input type="text" class="f" id="Zone-de-texte-2"><br />
</form><br />

  Focus : <span id="resultat"></span><br />
  Perte de focus : <span id="resultat2"></span>

<script src="jquery.js"></script>
<script>
  $(function() {
    $('.f').focus(function() {
      $('#resultat').text($(this).attr('id'));
    });
    $('.f').blur(function() {
      $('#resultat2').text($(this).attr('id'));
    });

  });
</script>

Le corps du document contient essentiellement deux zones de texte et deux balises <span>. Lorsque l'utilisateur donne le focus à l'une des zones de texte, le contenu des deux <span> est modifié. Le premier indique l'identifiant du contrôle qui a reçu le focus et le deuxième indique l'identifiant du contrôle qui a perdu le focus.

La procédure événementielle est responsable de l'affichage dans le premier <span>. La méthode utilisée est focus(). L'événement déclencheur sera donc la réception du focus :

$('.f').focus(function() {

Examinez le sélecteur. Toutes les balises de classe f sont concernées, à savoir les deux zones de texte. Lorsque cette fonction événementielle est exécutée, l'identifiant (attr('id')) de la balise qui a déclenché l'événement ($(this)) est affiché (text) dans la balise d'identifiant #resultat ($('#resultat')), c'est-à-dire dans la première balise <span> :

$('#resultat').text($(this).attr('id'));

La deuxième procédure événementielle est responsable de l'affichage dans le deuxième <span>. La méthode utilisée est blur(). L'événement déclencheur sera donc la perte du focus :

$('.f').blur(function() {

Cette méthode concerne les balises de classe f, et donc les deux zones de texte. Lorsque cette fonction événementielle est exécutée, l'identifiant (attr('id')) de la balise qui a déclenché l'événement ($(this)) est affiché (text) dans la balise d'identifiant #resultat2 ($('#resultat2')), c'est-à-dire dans la deuxième balise <span>.

La figure suivante montre la page Web après avoir donné le focus à la deuxième zone de texte, puis à la première.

Les deux <span> sont mis à jour en fonction de l'élément qui a le focus
Les deux <span> sont mis à jour en fonction de l'élément qui a le focus

focusin() et focusout()

Nous allons maintenant nous intéresser aux méthodes focusin() et focusout(), et montrer leurs différences par rapport aux méthodes focus() et blur(). Pour cela, deux balises <fieldset> contenant chacune deux balises <input type="text"> vont être créées. Le gain et la perte de focus seront testés au niveau des balises <fieldset>. En donnant le focus à une zone de texte, l'événement sera répercuté jusqu'à la balise <fieldset> parent qui affichera des informations en conséquence.

<form>
  Cliquez sur les zones de texte<p>
  <fieldset id="premier">
    <legend>Premier groupe</legend>
    <input type="text" class="f" id="Zone-de-texte-1"><p>
    <input type="text" class="f" id="Zone-de-texte-2"><br />
  </fieldset>

  <fieldset id="deuxieme">
    <legend>Deuxième groupe</legend>
    <input type="text" class="f" id="Zone-de-texte-3"><p>
    <input type="text" class="f" id="Zone-de-texte-4"><br />
  </fieldset>
</form><br />

Focus : <span id="resultat"></span><br />
Perte de focus : <span id="resultat2"></span>

<script src="jquery.js"></script>
<script>
  $(function() {
    $('fieldset').focusin(function() {
      $('#resultat').text($(this).attr('id'));
    });
    $('fieldset').focusout(function() {
      $('#resultat2').text($(this).attr('id'));
    });
  });
</script>

Le corps du document contient deux balises <fieldset> d'identifiant #premier et #deuxieme. Chacune de ces balises contient une légende et deux zones de texte. À la suite des deux balises <fieldset>, deux balises <span> sont utilisées pour indiquer quelle balise <fieldset> gagne le focus et quelle balise <fieldset> le perd.

La première procédure événementielle teste le gain de focus. La méthode focusin() est appliquée aux éléments fieldset, c'est-à-dire aux deux balises <fieldset> :

$('fieldset').focusin(function() {

Lorsqu'une balise <fieldset> ou un de ses enfants (les balises <legend> et <input type="text">) gagne le focus, cette méthode événementielle est exécutée. L'identifiant (attr('id')) de la balise <fieldset> parent ($(this)) est alors affiché (text) dans la balise d'identifiant #resultat ($('#resultat')), c'est-à-dire dans la première balise <span> :

$('#resultat').text($(this).attr('id'));

Un traitement similaire affiche dans la deuxième balise <span> le nom de la balise <fieldset> qui a perdu le focus :

$('fieldset').focusout(function() {
  $('#resultat2').text($(this).attr('id'));
});

À tout hasard, remplacez les méthodes focusin() et focusout() par focus() et blur() et expérimentez le nouveau code. Maintenant, vous faites la différence entre ces deux jeux de méthodes et vous savez quand utiliser l'un ou l'autre.

resize()

Nous allons maintenant nous intéresser à la méthode événementielle resize(). Cette méthode est exécutée chaque fois que la fenêtre change de taille. Nous allons l'utiliser pour afficher dans une balise <span> les dimensions de la fenêtre chaque fois qu'elle est exécutée :

<span id="resultat"></span>

<script src="jquery.js"></script>
<script>
  $(function() {
    $(window).resize(function() {
      var taille = 'Taille de la fenêtre : ' + $(window).width() + 'px x ' + $(window).height() + 'px';
      $('#resultat').text(taille);
    });
  });
  </script>

Le corps du document est vraiment simple, puisqu'il ne comporte qu'une balise <span> dans laquelle nous afficherons les dimensions de la fenêtre. Quant au traitement, il est très simple. Dans un premier temps, les dimensions de la fenêtre ($(window).width et $(window).height) sont mémorisées dans la variable taille :

var taille = 'Taille de la fenêtre : ' + $(window).width() + 'px x ' + $(window).height() + 'px';

Puis le contenu de la variable taille est copié (text(taille)) dans la balise <span> d'identifiant #resultat ($('#resultat')) :

$('#resultat').text(taille);

Essayez de redimensionner la fenêtre, vous verrez que cela fonctionne !

change()

Pour en terminer avec les méthodes événementielles relatives aux éléments, nous allons nous intéresser à la méthode change(). Cette méthode est exécutée chaque fois que le contenu de l'élément concerné change. Elle peut être utilisée sur les balises <input>, <textarea> et <select>. À titre d'exemple, nous allons détecter les modifications dans une liste déroulante et afficher un message en conséquence.

<form>
  Sélectionnez une valeur dans la liste déroulante
  <select>
    <option>J'aime jQuery</option>
    <option>J'adore jQuery</option>
    <option>Je raffole de jQuery</option>
    <option>jQuery ? Jamais entendu parler !</option>
  </select>
</form><br />

<span id="resultat"></span><br />

<script src="jquery.js"></script>
<script>
  $(function() {
    $('select').change(function() {
        $('#resultat').text('Vous venez de sélectionner "' + $(this).val() +'".');
    });
  });
</script>

Le corps du document met en place une liste déroulante qui contient quatre éléments. L'élément sélectionné dans la liste sera indiqué dans la balise <span> d'identifiant #resultat. La partie la plus intéressante du code se trouve bien évidemment entre les balises <script> et </script>. La méthode événementielle change() est appliquée à la balise <select>. Chaque fois que l'utilisateur sélectionne une valeur dans la liste, cette méthode est exécutée :

$('select').change(function() {

Le texte de l'élément sélectionné dans la liste ($(this).val()) est alors affiché dans la balise <span> d'identifiant #resultat ($('#resultat').text) :

$('#resultat').text('Vous venez de sélectionner "' + $(this).val() +'".');

La figure suivante vous montre un exemple d'exécution.

Le texte est mis à jour en fonction du choix dans la liste
Le texte est mis à jour en fonction du choix dans la liste

Les pages

Appliquée à l'élément window, la méthode événementielle load() permet de tester le complet chargement d'une page, en incluant les textes, images et autres objets qui la composent. Quant à la méthode unload(), elle est déclenchée lorsque l'internaute a demandé un changement de page. Voyons comment utiliser ces deux méthodes :

<img src="canard.jpg"><br />
<a href="http://www.siteduzero.com">Cliquez ici pour aller sur le Site du Zéro</a>

<script src="jquery.js"></script>
<script>
  $(function() {
    alert('Le DOM est chargé');
    $(window).load(function() {
        alert('La page est entièrement chargée');
    });
    $(window).unload(function() {
        alert('Vous avez demandé à changer de page');
    });
  });
</script>

Le corps du document contient une image et un lien qui pointe vers le Site du Zéro. Lorsque le DOM est disponible, une boîte de dialogue est affichée :

alert('Le DOM est chargé');

Le contenu de la page est alors chargé. Lorsque l'image et le lien sont en mémoire, la méthode événementielle $(window).load() s'exécute. Une autre boîte de dialogue est alors affichée :

alert('La page est entièrement chargée');

Enfin, quand l'utilisateur clique sur le lien « Cliquez ici pour aller sur le Site du Zéro », puis clique sur Page précédente ou Page suivante du navigateur ou lorsqu'il ferme ce dernier, la méthode événementielle $(window).unload() est exécutée, ce qui produit l'affichage d'une troisième boîte de dialogue :

alert('Vous avez demandé à changer de page');

La méthode unload() est toujours appliquée à l'élément window, c'est-à-dire à la fenêtre du navigateur. Par contre, la méthode load() peut être appliquée à un autre élément auquel est associé une URL : une balise <img>, <script>, <frame> ou <iframe>. Dans ce cas, le code associé à cette méthode est exécuté lorsque l'élément correspondant et ses enfants (s'ils existent) sont entièrement chargés.

Par exemple, vous utiliserez les instructions suivantes pour afficher les dimensions d'une image après son complet chargement :

$('#image1').load(function() {
  alert(this.width + ' x ' + this.height);
}

… où #image1 est l'identifiant de l'image.

  • Dans une méthode de gestion événementielle de type mousedown(function(e)), e.which indique quel bouton a été pressé (1 pour le bouton gauche, 2 pour le bouton central, 3 pour le bouton droit). Dans une méthode de gestion événementielle de type keypress(function(e)), e.which retourne le code ASCII de la touche pressée. Ce code peut être converti en un caractère avec la fonction JavaScript String.fromCharCode().

  • Vous utiliserez la méthode focus() pour effectuer un traitement suite au gain de focus par un élément et la méthode blur() pour effectuer un traitement suite à la perte de focus par un élément. Si le gain et la perte de focus peuvent également concerner les enfants de l'élément, vous utiliserez les méthodes focusin() et focusout().

  • Appliquée à l'élément window, la méthode load() permet d'exécuter du code lorsque la page est entièrement chargée, en incluant les textes, images et autres objets qui la composent. Quant à la méthode unload(), elle permet d'exécuter du code juste avant un changement de page demandé par l'utilisateur.

Exemple de certificat de réussite
Exemple de certificat de réussite