Chapitre 4: Évènements Et Formulaires en Javascript: 1. C'Est Quoi Un Évènement ?

Chapitre 4 : Évènements et formulaires en
JavaScript
Les évènements sont des actions qui se produisent et auxquelles on va pouvoir répondre en
exécutant un code. Par exemple, on va pouvoir afficher ou cacher du texte suite à un clic d’un
utilisateur sur un élément, on change la taille d’un texte lors du passage de la souris d’un
utilisateur sur un élément.
1. C’est quoi un évènement ?

En JavaScript, un évènement est une action qui se produit et qui possède deux caractéristiques
essentielles :
• C’est une action qu’on peut « écouter », c’est-à-dire une action qu’on peut détecter
car le système va nous informer qu’elle se produit ;
• C’est une action à laquelle on peut « répondre », c’est-à-dire qu’on va pouvoir attacher
un code à cette action qui va s’exécuter dès qu’elle va se produire.
Par exemple, on va pouvoir détecter le clic d’un utilisateur sur un bouton d’un document et
afficher une boite de dialogue ou un texte suite à ce clic. On parlera donc «d’évènement clic».
Il existe de nombreux évènements répertoriés en JavaScript (plus d’une centaine).
Ces évènements peuvent être très différents les uns des autres :
• Le chargement du document est un évènement ;
• Un clic sur un bouton effectué par un utilisateur est un évènement ;
• Le survol d’un élément par la souris d’un utilisateur est un évènement ;
• Etc.
2. C’est quoi un gestionnaire d’évènements ?

Pour écouter et répondre à un évènement, nous allons définir ce qu’on appelle des
gestionnaires d’évènements.
Un gestionnaire d’évènements est toujours divisé en deux parties : une partie qui va servir à
écouter le déclenchement de l’évènement, et une partie gestionnaire en soi qui va être le code
à exécuter dès que l’évènement se produit.
1
Aujourd’hui, en JavaScript, il existe trois grandes façons d’implémenter un gestionnaire
d’évènements :
1. On peut utiliser des attributs HTML de type évènement (non recommandé) ;

2. On peut utiliser des propriétés JavaScript liées aux évènements ;
3. On peut utiliser la méthode addEventListener() (recommandé).
2.1 Gérer un évènement avec les attributs HTML

L’utilisation d’attributs HTML pour prendre en charge un évènement est la méthode la plus
ancienne.
Il s’agit d’insérer un attribut HTML lié à l’évènement qu’on souhaite gérer directement dans
la balise ouvrante d’un élément à partir duquel on va pouvoir détecter le déclenchement de
cet évènement.
Ces attributs HTML de « type évènement » possèdent souvent le nom de l’évènement qu’ils
doivent écouter et gérer précédé par « on » comme par exemple :
• L’attribut onclick pour l’évènement « clic sur un élément » ;
• L’attribut onmouseover pour l’évènement « passage de la souris sur un élément » ;
• L’attribut onmouseout pour l’évènement « sortie de la souris d’élément » ;
• Etc.
On passe en valeur de ces attributs le code JavaScript qu’on souhaite exécuter.
Exemple :
<button onclick="alert ('Le bouton est cliqué !')"> Cliquez sur moi !
</button>
2.2 Gérer un évènement avec les propriétés JS

Les éléments HTML possèdent des propriétés JS qui correspondent à des événements. Le nom
de ces propritétes sont sous la forme on+nomEvenement (similaire aux attributs HTML). Le
code à exécuter est passé en valeur à la propriété.
Exemple :
<body>
<button> Cliquez sur moi ! </button>
<p> paragraphe </p>
<script>
let b = document.querySelector ('button') ;
let p = document.querySelector ('p') ;
b.onclick = function (){ alert ('Bouton cliqué !') };
p.onmouseover = function () { this.style.backgroundColor='orange'} ;
p.onmouseout = function () { this.style.backgroundColor='white'};
</script>
</body>
2
Avec cette méthode, chaque objet ne possède qu’une propriété gestionnaire d’évènements
pour un même type d’évènements. On ne va pas pouvoir réagir plusieurs fois de façons
différentes à un même évènement à partir d’un même élément.
2.3 Gérer un évènement avec la méthode addEventListener()

La méthode addEventListener() est une méthode de l’interface
qu’on va souvent utiliser avec des objets Element car je vous rappelle que l’interface Element
hérite de l’interface Node qui hérite elle-même de EventTarget.
On va passer deux arguments à cette méthode : le nom d’un évènement qu’on souhaite
prendre en charge ainsi que le code à exécuter (qui prendra souvent la forme d’une fonction).
Syntaxe :
element. addEventListener(nomEve, code) ;
Exemple :
<body>
<p> paragraphe </p>
<script>
b.addEventListener('click', function(){alert('Bouton cliqué')});
p.addEventListener('mouseover',
function(){this.style.backgroundColor ='orange'});
p.addEventListener('mouseover', function(){this.style.fontWeight
='bold'});
p.addEventListener('mouseout',
function(){this.style.backgroundColor='white'});
</script>
</body>
La méthode removeEventListener() permet de supprimer un gestionnaire d’évènement

déclaré avec addEventListener(). Pour cela, il va suffire de passer en argument le type
d’évènement ainsi que le nom de la fonction passée en argument de addEventListener().
Syntaxe :
element. removeEventListener(nomEve, nomFonction) ;
Exemple :
<body>
<p> paragraphe </p>
<script>
function changeCouleur(){
this.style.backgroundColor ='orange';
}
3
// quand on clique sur le bouton, on supprime l’évènement mouseover
// qui change la couleur du background du paragraphe
b.addEventListener('click', function(){alert('Bouton cliqué') ;
p.removeEventListener('mouseover', changeCouleur) ;});
p.addEventListener('mouseover',changeCouleur) ;
p.addEventListener('mouseover', function(){this.style.fontWeight
='bold'});
p.addEventListener('mouseout',
function(){this.style.backgroundColor='white'});
</script>
</body>
3. Les formulaires
Avec JavaScript, on peut accéder à chaque élément d'un formulaire pour, par exemple, y aller
lire ou écrire une valeur, noter un choix auquel on pourra associer un gestionnaire
d'événement... Tous ces éléments renforceront grandement les capacités interactives des
pages web.
3.1 Champ de texte

L'objet champ de texte possède trois propriétés :
Propriété Description
name indique le nom du contrôle par lequel on pourra accéder.
defaultvalue indique la valeur par défaut qui sera affichée dans la zone de
texte.
value indique la valeur en cours de la zone de texte.
<FORM NAME="Questions">
<INPUT TYPE="text" NAME="classe" VALUE="">
</FORM>
• Le texte entré par l'utilisateur est affecté à la propriété value du composant classe situé
dans le formulaire Questions placé dans le document courant appelé document (par
défaut).
• De l'intérieur de ce document, le contenu du champ de texte est donc "visible" et
accessible par son nom complet : document.Questions.classe.value
• En particulier, il peut être récupéré et affecté à une variable MaClasse par l'expression:
MaClasse = document.Questions.classe.value
La référence Questions.classe.value est suffisante car la portée du formulaire
Questions est le document où il est inséré.
• Les formulaires dans un même document sont stockés dans un tableau appelé forms;
le premier formulaire est alors noté forms[0], le deuxième est forms[1] etc.. Si
4
Questions est situé en position de premier formulaire, on peut remplacer l'affectation
précédente par : MaClasse = document.forms[0].classe.value
3.2 Les boutons radio

name indique le nom du contrôle. Tous les boutons portent le même nom.
index l'index ou le rang du bouton radio en commençant par 0.
checked indique l'état en cours de l'élément radio
defaultchecked indique l'état du bouton sélectionné par défaut.
value indique la valeur de l'élément radio.
<INPUT TYPE="RADIO" NAME="choix" value="sup. à 10" CHECKED
onClick='Questions.resultat.value=this.value'>plus de 10
<INPUT TYPE="RADIO" NAME="choix" value="entre 8 et 10"

onClick='Questions.resultat.value=this.value'>entre 8 et 10
<INPUT TYPE="RADIO" NAME="choix" value="inf. à 8"

onClick='Questions.resultat.value=this.value'>moins de 8
<INPUT TYPE=TEXTE NAME="resultat" VALUE="" >

</FORM>
Dans le contexte de la gestion d’événements, this va faire référence à l’objet (représentant

l’élément HTML) qui est le sujet de l’événement.
Propriétés de l'objet RADIO
• Questions.choix[num] est le bouton radio N° num (le 1er a le numéro 0) de l'ensemble

de boutons nommé choix
• checked est le booléen décrivant l'état d'un bouton :
• if (Questions.choix[num].checked) …
• Questions.choix[num].value est la valeur associée au bouton N° num de la série de
bouton.
3.3 Les cases à cocher

name indique le nom du contrôle. Toutes les cases à cocher portent un
nom différent.
checked indique l'état en cours de l'élément case à cocher.
defaultchecked indique l'état du bouton sélectionné par défaut.
value indique la valeur de l'élément case à cocher.
5
Le traitement est complètement semblable au cas des boutons radio, à la différence que
chaque case possède un nom propre distinct des autres. L'état checked de chaque case doit
donc être testé individuellement.
3.4 Liste de sélection

La boite de la liste est créé par la balise <SELECT> et les éléments de la liste par un ou plusieurs
tags <OPTION>. La balise </SELECT> termine la liste.
name indique le nom de la liste déroulante.
value Indique la valeur de l’élément sélectionné
length indique le nombre d'éléments de la liste.
selectedIndex indique le rang à partir de 0 de l'élément de la liste qui a été

sélectionné par l'utilisateur.
<SELECT NAME="liste"
onChange=' Questions.resultat.value+=
Questions.liste.options[Questions.liste.selectedIndex].value' > ;
<OPTION VALUE="matin ... " >Matin
<OPTION VALUE="midi ... ">Midi
<OPTION VALUE="soir ... ">Soir
</SELECT>
<INPUT TYPE=TEXTE NAME="resultat" VALUE="Vous avez sélectionné : " >
</FORM>
Propriétés de l'objet SELECT
• selectedIndex est une propriété dont la valeur est le numéro de l'élément sélectionné
dans la liste var num = Questions.liste.selectedIndex ---> num est le numéro de
l'élément sélectionné dans le composant liste situé dans le formulaire F.
• options[]est le tableau prédéfini contenant les objets de la liste
• Questions.liste.options[num] est l'objet champ situé au N° num (rappel : le 1er a le
numéro 0)
• Questions.liste.options[num].value est la valeur de l'option N° num de la liste.
• Questions.liste.options[num].text est le texte suivant le champ <OPTION>.

Chapitre 4: Évènements Et Formulaires en Javascript: 1. C'Est Quoi Un Évènement ?

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Chapitre 4: Évènements Et Formulaires en Javascript: 1. C'Est Quoi Un Évènement ?

Transféré par

Droits d'auteur :

Formats disponibles

Chapitre 4 : Évènements et formulaires en

1. C’est quoi un évènement ?

2. C’est quoi un gestionnaire d’évènements ?

1. On peut utiliser des attributs HTML de type évènement (non recommandé) ;

2.1 Gérer un évènement avec les attributs HTML

2.2 Gérer un évènement avec les propriétés JS

2.3 Gérer un évènement avec la méthode addEventListener()

La méthode removeEventListener() permet de supprimer un gestionnaire d’évènement

3.1 Champ de texte

3.2 Les boutons radio

<INPUT TYPE="RADIO" NAME="choix" value="entre 8 et 10"

<INPUT TYPE="RADIO" NAME="choix" value="inf. à 8"

<INPUT TYPE=TEXTE NAME="resultat" VALUE="" >

Dans le contexte de la gestion d’événements, this va faire référence à l’objet (représentant

• Questions.choix[num] est le bouton radio N° num (le 1er a le numéro 0) de l'ensemble

3.3 Les cases à cocher

3.4 Liste de sélection

name indique le nom de la liste déroulante.

value Indique la valeur de l’élément sélectionné

length indique le nombre d'éléments de la liste.

selectedIndex indique le rang à partir de 0 de l'élément de la liste qui a été

Propriétés de l'objet SELECT

Vous aimerez peut-être aussi