Table des matières
La gestion des événements en JavaScript
View more Tutorials:
Suivez-nous sur notre fanpage pour recevoir des notifications chaque fois qu'il y a de nouveaux articles.
Facebook
L'événement (event) est un signal que quelque chose s'est produit. Par exemple, vous cliquez sur un bouton (button), ou vous fermez le navigateur, .. Tous les nœuds DOM génèrent (generate) de tels signaux, mais il existe des événements autres que le DOM par exemple, votre événement de fermeture de la fenêtre du navigateur.
Vous trouverez ci-dessous une liste des événements DOM les plus utiles :
Mouse Events:
| Evénement | Description |
|---|---|
| click | L'événement se produit lorsque l'utilisateur clique (click)sur un élément (element). |
| contextmenu | L'événement se produit lorsque l'utilisateur clique avec le bouton droit (right-clicks) de la souris sur un élément pour ouvrir context-menu. |
| dblclick | L'événement se produit lorsque l'utilisateur double-clique (double-clicks) sur un élément. |
| mousedown | L'événement se produit lorsque l'utilisateur appuie sur un bouton de la souris sur un élément. |
| mouseup | L'événement se produit lorsqu'un utilisateur relâche un bouton de la souris sur un élément. |
| mouseenter | L'événement se produit lorsque le pointeur (pointer) est déplacé sur un élément. |
| mouseleave | L'événement se produit lorsque le pointeur (pointer) est déplacé sur un élément. |
| mousemove | L'événement se produit lorsque le pointeur se déplace alors qu'il est au-dessus d'un élément. |
| mouseout | L'événement se produit lorsqu'un utilisateur déplace le pointeur de la souris hors d'un élément, ou hors de l'un de ses enfants. |
| mouseover | L'événement se produit lorsque le pointeur est déplacé sur un élément ou sur l'un de ses enfants. |
Événements des éléments de Form.
| Evénement | Description |
| submit | Lorsqu'un utilisateur submit (envoyer) le contenu d'un <form>. |
| focus | Lorsqu'un utilisateur se concentre (focus) à un élément, par exemple <input>. |
| blur | Lorsqu'un utilisateur quitte un élément, par exemple <input>. |
Événements clavier :
| Evénement | Description |
|---|---|
| keydown | L'événement se produit lorsque l'utilisateur appuie sur une touche (key). |
| keyup | L'événement se produit lorsque l'utilisateur relâche une touche |
| keypress | L'événement se produit lorsque l'utilisateur appuie (press) sur une touche. (Effectuer 2 actions, appuyer et relâcher). |
Des événements Document.
| Evénement | Description |
| DOMContentLoaded | Lorsque le contenu HTML est téléchargé (loaded) et procédé. Le modèle DOM a été complètement créé. |
Des événements CSS :
| Evénement | Description |
|---|---|
| animationstart | L'événement se produit lorsqu'une animation CSS a démarré. |
| animationend | L'événement se produit lorsqu'une animation CSS a complété. |
| animationiteration | L'événement se produit lorsqu'une animation CSS a répété. |
Gestion des événements :
Pour gérer l'événement, vous devez attacher l'événement à un gestionnaire (handler). Le gestionnaire peut être une fonction. Lorsque l'événement se produit, le gestionnaire (handler) sera appelé à opérer. Le gestionnaire est un moyen d'exécuter des codes Javascript correspondant aux actions de l'utilisateur.
Le gestionnaire (handler) peut être défini dans le HTML avec l'attribut (attribute) on{event}. Par exemple, événement click :
<input value="Click me" onclick="alert('Click!')" type="button">
<input value="Click me" onclick="someFunction()" type="button">
L'objet this représente pour l'élément générant l'événement.
<input value="Click me" onclick="someFunction(this)" type="button">
Lorsque l'événement se déroule, Javascript crée l'objet event et vous pouvez l'utiliser comme valeur de paramètre.
<input value="Click me" onclick="someFunction(event)" type="button">
Vous pouvez également accéder à l'événement générateur d'événement via l'objet event.
var target = event.target;
Un événement simple et souvent rencontré est l'événement par lequel les utilisateurs cliquent (click) sur un élément. En voici un exemple simple. L'utilisateur clique sur le bouton "=" pour additionner deux chiffres.
onclick-example.html
<!DOCTYPE html>
<html>
<head>
<title>Hello Javascript</title>
<script type = "text/javascript">
function doCalculate() {
var a = document.getElementById("a").value; // A String value
var b = document.getElementById("b").value; // A String value
var c = Number(a) + Number(b);
document.getElementById("c").value = c;
}
</script>
</head>
<body>
<h3>Click Event example</h3>
<input id = "a" type="text" value= "100"/> <br/>
+ <br/>
<input id = "b" type="text" value = "200"/> <br/>
<button onclick="doCalculate()"> = </button> <br/>
<input id = "c" type="text" value = ""/>
</body>
</html>
-
L'objet this est l'élément qui émet l'événement. Vous pouvez passer (pass) cet objet dans la fonction de traitement des événements.
this-obj-example.html
<!DOCTYPE html>
<html>
<head>
<title>Event Example</title>
<script type = "text/javascript">
function changeSize(target) {
var random = Math.round(Math.random() * 100) + 200;
target.style.width = random + "px";
target.style.height = random + "px";
}
</script>
</head>
<body>
<h3>Event with 'this' object</h3>
<button onclick="changeSize(this)">Click Me to Change Size</button>
</body>
</html>
-
Lorsque l'événement se produit, un objet event est créé par Javascript. Il contient les informations relatives à l'événement. Par exemple, pour l'événement souris, l'objet event peut contenir des informations telles que la position de la souris par rapport au navigateur, la position de la souris par rapport à l'élément qui émet l'événement, .... Vous pouvez utiliser l'objet event pour passer (pass) dans la fonction de traitement des événements.
<input value="Click me" onclick="someFunction(event)" type="button">
mouse-events-example.html
<!DOCTYPE html>
<html>
<head>
<title>Javascript Mouse Events</title>
<script src="mouse-events-example.js"></script>
<style>
.my-div {
width: 290px;
height: 100px;
background: blue;
}
</style>
</head>
<body>
<h3>Mouse Events (Enter, Move, Leave)</h3>
<div class="my-div"
onmouseenter="mouseenterHandler(event)"
onmouseleave="mouseleaveHandler(event)"
onmousemove="mousemoveHandler(event)">
</div>
<h3>Mouse position</h3>
<div style="color:red;" id="position-div">
</div>
<h3>Statistics</h3>
<div style="color:red;" id="statistics-div">
</div>
</body>
</html>
mouse-events-example.js
var enterCount = 0;
var moveCount = 0;
var leaveCount = 0;
function mouseleaveHandler(evt) {
leaveCount += 1;
showPosition(evt);
showStatistics();
}
function mouseenterHandler(evt) {
enterCount += 1;
showPosition(evt);
showStatistics();
}
function mousemoveHandler(evt) {
moveCount += 1;
showPosition(evt);
showStatistics();
}
function showPosition(evt) {
var html = "offsetX: " + evt.offsetX +"<br/>" //
+
"offsetY: " + evt.offsetY;
document.getElementById("position-div").innerHTML = html;
}
function showStatistics() {
var html =
"enterCount:" + enterCount + "<br/>" //
+
"moveCount:" + moveCount + "<br/>" //
+
"leaveCount:" + leaveCount;
document.getElementById("statistics-div").innerHTML = html;
}
-
Vous pouvez accéder à l'événement émetteur de l'élément via l'objet event.
event-obj-example.html
<!DOCTYPE html>
<html>
<head>
<title>Event Example</title>
<script type = "text/javascript">
function changeSize(evt) {
var target = evt.target;
var random = Math.round(Math.random() * 100) + 100;
target.style.width = random + "px";
target.style.height = random + "px";
}
</script>
</head>
<body>
<h3>Access 'target' object via 'event' object</h3>
<button onclick="changeSize(event)">Click Me to Change Size</button>
</body>
</html>
-
Exemple d'un gestionnaire avec plusieurs paramètres.
multi-params-example.html
<!DOCTYPE html>
<html>
<head>
<title>Event Example</title>
<script type = "text/javascript">
function changeSize(borderColor, target, evt, bgColor) {
var random = Math.round(Math.random() * 100) + 100;
target.style.width = random + "px";
target.style.height = random + "px";
target.style.borderColor = borderColor;
target.style.backgroundColor = bgColor;
}
</script>
</head>
<body>
<h3>A Handler has multiple parameters</h3>
<a href="">Reset</a> <br/><br/>
<button onclick="changeSize('red', this, event, 'green')">Click Me</button>
</body>
</html>
*
