Événements DOM en Javascript

Les bases des événements DOM en Javascript

Qu'est-ce qu'un événement DOM en Javascript ?

Types d'événements Javascript DOM

Utilisation de l'écouteur d'événements DOM en Javascript

Ajouter des écouteurs d'événements aux éléments du DOM en Javascript

document.getElementById("myBtn").addEventListener("click", function(){ alert("Bouton cliqué !") ; }) ;

Suppression des récepteurs d'événements des éléments du DOM en Javascript

let myFunc = function() { alert("Bouton cliqué !") ; } ; //Addition de l'écouteur d'événement document.getElementById("myBtn").addEventListener("click", myFunc) ; //Suppression de l'écouteur d'événement document.getElementById("myBtn").removeEventListener("click", myFunc) ;

Interagir avec le traitement des événements DOM en Javascript

Principes fondamentaux de la gestion des événements DOM en Javascript

• \textbf{phase de capture} : C'est la première phase où l'événement descend jusqu'à l'élément.
• \textbf{Phase de ciblage} : C'est ici que l'événement atteint l'élément cible.
• \textbf{phase de bouillonnement} : Dans cette phase, l'événement remonte de l'élément en formant des bulles.

Création et exécution de gestionnaires d'événements DOM en Javascript

let myEventHandler = function() { // Code à exécuter lorsque le bouton est cliqué alert("Button Clicked !") ; } ; // Attribue le gestionnaire au bouton document.getElementById("myBtn").onclick = myEventHandler ;

Techniques de détection d'événements dans le DOM Javascript

onClick="alert('Button clicked!')">Cliquez sur moi!

S'engager avec l'événement Javascript DOM Click

Fonctionnalité de l'événement de clic du DOM en Javascript

Codage d'un événement de clic dans le DOM Javascript

let buttonElement = document.getElementById('clickMe') ; buttonElement.addEventListener('click', function() { alert("Vous avez cliqué sur moi !") ; }) ;

let buttonElement = document.getElementById('clickMe') ; let handleClick = function() { alert("Vous avez cliqué sur moi !") ; } ; buttonElement.addEventListener('click', handleClick) ;

Test et débogage des événements de clic du DOM en Javascript

let handleClick = function() { console.log("Click event triggered !") ; alert("You clicked me !") ; } ;

Liste complète des événements du DOM en Javascript

Exploration des événements du DOM HTML Javascript

Les événements DOM les plus courants en Javascript

• \textbf{click} : Se déclenche lorsque le bouton de la souris est cliqué sur un élément.
• \textbf{double-clic} : Se déclenche lorsque le bouton de la souris est double-cliqué sur un élément.
• \textbf{mousemove} : Se déclenche lorsque la souris est déplacée sur un élément.

• \textbf{keydown} : Se déclenche lorsqu'une touche a été enfoncée.
• \textbf{keyup} : Se déclenche lorsqu'une touche a été relâchée.

• \textbf{submit} : Se déclenche lorsqu'un formulaire est soumis.
• \textbf{change} : Se déclenche lorsqu'un élément de saisie a été modifié.
• \textbf{focus} : Se déclenche lorsqu'un élément de saisie est mis en évidence.

Comment utiliser la liste des événements DOM en Javascript

let button = document.getElementById('myButton') ; button.onclick = function() { alert('Button clicked!') ; } ;

Exemple d'événements DOM en Javascript

Exemples en Javascript : Mise en oeuvre des événements DOM

 
Surveillez-moi.
 .

Concepts avancés : Le piégeage et la propagation dans les événements DOM en Javascript

L'art de piéger les événements DOM en JavaScript

Techniques pour piéger les événements DOM en Javascript

element.addEventListener(eventType, function, useCapture)

//Importe tous les éléments DOM let outerDiv = document.getElementById("outer") ; let innerDiv = document.getElementById("inner") ; //Ajoute d'auditeurs d'événements outerDiv.addEventListener("click", FunctionA, false) ; innerDiv.addEventListener("click", FunctionB, true) ; function FunctionA(e) { alert("Event Capturing : Outer Div") ; } function FunctionB(e) { e.stopPropagation() ; //Stop the event from propagating further alert("Event Bubbling : Inner Div") ; }

Comprendre la propagation des événements DOM en JavaScript

La propagation des événements expliquée : Phases de capture et de bouillonnement dans les événements DOM en Javascript

element.addEventListener(type, listener, useCapture) ;

let parent = document.getElementById('parent') ; let child = document.getElementById('child') ; // Ceci sera exécuté pendant la phase de capture parent.addEventListener('click', EventFunction, true) ; // Ceci sera exécuté pendant la phase de bouillonnement child.addEventListener('click', EventFunction, false) ; function EventFunction(e){ alert(e.currentTarget.id) ; }