• Medium

Free online content available in this course.

Paperback available in this course

course.header.alt.is_certifying

Got it!

Last updated on 5/18/20

Les bases de la gestion événementielle

Log in or subscribe for free to enjoy all this course has to offer!

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ùselest un sélecteur jQuery comme ceux que vous avez rencontrés jusqu'ici etmgeest 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 classeresultat. 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()oumouseover()

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

mouseleave()oumouseout()

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#targetfait référence à l'imagepetitchat.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 variableslargeurethauteur:

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()  permet d'obtenir ou de modifier les coordonnées de l'objet auquel elle est appliquée.

Ainsi, le code suivant récupère les coordonnées de l'image possédant l'id  target  et affecte le résultat à la variable p

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 JavaScriptp, 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'à  passer l'objet  p  en argument de la méthode offset()  pour déplacer 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 variablex:

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 JavaScriptMath.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 variabley.

Pour déplacer l'image, nous utilisons la technique traditionnelle. Nous commençons par créer un objet jQuery qui contient les coordonnées de la position actuelle de l'image :

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

 Puis nous modifiions les coordonnées de l'image en utilisant les coordonnées x  ety tirées aléatoirement dans l'étape précédente :

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

Puis nous déplaçons l'image en utilisant la méthodeoffset():

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

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

Vous pouvez évidemment remplacer la méthodeclick()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éthodescroll().

<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éthodescroll():

$('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 motwindowdans 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éthodeevent.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éthodeevent.type. La valeur renvoyée pourra êtreclick,dblclick,mousedown,mouseenter,mouseover,mouseleave,mouseout,mousemoveoumouseup.

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énementmousedown. Remarquez le paramètreepassé à la fonction :

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

Les méthodese.typeete.whichsont 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énementkeydownet l'autre à l'événementkeyup. 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éthodeevent.whichqui 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éthodeevent.type. La valeur renvoyée pourra êtrekeydown,keypressoukeyup, en fonction de la méthode événementielle utilisée. Voyons comment utiliser la méthodeevent.whichen 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

Aveckeydown()etkeyup(), 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éthodekeypress():

$('#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 variablec. 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éthodesfocus()etblur()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éthodesfocusin()etfocusout()sont comparables aux méthodesfocus()etblur()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éthodesfocus()etblur().

<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 estfocus(). L'événement déclencheur sera donc la réception du focus :

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

Examinez le sélecteur. Toutes les balises de classefsont 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 estblur(). L'événement déclencheur sera donc la perte du focus :

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

Cette méthode concerne les balises de classef, 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éthodesfocusin()etfocusout(), et montrer leurs différences par rapport aux méthodesfocus()etblur(). 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#premieret#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éthodefocusin()est appliquée aux élémentsfieldset, 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éthodesfocusin()etfocusout()parfocus()etblur()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énementielleresize(). 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).widthet$(window).height) sont mémorisées dans la variabletaille:

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

Puis le contenu de la variabletailleest 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éthodechange(). 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énementiellechange()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émentwindow, la méthode événementielleload()permet de tester le complet chargement d'une page, en incluant les textes, images et autres objets qui la composent. Quant à la méthodeunload(), 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 surPage précédenteouPage suivantedu 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éthodeunload()est toujours appliquée à l'élémentwindow, c'est-à-dire à la fenêtre du navigateur. Par contre, la méthodeload()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ù#image1est l'identifiant de l'image.

  • Dans une méthode de gestion événementielle de typemousedown(function(e)),e.whichindique 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 typekeypress(function(e)),e.whichretourne le code ASCII de la touche pressée. Ce code peut être converti en un caractère avec la fonction JavaScriptString.fromCharCode().

  • Vous utiliserez la méthodefocus()pour effectuer un traitement suite au gain de focus par un élément et la méthodeblur()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éthodesfocusin()etfocusout().

  • Appliquée à l'élémentwindow, la méthodeload()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éthodeunload(), elle permet d'exécuter du code juste avant un changement de page demandé par l'utilisateur.

Example of certificate of achievement
Example of certificate of achievement