Apprendre Javascript pour rendre vos pages Web interactives
Page 21: Objet Document et DOM en Javascript (Partie 3)
Toutes les pages 
Apprendre Javascript pour rendre vos pages Web interactives
Page 21
Objet Document et DOM en Javascript (Partie 3)
Objet Document et DOM en Javascript (Partie 3)
Fonctions anonymes
Dans cette partie on va voir une autre manière de déclarer ses fonctions en Javascript qui consiste à créer celles-ci à la volée.Même si j'ai préféré traiter ce sujet dans la partie DOM, sachez qu'on peut utiliser les fonctions anonymes partout en Javascript, même sans utiliser l'interface DOM.
Dans la plupart des cas, on a besoin de déclarer des fonctions anonymes sur des objets (nœuds) nouvellement intégrés au DOM.
D'une manière générale une fonction anonyme est déclarée comme ceci:
objet.onévénement = function() { corps de la fonction }
Dans ce cas, si l'événement déclaré comme attribut sur l'objet est détecté sur celui-ci, le code (corps de la fonction) sera exécuté.
Essayons d'améliorer le premier exemple de la page précédente où on crée des DIV dynamiquement. L'objectif est d'afficher un message dans la boite alert() une fois une des DIVs créées est survolée.
Voici le code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<style>
.maclasse{
width:200px;
height:60px;
background-color:#EE6600;
margin:10px;
font:14pt verdana;
padding:10px;
color:#FFFFFF;
}
</style>
<script language="javascript">
function ajouter(){
baliseDIV=document.createElement("div");
baliseDIV.className="maclasse";
message=document.createTextNode("Bonjour à tous.");
baliseDIV.appendChild(message);
document.getElementById("madiv").appendChild(baliseDIV);
baliseDIV.onmouseover=function(){
alert("Bonjour");
}
}
</script>
</head>
<body onLoad="decoup()">
<input type="button" value="Ajouter une DIV" onClick="ajouter()" />
<div id="madiv"></div>
</body>
</html>
Ce qui donne:
<html>
<head>
<meta charset="UTF-8" />
<style>
.maclasse{
width:200px;
height:60px;
background-color:#EE6600;
margin:10px;
font:14pt verdana;
padding:10px;
color:#FFFFFF;
}
</style>
<script language="javascript">
function ajouter(){
baliseDIV=document.createElement("div");
baliseDIV.className="maclasse";
message=document.createTextNode("Bonjour à tous.");
baliseDIV.appendChild(message);
document.getElementById("madiv").appendChild(baliseDIV);
baliseDIV.onmouseover=function(){
alert("Bonjour");
}
}
</script>
</head>
<body onLoad="decoup()">
<input type="button" value="Ajouter une DIV" onClick="ajouter()" />
<div id="madiv"></div>
</body>
</html>
L'attribut qui représente l'événement (onmouseover par exemple) doit être en minuscule.
Gestionnaire d'événements dynamique
Méthode addEventListener()
Si les fonctions anonymes permettent de créer des fonction à la volée sur n’importe quel objet Javascript, la méthode addEventListener() quant à elle, permet de d'ajouter dynamiquement un gestionnaire d'événement en s'appuyant sur les spécifications du DOM.La syntaxe du gestionnaire d'événements dynamique est:
objet.addEventListener( Nom_de_l'événement , fonction_à_executer , booléen )
- Le nom de l'événement définit l'événement à prendre en compte par le gestionnaire. Par exemple: click, mouseover, mousemove... (Pas de préfixe on).
- Fonction à exécuter représente le nom de la fonction à appeler (sans parenthèses) ou une fonction anonyme à travers laquelle on exécute le code directement sans définir une fonction au préalable .
- La valeur booléenne peut être true ou false. Chacune des deux valeurs représente un mode de propagation des événements en Javascript. En effet, il existe deux modes: Capture représenté par true et bouillonnement représenté par false. Nous aurons l'occasion de voir la propagation des événements dans la partie suivante.
Avec le gestionnaire d'événements dynamique, l'exemple précédent devient:
<html>
<head>
<meta charset="UTF-8" />
<style>
.maclasse{
width:200px;
height:60px;
background-color:#EE6600;
margin:10px;
font:14pt verdana;
padding:10px;
color:#FFFFFF;
}
</style>
<script language="javascript">
function afficherMessage(){
alert("Bonjour");
}
function ajouter(){
baliseDIV=document.createElement("div");
baliseDIV.className="maclasse";
message=document.createTextNode("Bonjour à tous.");
baliseDIV.appendChild(message);
document.getElementById("madiv").appendChild(baliseDIV);
baliseDIV.addEventListener("mouseover",afficherMessage,false);
}
</script>
</head>
<body onLoad="decoup()">
<input type="button" value="Ajouter une DIV" onClick="ajouter()" />
<div id="madiv"></div>
</body>
</html>
Ce qui donne:
<head>
<meta charset="UTF-8" />
<style>
.maclasse{
width:200px;
height:60px;
background-color:#EE6600;
margin:10px;
font:14pt verdana;
padding:10px;
color:#FFFFFF;
}
</style>
<script language="javascript">
function afficherMessage(){
alert("Bonjour");
}
function ajouter(){
baliseDIV=document.createElement("div");
baliseDIV.className="maclasse";
message=document.createTextNode("Bonjour à tous.");
baliseDIV.appendChild(message);
document.getElementById("madiv").appendChild(baliseDIV);
baliseDIV.addEventListener("mouseover",afficherMessage,false);
}
</script>
</head>
<body onLoad="decoup()">
<input type="button" value="Ajouter une DIV" onClick="ajouter()" />
<div id="madiv"></div>
</body>
</html>
On aurait pu remplacer la ligne:
baliseDIV.addEventListener("mouseover",afficherMessage,false);
par
baliseDIV.addEventListener("mouseover",function(){alert("Bonjour");},false);
Au lieux d'appeler la fonction afficherMessage qui est censée afficher le message. On aurait pu déclarer le code à exécuter directement à travers une fonction anonyme.
Méthode removeEventListener()
La méthode removeEventListener() permet de retirer un gestionnaire d’événement dynamique créé par la méthode addEventListener().La syntaxe de la suppression d'un gestionnaire d'événements dynamique est:
objet.removeEventListener( Nom_de_l'événement , fonction_à_executer , booléen )
Les paramètres sont les mêmes que addEventListener().
Gestion avancée des événements en vidéo
Page 21
Objet Document et DOM en Javascript (Partie 3)
Objet Document et DOM en Javascript (Partie 3)
