6.1 Objet événement
JavaScript fournit un puissant système d'événements, qui permet de suivre diverses actions de l'utilisateur et d'autres événements se produisant dans le navigateur. Un aspect important du travail avec les événements est l'objet événement, qui contient des informations sur l'événement et fournit des méthodes pour le traiter.
Lorsque l'événement survient, le navigateur crée un objet événement, qui contient des informations sur cet événement. Cet objet est transmis au gestionnaire d'événements en tant qu'argument.
Propriétés de l'objet événement :
type: type d'événement (par exemple,click,keydown).target: l'élément sur lequel l'événement s'est produit.currentTarget: l'élément auquel le gestionnaire d'événements est attaché.eventPhase: phase dans laquelle se trouve l'événement (capture, cible, propagation).bubbles: valeur booléenne indiquant si l'événement peut se propager.cancelable: valeur booléenne indiquant si l'événement peut être annulé.defaultPrevented: valeur booléenne indiquant si l'action par défaut a été empêchée.timeStamp: heure à laquelle l'événement a été créé.isTrusted: valeur booléenne indiquant si l'événement a été initié par l'utilisateur ou par un script.
Méthodes de l'objet événement :
preventDefault(): annule l'action par défaut associée à l'événement.stopPropagation(): arrête la propagation supplémentaire de l'événement.stopImmediatePropagation(): arrête la propagation supplémentaire de l'événement et empêche l'exécution d'autres gestionnaires d'événements pour l'élément actuel.
Exemple d'utilisation de l'objet événement:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Event Object Example</title>
</head>
<body>
<button id="myButton">Click me</button>
<script>
const button = document.getElementById('myButton');
button.addEventListener('click', function(event) {
console.log('Event type:', event.type); // Affichera : click
console.log('Event target:', event.target); // Affichera : <button id="myButton">Click me</button>
console.log('Current target:', event.currentTarget); // Affichera : <button id="myButton">Click me</button>
console.log('Event phase:', event.eventPhase); // Affichera : 2 (Phase cible)
console.log('Bubbles:', event.bubbles); // Affichera : true
console.log('Cancelable:', event.cancelable); // Affichera : true
console.log('Time stamp:', event.timeStamp); // Affichera le temps en millisecondes
console.log('Is trusted:', event.isTrusted); // Affichera : true
});
</script>
</body>
</html>
6.2. Événements de clics (Mouse Events)
Événements de souris sont générés lorsque l'utilisateur interagit avec un élément à l'aide de la souris :
click: événement de clicdblclick: événement de double-clicmousedown: événement de pression de bouton de sourismouseup: événement de relâchement de bouton de sourismousemove: événement de mouvement de sourismouseover: événement de survol de sourismouseout: événement de sortie de souris
Exemple :
HTML
<!DOCTYPE html>
<html>
<head>
<title>Mouse Events Example</title>
</head>
<body>
<button id="myButton">Click Me</button>
<script>
const button = document.getElementById('myButton');
button.addEventListener('click', function(event) {
console.log('Button clicked');
console.log('Event type:', event.type);
console.log('Target element:', event.target);
});
</script>
</body>
</html>
6.3 Événements de chargement (Load Events)
Événements de chargement se produisent lorsque la ressource a terminé de se charger :
load: événement qui se produit lorsque la ressource/page est complètement chargéeDOMContentLoaded: événement qui se produit lorsque le document HTML initial est chargé et analysé sans attendre le chargement complet des feuilles de style, des images, et des sous-trames
Exemple :
HTML
<!DOCTYPE html>
<html>
<head>
<title>Load Events Example</title>
</head>
<body>
<script>
window.addEventListener('load', function(event) {
console.log('Window fully loaded');
});
document.addEventListener('DOMContentLoaded', function(event) {
console.log('DOM fully loaded and parsed');
});
</script>
</body>
</html>
6.4 Événements de focus (Focus Events)
Événements de focus sont générés lorsqu'un élément reçoit ou perd le focus.
focus: événement qui se produit lorsque l'élément reçoit le focusblur: événement qui se produit lorsque l'élément perd le focus
Exemple :
HTML
<!DOCTYPE html>
<html>
<head>
<title>Focus Events Example</title>
</head>
<body>
<input type="text" id="textInput" placeholder="Tape quelque chose...">
<script>
const input = document.getElementById('textInput');
input.addEventListener('focus', function(event) {
console.log('Input field focused');
});
input.addEventListener('blur', function(event) {
console.log('Input field lost focus');
});
</script>
</body>
</html>
6.5 Événements de clavier (Keyboard Events)
Événements de clavier sont générés lorsque l'utilisateur appuie sur des touches sur le clavier :
keydown: événement qui se produit lorsque la touche est enfoncéekeyup: événement qui se produit lorsque la touche est relâchéekeypress: événement qui se produit lorsque la touche est enfoncée et relâchée (événement obsolète, non recommandé pour l'utilisation)
Exemple :
HTML
<html>
<head>
<title>Keyboard Events Example</title>
</head>
<body>
<input type="text" id="textInput" placeholder="Tape quelque chose...">
<script>
const input = document.getElementById('textInput');
input.addEventListener('keydown', function(event) {
console.log('Key down:', event.key);
});
input.addEventListener('keyup', function(event) {
console.log('Key up:', event.key);
});
</script>
</body>
</html>
GO TO FULL VERSION