Javascript - Les événements

Qu'appelle-t-on un événement?

Les événements sont des actions de l'utilisateur, qui vont pouvoir donner
lieu à une interactivité. L'événement par excellence est le clic
de souris, car c'est le seul que le HTML gère. Grâce au Javascript il est possible
d'associer des fonctions, des méthodes à des événements tels que le passage
de la souris au-dessus d'une zone, le changement d'une valeur, ...

Ce sont les gestionnaires d'événements qui permettent d'associer une action à un événement.
La syntaxe d'un gestionnaire d'événement est la suivante :

onEvenement="Action_Javascript_ou_Fonction();"

Les gestionnaires d'événements sont associés à des objets, et leur code s'insèrent
dans la balise de ceux-ci...

Liste des événements

Association des événements aux objets

Chaque événement ne peut pas être associé à n'importe quel
objet. Il est évident par exemple qu'un événement OnChange ne pourra pas s'appliquer
à un lien hypertexte. Voici un tableau récapitulant les objets auxquels peuvent
être associés chaque événement :

Les evenements des objets et api

contrairement a la pluparts des evenements utilisateur ces evenement servent surtout a informer sur des etats

Historiquement les premier de ces évènements son ceux qui servent a contrôler le préchargement d'une image et appartenant a l'objet image appelé par new image ils sont au nombre de trois 'onload' pour signifier que l'image a été chargé, 'onerror' pour prévenir que le chargement de l'image a échoué et onAbort pour prevenir que le chargement de l'image a été interompu, un autre évènement bien connu en ajax (requête vers un serveur servant a modifier une page sans rechargement de la page) est 'onreadystatechange' de l'objet XMLHttpRequest , cette évènement sert a informer des différentes états d'une requête.

avec l'avenement du html5 et de ces differentes api le nombre d'evenements s'est vu multiplié de facon importante rien qui l'api audio - video comporte 23 evenements (oncanplay ,onended,onpause...etc)

Associer un evenement a un element

Pour ce faire il suffit des mettre dans la balise le nom de l'evenement et de lui associé une fonction

exemple :

<img src='une_image.jpg ' onclick='nom_de_lafonction(parametre1,parametre2)' />

parametres1 et parametre2 correspondes a des paramètres que l'on veut transmettre a la fonction

afin d' exécuter plusieurs fonctions sur le même évènement il suffit de rajouter un point virgule a la suite de chaque fonction.

<img src='une_image.jpg' onclick='fonction1() ; fonction2() ; fonction3()' />

Associer dynamiquement un évènement a un élément

Consiste a ajouter un évènement a une balise dans la page HTML alors que la page est déjà chargé ou a une balise HTML creé dynamiquement.

il existe trois méthodes,

Méthode 1

La première méthode qui est La plus ancienne consiste a pointer vers l'élément cible a lui associer l'évènement et lui adjoindre le nom de la fonction sans les parenthèses.
exemple:

document.getElementById('mon_element').onclick=nom_de_la_fonction

très utile car compatible même avec les anciens navigateurs et simple a mettre en oeuvre

On peut aussi lui adjoindre une fonction anonyme (fonction sans nom) afin de lui adjoindre un ou des paramètres. cette façon de faire est aussi utiliser afin de simplifier l’écriture du code mais attention car une fonction annonyme ne comporte pas de nom et a la lecture il sera donc difficile de savoir a quoi elle sert dans ce car il sera judicieux de mettre un commentaire

exemple :

document.getElementById('mon_element').onclick=function("un_parametre"){du code du code...etc}

Le problème de cette méthode est que l'on peut adjoindre qu' une seule fonction pour le même évènement la plus par du temps c'est suffisant mais dans certains cas comme au chargement d'une page ou plusieurs fonctions peuvent être appelé cette méthode atteint ces limites.

afin de supprimer l'evenement a l'element on réassigné l’évènement en mettant une chaine vide.

document.getElementById('mon_element').onclick=""

Methode 2 addEventListener, removeEventListener

addEventListener

'addEventListener' fait partie de l'objet event que l'on abordera plus bas

La syntaxe consiste a pointer vers l'élément cible et a appeler addEventListener en precisant l'evenement puis la fonction a executer.
exemple :

document.getElementById('mon_element').addEventListener("click', nom_de_la_fonction, false);

Cette méthode contrairement a la precedente permet d' adjoindre plusieurs fonction pour le mêmes évènement.

document.getElementById('mon_element').addEventListener("click', nom_de_la_fonction_1, false);
document.getElementById('mon_element').addEventListener("click', nom_de_la_fonction_2, false);

removeEventListener

Pour retirer l’évènement on utilise 'removeEventListener' en précisant la fonction a ne plus executer.

L'avantage de cette méthode c'est qu'elle ne supprime pas l' évènement de l’élément auquel il est rattaché et en conséquence les autres fonction rattaché a cette évènement seront toujours exécuté.

document.getElementById('mon_element').removeEventListener("click', nom_de_la_fonction_1, false);

Avec addEventListener il est possible de preciser une fonctions anonymes mais comme une fonction anonyme ne contient pas de nom il ne sera pas possible de retiré l' exécution d la fonction car pour etre utilisé removeEventListener doit comporter l’évènement ainsi que la fonction a retiré.

Pourquoi ajouter plusieurs fonctions sur le même évènement

une de raison les plus connus est au chargement d'une page avec l'évènement "onload".

imaginons qu'il y ai plusieurs scripts dans une page et que ces script doivent passer par une fonction d'initialisation .

document.onload=fonction_1
document.onload=fonction_2

dans cette exemple seule la deuxième fonction sera appelé car le première onload aura été écrasé par le second .

afin d'eviter d'ecraser les autres fonction il faut donc utiliser addEventListener.

document.addEventListener("load', fonction_1, false);
document.addEventListener("load',fonction_2, false);

et de cette manière les deux fonctions seront exécuté.

Methode 3 'setAttribute'

• un évènement dans une balise est considéré comme un attribut et pour cette troisième méthode nous allons utiliser 'setAttribute'.

exemple:

document.getElementById('mon_element').setAttribute('onclick','nom_de lafonction('paramètre',event));

la méthode va insérer dans la balise l'évènement de la même manière que si on le faisait soit même on peut rajouter des paramètres et plusieurs fonction pour le même évènement sur l'élément.

le problème de cette méthode est que si il y a plusieurs fonction associé a l'évènement il ne sera pas possible de retirer l'évènement a l'une des fonction on aurra uniquement la posibilite de toutes les retirer avec removeAttribute

document.getElementById('mon_element').removeAttribute('onclick');

cette méthode est rarement utilisé.

les paramètres de fonction dans un évènement

sujet pas toujours abordé mais qui mérite que l'on si attarde surtout le paramètre "event".

les paramètres sont mis a l'intérieur des parenthèses de la fonction et chaque paramètre est séparé par une virgule.

fonction la_fonction(param_1,param_2,param_3)

les paramètres basiques

il s'agit soit de valeurs numérique soit de chaines de caractères.

imaginons trois boutons auxquelles on y adjoint un évènement "onclick" avec comme paramètre de fonction une couleur et a coté un div , et a chaque fois que l'on cliquera sur un des boutons le div prendra la couleur du paramètre.

<!DOCTYPE html>

<script type="text/javascript">

function couleur(parametre_couleur){

document.getElementById('dv').style.backgroundColor=parametre_couleur;

}

</script>

</head>

<body>

<button onclick='couleur("blue")'>bleu</button>

<button onclick='couleur("green")'>vert</button>

<button onclick='couleur("red")'>rouge</button>

<br><br>

<div id='dv' style='height:50px;width:50px;background-color:black'></div>

</body>

</html>

le paramètre this

this comme son nom l'indique pointe l'Élément d'où provient l'évènement il evitera de mettre un id a l'element et donc d'utiliser document.getElementById().

dans l'exemple suivant on a un div de couleur vert avec un évènement 'onclick' et comme paramètre a la fonction this et quand on clique sur le div une alerte donnera la couleur de fond (backgroundColor) du div.

<!DOCTYPE html>

<script type="text/javascript">

function couleur(lui){

var couleur_cible=lui.style.backgroundColor;

alert(couleur_cible);

}

</script>

</head>

<body>

<div onclick='couleur(this)' style='height:50px;width:50px;background-color:green'>clic moi</div>

</body>

</html>

Event gestion globale des evenement

event

Event fait partie de la gestion globale des événements par le navigateur il est considéré comme un objet et possède donc des méthodes et propriété.

capture des évènement de la souris du clavier et autre

Pour l'utiliser il suffit de mettre le mot event comme parametre de fonction comme dans cette exemple qui utilise currentTarget et qui renvoi l’élément déclencheur de l'evenement comme le fait this

<!DOCTYPE html>
<script type="text/javascript">

function couleur(evt){

var couleur_cible=evt.currentTarget.style.backgroundColor;

alert(couleur_cible);
}

</script>
</head>
<body>

<div onclick='couleur(event)' style='height:50px;width:50px;background-color:green'>clic moi</div>

</body>
</html>

lors de la création dynamique d' évènement le paramètre est implicitement déclarè.

reprenons le code précédent en le modifiant afin de créer dynamiquement au chargement de la page l' évenement onclick pour se faire on retire l'evenement de la balise on donne un id a la balise et on ajoute cette ligne entre les balise script

window.onload=function(){
document.getElementById("un_div").onclick=couleur
}

Avec addEventListener c'est la meme chose

window.onload=function(){
document.getElementById("un_div").addEventListener("click", couleur, false)
}

ce qui donne

<!DOCTYPE html>
<script type="text/javascript">

window.onload=function(){

document.getElementById("div_1").onclick=couleur;

document.getElementById("div_2").addEventListener("click", couleur_2, false);
}


function couleur(evt){

var couleur_cible=evt.currentTarget.style.backgroundColor;

alert(couleur_cible);
}

function couleur_2(evt){

var couleur_cible=evt.currentTarget.style.backgroundColor;

alert(couleur_cible);
}

</script>
</head>
<body>

<div id="div_1" style='height:50px;width:50px;background-color:green'>clic moi</div>
<br>
<div id="div_2" style='height:50px;width:50px;background-color:blue'>clic moi</div>

</body>
</html>

Sans a avoir a préciser le paramètre "event" on se rend compte que l'evenement a bien été transmis au paramètre de la fonction.

Exemple

pour un peut mieux comprendre le fonctionnement de event voici un exemple qui reprend une partie des méthodes et propriétés

pour le carré gris qui contient un carré bleue qui lui même contient le carré rouge et le carré vert . on cherche a bien comprendre l'utilisation stopPropagation(); quand on clic dans le carré rouge on appel la fonction lien_a qui comprend stopPropagation() et de meme pour le carré vert qui lui appel la fonction lien_b et qui elle ne comprend pas stopPropagation() .

le carré de couleur cyan utilise type et button.

dans les deux premiers input on affiche les coordonnés de souris donné par clientX et clientY.

les deux autres input utilise les evenements de clavier.

et enfin preventDefault() est utilisé dans le document ce qui a pour effet d'empeché d'afficher le menu du clic droit de souris et la selection de texte dans la page

<!DOCTYPE html>


<title>source javascript</title>


<script type="text/javascript">


function lien_a(evt){


evt.stopPropagation();

alert(evt.currentTarget.id);

}


function lien_b(evt){


alert(evt.currentTarget.id);

}


function lien2(evt){


alert(evt.currentTarget.id);

}


function lien3(evt){


alert(evt.currentTarget.id);

}


function ev(evt){ // affiche quelle bouton ade souris a été pressé et le type d'evenement


document.getElementById('cc').value=evt.button;

document.getElementById('dd').value=evt.type;


}


document.onmousemove=function(evt){ //affiche la position de la souris en X et Y par rapport au navigateur

document.getElementById('ee').value=evt.clientX;

document.getElementById('ff').value=evt.clientY;

}


document.onkeypress=function(evt){ //affiche le code clavier de la touche pressé

document.getElementById('gg').value=evt.charCode;

document.getElementById('hh').value=String.fromCharCode(evt.charCode);

}


document.onmousedown=function(evt){evt.preventDefault();} //évite la selection du texte dans le document


document.onclick=function(evt){evt.preventDefault()} //evite l'affichage du menu de souris clic droit

</script>

</head>

<body>


<div  onmousedown='lien3(event)'id='div_gris' style='display:inline-block;height:300px;width:300px;background-color:gray'>

<div  onmousedown='lien2(event)' id='div_bleu' style='margin:auto;margin-top:30px;height:200px;width:200px;background-color:blue'>


<div  onmousedown='lien_a(event)'id='div_rouge' style='margin:auto;height:80px;width:80px;background-color:red'>texte  texte  texte texte </div>

<br>

<div  onmousedown='lien_b(event)'id='div_vert' style='margin:auto;margin-top:5px;height:80px;width:80px;background-color:green'></div>


</div>

</div>

<div  onclick='ev(event)' onmouseover='ev(event)' ondblclick='ev(event)' onmouseout='ev(event)' onmousedown='ev(event)'style='display:inline-block;height:150px;width:150px;background-color:cyan'>

bouton de souris

<br>

<input type='texte' id='cc'></input>

evenement

<br>

<input type='texte' id='dd'></input>

</div>

<br>

<br>

<input type='texte' id='ee'></input>

<input type='texte' id='ff'></input>

<br>

evenement de touche

<br>

<input type='texte' id='gg'></input>correspond a

<input type='texte' id='hh'></input>

</body>

</html>

...

...