Introduction au Document Object Model
Transféré par
Alaa AddasIntroduction au Document Object Model
Transféré par
Alaa AddasSemaine 5 – DOM
Document Objet Model (DOM)
Avec du matériel de Michel Gagnon, Nikolay Radoev et Kevin Gauthier
Génie informatique et génie logiciel – LOG2440 A2024 1
Semaine 5 – DOM
Plan de la séance
● DOM
○ Représentation d'arborescence
○ Interfaces du DOM
● Objets globaux du navigateur
● Manipulation du DOM
○ Collections statiques et vivantes
○ Propriétés dataset
● Événements
○ Gestionnaires dʼévénements
○ Événements de la souris et du clavier
○ Propagation des événements
● Boucle dʼévénements
○ Séparation entre JS et code natif
○ Exemple récapitulatif
Génie informatique et génie logiciel – LOG2440 A2024 2 2
Semaine 5 – DOM
DOM (Document Object Model)
● Représentation structurée sous forme dʼarbre dʼobjets du HTML en mémoire.
● LʼAPI du DOM décrit des interfaces qui sont implémentées par chaque engin de rendu.
● Les 2 interfaces de haut niveau les plus utilisées:
○ Nœuds (Node): les items qui forment lʼarborescence dʼobjets, ayant 1 seul parent
○ Événements (Event) : les éléments sont en mode "écoute" pour des événements sʼils
implémentent lʼinterface EventTarget
■ Ex: HTMLButtonElement dont la chaîne dʼhéritage remonte jusquʼà EventTarget
■ Ex: XMLHttpRequest (communication réseau) qui nʼest pas un noeud du DOM
Génie informatique et génie logiciel – LOG2440 A2024 3 3
Semaine 5 – DOM
DOM
● Les nœuds qui composent le DOM implémentent le plus souvent une des interfaces suivantes:
○ Element: il sʼagit dʼun élément du document.
■ Lʼinterface HTMLElement en hérite et définit les éléments HTML
○ Text: il sʼagit du contenu texte dʼun Element et ne peut pas avoir dʼautres nœuds comme enfants :
■ <p> texte en <strong> gras </strong> ici </p>
contient 3 noeuds text : "texte en", "gras" et "ici"
et 2 nœuds element : <p> et <strong>
vs <p> texte en gras ici </p>
qui a 1 seul nœud text et 1 noeud element
● Les nœuds forment un arbre dont la racine est lʼobjet Document . Son parent est null
● Les noeuds peuvent avoir 0, 1 ou plusieurs enfants en fonction de leur type
Génie informatique et génie logiciel – LOG2440 A2024 4 4
Semaine 5 – DOM
Exemple dʼarbre
<html>
<head>
<title>Un document </title>
</head>
<body>
<h1>Titre</h1>
Allo
<p>Bla <strong>bla</strong> bla</p>
</body>
</html>
Génie informatique et génie logiciel – LOG2440 A2024 5
Semaine 5 – DOM
<html>
Exemple dʼarbre <head>
<title>Un document </title>
</head>
document
<body>
<h1>Titre</h1>
Allo
<p>Bla <strong>bla</strong> bla</p>
</body>
</html>
Génie informatique et génie logiciel – LOG2440 A2024 6
Semaine 5 – DOM
<html>
Exemple dʼarbre <head>
<title>Un document </title>
</head>
document
<body>
<h1>Titre</h1>
Allo
<HTMLElement>
tagName: html <p>Bla <strong>bla</strong> bla</p>
</body>
</html>
Génie informatique et génie logiciel – LOG2440 A2024 7
Semaine 5 – DOM
<html>
Exemple dʼarbre <head>
<title>Un document </title>
</head>
document
<body>
<h1>Titre</h1>
Allo
<HTMLElement>
tagName: html <p>Bla <strong>bla</strong> bla</p>
</body>
</html>
<HTMLHeadElement>
tagName: head
Génie informatique et génie logiciel – LOG2440 A2024 8
Semaine 5 – DOM
<html>
Exemple dʼarbre <head>
<title>Un document </title>
</head>
document
<body>
<h1>Titre</h1>
Allo
<HTMLElement>
tagName: html <p>Bla <strong>bla</strong> bla</p>
</body>
</html>
<HTMLHeadElement>
tagName: head
<HTMLTitleElement>
tagName: title
<Text>
nodeValue : Un document
Le HTML est lu séquentiellement, ce qui équivaut à un parcours en profondeur (DFS) de l’arbre
Génie informatique et génie logiciel – LOG2440 A2024 9
Semaine 5 – DOM
<html>
Exemple dʼarbre <head>
<title>Un document </title>
</head>
document
<body>
<h1>Titre</h1>
Allo
<HTMLElement>
tagName: html <p>Bla <strong>bla</strong> bla</p>
</body>
</html>
<HTMLHeadElement> <HTMLBodyElement>
tagName: head tagName: body
<HTMLTitleElement>
tagName: title
<Text>
nodeValue : Un document
Génie informatique et génie logiciel – LOG2440 A2024 10
Semaine 5 – DOM
<html>
Exemple dʼarbre <head>
<title>Un document </title>
</head>
document
<body>
<h1>Titre</h1>
Allo
<HTMLElement>
tagName: html <p>Bla <strong>bla</strong> bla</p>
</body>
</html>
<HTMLHeadElement> <HTMLBodyElement>
tagName: head tagName: body
<HTMLTitleElement> <HTMLHeadingElement> <Text> <HTMLParagraphElement>
tagName: title tagName: h1 nodeValue : Allo tagName: p
<Text> <Text> <Text> <HTMLElement> <Text>
nodeValue : Un document nodeValue : Titre nodeValue : Bla tagName: strong nodeValue : bla
<Text>
nodeValue : bla
11
Génie informatique et génie logiciel – LOG2440 A2024 11
Semaine 5 – DOM
Héritage des interfaces du DOM
Les flèches dénotent une relation d’héritage
Node
Attr CharacterData Element Document
Text Comment HTMLElement HTMLDocument
HTMLHeadElement HTMLBodyElement HTMLTitleElement HTMLInputElement ETC.
Génie informatique et génie logiciel – LOG2440 A2024
12
12
Semaine 5 – DOM
Node
Node
Propriétés
Méthodes
Element
childNodes
Document
Attr
appendChild() CharacterData
firstChild
cloneNode() lastChild
contains() nextSibling
hasChildNodes() nodeName
Text Comment HTMLElement HTMLDocument
insertBefore() nodeType
removeChild() parentNode
replaceChild() parentElement
normalize() previousSibling
etc. HTMLHeadElementª HTMLBodyElementª HTMLTitleElementª
textContent
HTMLInputElementª ETC.
Note: les propriétés en rouge sont accessibles seulement en lecture. Ces listes ne sont pas exhaustives.
Génie informatique et génie logiciel – LOG2440 A2024
13
13
Semaine 5 – DOM
Parcours de lʼarbre des noeuds
document
<HTMLElement> textContent = "↵ Titre↵ Allo↵ Bla bla bla↵↵"
tagName: html nodeName = "body"
nodeType = 1
childNodes = [text, h1, text, p, text]
previousElementSibling
<HTMLHeadElement> <HTMLBodyElement>
tagName: head tagName: body
parentNode
<HTMLTitleElement> <HTMLHeadingElement> <Text> <HTMLParagraphElement>
tagName: title tagName: h1 nodeValue : Allo tagName: p
lastChild
firstChild
<Text> <Text> <Text> <HTMLElement> <Text>
nodeValue : Un document nodeValue : Titre nodeValue : Bla tagName: strong nodeValue : bla
nextSibling
<Text>
nodeValue : bla
nextSibling
14
Génie informatique et génie logiciel – LOG2440 A2024 14
Semaine 5 – DOM
Element
Node
Méthodes
Propriétés
(hérités d’EventTarget)
attributesDocument
addEventListener()
Attr CharacterData Element
childElementCount
removeEventListener()
children
firstElementChild
getAttribute()
Text Comment HTMLElement id HTMLDocument
getElementsByClassName()
innerHTML
getElementsByTagName()
lastElementChild
querySelector()
nextElementSibling
querySelectorAll()
previousElementSibling
removeAttribute() HTMLHeadElementª HTMLBodyElementª HTMLTitleElementª HTMLInputElementª ETC.
tagName
setAttribute()
Note: les propriétés en rouge sont accessibles seulement en lecture. Ces listes ne sont pas exhaustives.
Génie informatique et génie logiciel – LOG2440 A2024
15
15
Semaine 5 – DOM
Parcours de lʼarbre des éléments
document
innerHTML = " <h1>Titre</h1>
Allo
<HTMLElement> <p>Bla <strong>bla</strong> bla</p>
tagName: html "
tagName = "body"
childElementCount = 2
<HTMLHeadElement> <HTMLBodyElement>
tagName: head tagName: body
previousElementSibling
<HTMLTitleElement> <HTMLHeadingElement> <Text> <HTMLParagraphElement>
tagName: title tagName: h1 nodeValue : Allo tagName: p
firstElementChild
lastElementChild
<Text> <Text> <Text> <HTMLElement> <Text>
nodeValue : Un document nodeValue : Titre nodeValue : Bla tagName: strong nodeValue : bla
<Text>
nodeValue : bla
16
Génie informatique et génie logiciel – LOG2440 A2024 16
Semaine 5 – DOM
Le danger dʼinnerHTML
<html>
<head>
Le code sera exécuté dès qu’on passe par-dessus l’élément.
<title>Un document </title>
</head> On peut insérer du code arbitraire et potentiellement dangereux.
Ex: application de messagerie sans vérification du contenu
<body>
récupéré du serveur et affiché à l’écran.
<h1>Titre</h1>
Allo Ceci est une attaque de type XSS (Cross Site Scripting)
<p>Bla <strong>bla</strong> bla</p>
</body>
<script>
const element = [Link];
[Link] = `<p onmouseenter="[Link]('[Link] par
innerHTML</p>`;
</script>
</html>
Génie informatique et génie logiciel – LOG2440 A2024 17
Semaine 5 – DOM
lʼobjet Document
Node
Méthodes
createAttribute() Element Document
Attr CharacterData
createComment()
createDocumentFragment()
createElement()
Text createTextNode()
Comment HTMLElement HTMLDocument
getElementsByClassName()
getElementsByTagName()
getElementById()
querySelector()
HTMLHeadElementª querySelectorAll()
HTMLBodyElementª HTMLTitleElementª HTMLInputElementª ETC.
Note: beaucoup de méthodes similaires à HTMLElement
Génie informatique et génie logiciel – LOG2440 A2024
18
18
Semaine 5 – DOM
Objet window
● Objet qui représente la fenêtre qui contient le document DOM.
○ Nʼest PAS un élément du DOM en soi.
● La variable globale window représente lʼespace où roulent les scripts JS.
○ Lʼobjet "this" par défaut dans le navigateur est le window
○ Une variable globale devient un attribut de window
○ Chaque fenêtre est son propre contexte de script
○ Dans le cas de plusieurs onglets, chaque onglet a son propre window
○ Certaines propriétés de window font référence à la fenêtre au complet
Génie informatique et génie logiciel – LOG2440 A2024
19
19
Semaine 5 – DOM
Objet window
● Propriétés globales:
○ console (retourne une référence vers lʼobjet Console)
○ document (référence vers le Document de la page)
○ navigator (référence vers les fonctionnalités du navigateur : peuvent varier beaucoup)
○ etc.
● Méthodes globales:
○ alert() : évitez à lʼutiliser puisque ceci bloque lʼexécution de la page au complet
○ open() / close() : le script doit avoir été la source de lʼouverture dʼune fenêtre pour la fermer
○ onload : indique que la page a été chargée et peut être manipulée
○ etc.
Génie informatique et génie logiciel – LOG2440 A2024
20
20
Semaine 5 – DOM
Modification du DOM avec JavaScript
● Le JavaScript peut manipuler le DOM à travers lʼAPI exposé par le navigateur
○ On peut créer, supprimer, modifier et manipuler nʼimporte quel élément du DOM
● Possible de générer tous les éléments dʼune page à travers le JS seulement
○ CSR (Client Side Rendering) : le client construit les éléments de la page
○ Peu adapté pour des pages avec beaucoup de contenu fixe. Ex : un menu de restaurant
● On change plutôt des portions de la page avec du contenu dynamique
○ Ex : un système de messagerie où chaque message a un sous-arbre HTML quelconque
Génie informatique et génie logiciel – LOG2440 A2024
21
21
Semaine 5 – DOM
Exemple simple
<html>
<script>
[Link] = function() {
const heading = [Link] ("h1");
const heading_text = [Link] ("Grand titre" );
[Link] (heading_text );
[Link] (heading);
}
</script>
</html>
L’événement onload est déclenché lorsque
la page et toutes ses ressources ont été
chargées par le navigateur
Génie informatique et génie logiciel – LOG2440 A2024
22
22
Semaine 5 – DOM
Exemple plus complexe
<div id="messages">
<div class="message self" id="message-1">
<div class="message-info">
<span class="username">Michel: </span>
<span class="text">Voici un message de moi</span>
</div>
<p class="message-time">13:32:03</p>
</div>
<div class="message other" id="message-2">
<div class="message-info">
<span class="username">Marie: </span>
<span class="text">Voici un message d'une autre personne</span>
</div>
<p class="message-time">13:33:27</p>
</div>
</div> Comment construire ces messages dynamiquement ?
Génie informatique et génie logiciel – LOG2440 A2024
23
23
Semaine 5 – DOM
Exemple complexe
function createElementWithClasses(elementType, classes) {
const element = [Link](elementType); Les éléments sont créés et ajoutés
[Link](...classes); comme enfants avec la même structure
return element; que le HTML statique
}
const parent = createElementWithClasses("div", ["message", source]);
[Link]("id", `message-${[Link] + 1}`);
const messageInfo = createElementWithClasses("div", ["message-info"]);
[Link](messageInfo);
... On ajoute les autres éléments : username, text, time.
const messageContainer = [Link]("messages");
[Link](parent);
Génie informatique et génie logiciel – LOG2440 A2024
24
24
Semaine 5 – DOM
Conteneurs dʼobjets
● Les collections dʼéléments HTMLCollection et NodeList sont retournées par certaines fonctions
○ Ex : getElementsByTagName() retourne une HTMLCollection
● On peut accéder à chaque élément contenu avec lʼopérateur [ ], comme un tableau.
○ Attention : HTMLCollection nʼest pas un objet Array dans le sens dʼun tableau JS.
● Conteneurs « vivants » (live): les changements dans le DOM seront reflétés dans la collection.
○ Une HTMLCollection est toujours « vivante ».
● NodeList retourné par querySelectorAll() nʼest pas « vivant », mais plutôt statique (static)
○ La collection nʼest pas affectée par des modifications du DOM après sa création
Génie informatique et génie logiciel – LOG2440 A2024
25
25
Semaine 5 – DOM
Exemple de conteneur vivant
<!doctype html>
...
<html>
<body>
<head>
<p> Premier paragraphe </p>
<meta charset="utf-8">
<p> Deuxième paragraphe </p>
<title>Exemple simple DOM </title>
<p> Troisième paragraphe </p>
<script>
</body>
[Link] = function() {
</html>
const paragraphes = [Link] ('p');
alert(paragraphes .length);
const nouveauParagraphe = [Link] ('p');
nouveauParagraphe .textContent = "Dernier paragraphe" ;
[Link] (nouveauParagraphe );
alert(paragraphes .length);
}
</script>
</head>
... Génie informatique et génie logiciel – LOG2440 A2024
26
26
Semaine 5 – DOM
Exemple de conteneur vivant
<!doctype html>
...
<html>
<body>
<head>
<p> Premier paragraphe </p>
<meta charset="utf-8">
<p> Deuxième paragraphe </p>
<title>Exemple simple DOM </title>
<p> Troisième paragraphe </p>
<script>
</body>
[Link] = function() {
</html>
const paragraphes = [Link] ('p');
alert(paragraphes .length);
const nouveauParagraphe = [Link] ('p');
nouveauParagraphe .textContent = "Dernier paragraphe" ;
[Link] (nouveauParagraphe );
alert(paragraphes .length);
}
</script>
</head>
... Génie informatique et génie logiciel – LOG2440 A2024
27
27
Semaine 5 – DOM
Exemple de conteneur vivant
<!doctype html>
...
<html>
<body>
<head>
<p> Premier paragraphe </p>
<meta charset="utf-8">
<p> Deuxième paragraphe </p>
<title>Exemple simple DOM </title>
<p> Troisième paragraphe </p>
<script>
</body>
[Link] = function() {
</html>
const paragraphes = [Link] ('p');
alert(paragraphes .length);
const nouveauParagraphe = [Link] ('p');
nouveauParagraphe .textContent = "Dernier paragraphe" ;
[Link] (nouveauParagraphe );
alert(paragraphes .length);
}
</script>
</head>
... Génie informatique et génie logiciel – LOG2440 A2024
28
28
Semaine 5 – DOM
Exemple de conteneur statique
<!doctype html>
...
<html>
<body>
<head>
<p> Premier paragraphe </p>
<meta charset="utf-8">
<p> Deuxième paragraphe </p>
<title>Exemple simple DOM </title>
<p> Troisième paragraphe </p>
<script>
</body>
[Link] = function() {
</html>
const paragraphes = [Link] ('p');
alert(paragraphes .length);
const nouveauParagraphe = [Link] ('p');
nouveauParagraphe .textContent = "Dernier paragraphe" ;
[Link] (nouveauParagraphe );
alert(paragraphes .length);
}
</script>
</head>
... Génie informatique et génie logiciel – LOG2440 A2024
29
29
Semaine 5 – DOM
Exemple de conteneur statique
<!doctype html>
...
<html>
<body>
<head>
<p> Premier paragraphe </p>
<meta charset="utf-8">
<p> Deuxième paragraphe </p>
<title>Exemple simple DOM </title>
<p> Troisième paragraphe </p>
<script>
</body>
[Link] = function() {
</html>
const paragraphes = [Link] ('p');
alert(paragraphes .length);
const nouveauParagraphe = [Link] ('p');
nouveauParagraphe .textContent = "Dernier paragraphe" ;
[Link] (nouveauParagraphe );
alert(paragraphes .length);
}
</script>
</head>
... Génie informatique et génie logiciel – LOG2440 A2024
30
30
Semaine 5 – DOM
Exemple de conteneur statique
<!doctype html>
...
<html>
<body>
<head>
<p> Premier paragraphe </p>
<meta charset="utf-8">
<p> Deuxième paragraphe </p>
<title>Exemple simple DOM </title>
<p> Troisième paragraphe </p>
<script>
</body>
[Link] = function() {
</html>
const paragraphes = [Link] ('p');
alert(paragraphes .length);
const nouveauParagraphe = [Link] ('p');
nouveauParagraphe .textContent = "Dernier paragraphe" ;
[Link] (nouveauParagraphe );
alert(paragraphes .length);
}
</script>
</head>
... Génie informatique et génie logiciel – LOG2440 A2024
31
31
Semaine 5 – DOM
Propriété dataset
● Contient les attributs ayant la forme data-*, dans la balise de lʼélément
● Pour chacune des occurrences, on génère une propriété dont le nom
correspond à tout ce qui vient après « data- », sans les tirets, et où tout
caractère qui succède à un tiret est mis en majuscule
○ Ex: data-date-of-birth donne dateOfBirth en JavaScript
○ Les majuscules qui suivent un tiret dans le nom de lʼattribut sont ignorées
● Utile si on veut ajouter de lʼinformation directement dans une balise HTML
○ Exemple : serveur fournit une page HTML et laisse le client décider quoi
faire avec lʼinformation dans le dataset
Génie informatique et génie logiciel – LOG2440 A2024
32
32
Semaine 5 – DOM
Propriété dataset : exemple
const element = [Link]("user"); <div id="user" data-id="123456"
[Link] = "1996-10-15"; data-user="kg" data-date-of-birth>
[Link] = "autre information";
Kevin Gauthier
</div>
const dataset = [Link];
const ulElement = [Link]("list-parent");
<p>Contenu de l'objet dataset:</p>
for (key in dataset) { <ul id="list-parent"></ul>
const liElement = [Link]("li");
[Link] = `${key}: ${dataset[key]}`;
[Link](liElement);
}
Génie informatique et génie logiciel – LOG2440 A2024
33
33
Semaine 5 – DOM
Événement (Event)
● Possède un nom unique : click, change, load, mouseover, etc.
● Possède une cible (target) : lʼélément sur lequel il a été déclenché.
○ La cible peut différente de lʼendroit où il est géré
● On lui associe une fonction qui sera appelée lorsque celui-ci sera déclenché
○ Appelée "gestionnaire dʼévénement" (event handler ou event listener)
● Trois manières dʼassocier un gestionnaire dʼévénement à un élément:
○ Écrire le code directement dans la balise HTML (déconseillé)
○ Associer une fonction à un attribut de lʼélément (onX), X étant lʼévénement
○ Utiliser la méthode addEventListener(event, handler) :
■ permet dʼajouter plusieurs gestionnaires à un événement (recommandé)
Génie informatique et génie logiciel – LOG2440 A2024
34
34
Semaine 5 – DOM
Événement
● Le gestionnaire peut recevoir en paramètre un objet Event qui fournit de
lʼinformation sur lʼévénement
○ Ex : la cible, la position de la souris, la touche appuyée, etc.
● Propagation vers les éléments englobants la cible dʼorigine (event bubbling)
○ On remonte dans lʼarbre du DOM jusquʼà la racine
● Certains événements ont une action par défaut qui leur est associée:
○ Ex : Clic sur un hyperlien <a href ="...">: se déplacer à lʼURL indiquée
○ Cette action peut être annulée, mais pas dans tous les cas
■ Ex : on ne peut pas empêcher le déroulement (scroll) dʼune page
Génie informatique et génie logiciel – LOG2440 A2024
35
35
Semaine 5 – DOM
Interface Event
● Propriétés principales:
○ target : lʼélément sur lequel lʼévénement a été déclenché
○ cancelable : si on peut annuler le comportement par défaut
○ type : le nom de lʼévénement
● Méthodes:
○ preventDefault(): annule le comportement par défaut de lʼévénement
○ stopPropagation(): interrompt la propagation de lʼévénement
● Certains événements ont une propriété relatedTarget, qui identifie un élément secondaire
○ Ex : pour mouseover, ce sera lʼélément dʼoù provient la souris
● Interfaces plus spécialisées pour des événements spécifiques avec plus dʼattributs
○ Ex : [Link] qui indique la touche appuyée
Génie informatique et génie logiciel – LOG2440 A2024
36
36
Semaine 5 – DOM
Assignation dʼun gestionnaire dʼévénement
nom ("click", "mouseover", etc.) Fonction exécutée chaque fois que lʼévénement est
déclenché
[Link](événement,gestionnaire,options)
Élément du DOM auquel on (optionnel)
veut assigner le Objet qui représente des différentes options
gestionnaire autres que juste la capture
Peut être même Window ex: once enlève le listener après la 1re
exécution du gestionnaire
Génie informatique et génie logiciel – LOG2440 A2024
37
37
Semaine 5 – DOM
Exemple plus complexe
[Link]("message-input").addEventListener('keydown', (event) => {
if ([Link] === 'Enter') {
Gestion d’un événement du clavier
const time = new Date().toTimeString().split(' ')[0];
const message = {
username: "Moi", Référence vers l’élément cible
text: [Link], (champs de saisie)
time
}; Questions :
addMessage(message, 'self'); - Pourquoi la condition du "if" ?
- Que se passe si
[Link] = ""; [Link] est vide ?
}
});
Génie informatique et génie logiciel – LOG2440 A2024
38
38
Semaine 5 – DOM
Suppression des gestionnaires dʼévénements
● Pour enlever un gestionnaire enregistré avec addEventListener() on utilise
removeEventListener(type,listener[, options])
○ Les paramètres doivent être pareils que lors de lʼajout du listener
● Si le gestionnaire est défini avec une expression de fonction dans addEventListener(), il nʼest
pas possible de lʼenlever puisquʼon nʼa pas de référence à passer à removeEventListener()
○ [Link]('click', (event) => { ... });
○ [Link]('click', function(event){ ... });
● Si on clone un noeud avec cloneNode(), les gestionnaires dʼévénements ne sont pas copiés
○ Pratique si on veut enlever des gestionnaires créés avec des expressions de fonction
Génie informatique et génie logiciel – LOG2440 A2024
39
39
Semaine 5 – DOM
Suppression : exemple
const copyToInput = function (event) {
Bloquer le comportement par défaut
[Link](); "contextmenu" = bouton droit
[Link]().
then(text => [Link] = text);
};
[Link]("copy-checkbox").addEventListener('change', (event) => {
const messageInput = [Link]("message-input");
if ([Link]) {
[Link]('contextmenu', copyToInput);
} Référence vers la même fonction
else {
[Link]('contextmenu', copyToInput);
}
});
Génie informatique et génie logiciel – LOG2440 A2024
40
40
Semaine 5 – DOM
Propagation dʼévénements
Génie informatique et génie logiciel – LOG2440 A2024
41
41
Semaine 5 – DOM
Suppression de la propagation
● Possible dʼarrêter la propagation dʼun événement dans la hiérarchie
○ stopPropagation() bloque la propagation au-delà de lʼélément ou elle est invoquée. Ceci arrête un
seul événement et ne bloque pas le comportement par défaut.
○ preventDefault() bloque le comportement par défaut de lʼévénement, mais pas la propagation.
■ Note: lʼévénement doit être annulable (cancelable), sinon rien ne se passe ex: scroll
○ stopImmediatePropagation() annule tous les gestionnaires subséquents du même événement.
Génie informatique et génie logiciel – LOG2440 A2024
42
42
Semaine 5 – DOM
Propagation : exemple Clic sur <th> ou ligne2
const table = [Link]("tableau");
[Link]("click", () => alert('Clic sur le tableau!'));
const line1 = [Link]("ligne1");
[Link]("click", (event) => {
const cell2 = [Link]("cell2");
[Link] = "Allo";
[Link]();
alert("Propagation de l'événement interrompue");
});
[Link]("click", () => alert("2e evenement de click! sur la ligne"));
<table id="tableau">
<th>Exemple de bubbling</th>
<tr id="ligne1"><td id="cell1">CELLULE #1</td></tr>
<tr id="ligne2"><td id="cell2">CELLULE #2</td></tr>
</table> Génie informatique et génie logiciel – LOG2440 A2024
43
43
Semaine 5 – DOM
Propagation : exemple
La propagation vers le parent est arrêtée
par [Link]()
Le 2e gestionnaire de "click" est toujours actif
à moins dʼappeler
[Link]();
Génie informatique et génie logiciel – LOG2440 A2024
44
44
Semaine 5 – DOM
Événements de formulaires
● submit et reset
○ Il faut spécifier le type dʼun bouton du formulaire comme "submit" ou "reset"
○ Appeler [Link]() directement ne lance pas lʼévénement.
Il faut plutôt utiliser requestSubmit()
● Différents types dʼévénement selon le type dʼinput
○ input est lancé chaque fois que le contenu dʼun input est modifié
○ change est lancé lorsque le changement est "soumis" par lʼutilisateur
Génie informatique et génie logiciel – LOG2440 A2024
45
45
Semaine 5 – DOM
Autres événements
● Événements associés aux balises <audio> et <video>
○ canplay, playing, pause, etc.
● Événements associés à lʼAPI drag and drop:
○ dragstart, drag, dragenter, dragend, drop, ended, etc.
● Gestion du stockage local:
○ storage
● Un grand nombre dʼautres événements possibles
Génie informatique et génie logiciel – LOG2440 A2024
46
46
Semaine 5 – DOM
La boucle dʼévénements
heap stack WebAPIs
DOM
ajax (XMLHttpRequest)
func2()
setTimeout
func1()
main()
Event loop
callback
onClick onClick onLoad
queue
[Link]
Génie informatique et génie logiciel – LOG2440 A2024
47
47
Semaine 5 – DOM
Comment la boucle fonctionne?
function gestionnaire () {
setTimeout (show_alert , 3000);
clicking();
} stack
WebAPIs
function show_alert (){
alert("This is an alert!" );
}
function clicking(){
alert("The clicker was clicked" );
}
[Link] = function () {
Event loop
show_alert();
const bouton = [Link]('#clicker'); callback
[Link]('click', () => gestionnaire()); queue
}
Génie informatique et génie logiciel – LOG2440 A2024
48
48
Semaine 5 – DOM
Exécution après le chargement du script
function gestionnaire () {
setTimeout (show_alert , 3000);
clicking();
} stack
WebAPIs
function show_alert (){
alert("This is an alert!" );
}
function clicking(){
alert("The clicker was clicked" );
} Code JS
[Link] = function () {
Event loop
show_alert();
const bouton = [Link]('#clicker'); callback
[Link]('click', () => gestionnaire()); queue
}
Génie informatique et génie logiciel – LOG2440 A2024
49
49
Semaine 5 – DOM
Exécution de la fonction
function gestionnaire () {
setTimeout (show_alert , 3000);
clicking();
} stack
WebAPIs
function show_alert (){
alert("This is an alert!" );
}
function clicking(){ show_alert()
alert("The clicker was clicked" );
} Code JS
[Link] = function () {
Event loop
show_alert();
const bouton = [Link]('#clicker'); callback
[Link]('click', () => gestionnaire()); queue
}
Génie informatique et génie logiciel – LOG2440 A2024
50
50
Semaine 5 – DOM
alert() : fonction bloquante
function gestionnaire () {
setTimeout (show_alert , 3000);
clicking();
} stack
WebAPIs
function show_alert (){
alert("This is an alert!" );
} alert()
function clicking(){ show_alert()
alert("The clicker was clicked" );
} Code JS
[Link] = function () {
Event loop
show_alert();
const bouton = [Link]('#clicker'); callback
[Link]('click', () => gestionnaire()); queue
}
Génie informatique et génie logiciel – LOG2440 A2024
51
51
Semaine 5 – DOM
Exécution séquentielle du script
function gestionnaire () {
setTimeout (show_alert , 3000);
clicking();
} stack
WebAPIs
function show_alert (){
alert("This is an alert!" );
}
document.
function clicking(){ query...()
alert("The clicker was clicked" );
} Code JS
[Link] = function () {
Event loop
show_alert();
const bouton = [Link]('#clicker'); callback
[Link]('click', () => gestionnaire()); queue
}
Génie informatique et génie logiciel – LOG2440 A2024
52
52
Semaine 5 – DOM
Ajout dʼun gestionnaire dʼévénement
function gestionnaire () {
setTimeout (show_alert , 3000);
clicking();
} stack
WebAPIs
function show_alert (){
alert("This is an alert!" );
}
[Link]
function clicking(){ Event...()
alert("The clicker was clicked" );
} Code JS
[Link] = function () {
Event loop
show_alert();
const bouton = [Link]('#clicker'); callback
[Link]('click', () => gestionnaire()); queue
}
Génie informatique et génie logiciel – LOG2440 A2024
53
53
Semaine 5 – DOM
Écoute pour lʼévénement non bloquante
function gestionnaire () {
setTimeout (show_alert , 3000);
clicking();
} stack
WebAPIs
function show_alert (){
bouton click event
alert("This is an alert!" );
}
function clicking(){
alert("The clicker was clicked" );
} Code JS
[Link] = function () {
Event loop
show_alert();
const bouton = [Link]('#clicker'); callback
[Link]('click', () => gestionnaire()); queue
}
Génie informatique et génie logiciel – LOG2440 A2024
54
54
Semaine 5 – DOM
Fin des instructions dans le script
function gestionnaire () {
setTimeout (show_alert , 3000);
clicking();
} stack
WebAPIs
function show_alert (){
bouton click event
alert("This is an alert!" );
}
function clicking(){
alert("The clicker was clicked" );
}
[Link] = function () {
Event loop
show_alert();
const bouton = [Link]('#clicker'); callback
[Link]('click', () => gestionnaire()); queue
}
Génie informatique et génie logiciel – LOG2440 A2024
55
55
Semaine 5 – DOM
Action de clic sur le bouton
function gestionnaire () {
setTimeout (show_alert , 3000);
clicking();
} stack
WebAPIs
function show_alert (){
Appuyez ici
bouton click event
alert("This is an alert!" );
}
function clicking(){
alert("The clicker was clicked" );
}
[Link] = function () {
Event loop
show_alert();
const bouton = [Link]('#clicker'); callback
[Link]('click', () => gestionnaire()); queue
}
Génie informatique et génie logiciel – LOG2440 A2024
56
56
Semaine 5 – DOM
Détection par le navigateur et rappel
function gestionnaire () {
setTimeout (show_alert , 3000);
clicking();
} stack
WebAPIs
function show_alert (){
bouton click event
alert("This is an alert!" );
}
function clicking(){
alert("The clicker was clicked" );
}
[Link] = function () {
Event loop
show_alert();
const bouton = [Link]('#clicker'); callback
[Link]('click', () => gestionnaire()); queue callback
}
Génie informatique et génie logiciel – LOG2440 A2024
57
57
Semaine 5 – DOM
Pige dans la file dʼattente
function gestionnaire () {
setTimeout (show_alert , 3000);
clicking();
} stack
WebAPIs
function show_alert (){
bouton click event
alert("This is an alert!" );
}
function clicking(){
alert("The clicker was clicked" );
} callback
[Link] = function () {
Event loop
show_alert();
const bouton = [Link]('#clicker'); callback
[Link]('click', () => gestionnaire()); queue
}
Génie informatique et génie logiciel – LOG2440 A2024
58
58
Semaine 5 – DOM
Exécution de notre fonction de rappel
function gestionnaire () {
setTimeout (show_alert , 3000);
clicking();
} stack
WebAPIs
function show_alert (){
bouton click event
alert("This is an alert!" );
}
function clicking(){
gestionnaire()
alert("The clicker was clicked" );
} callback
[Link] = function () {
Event loop
show_alert();
const bouton = [Link]('#clicker'); callback
[Link]('click', () => gestionnaire()); queue
}
Génie informatique et génie logiciel – LOG2440 A2024
59
59
Semaine 5 – DOM
Appel à setTimeout : fonction asynchrone
function gestionnaire () {
setTimeout (show_alert , 3000);
clicking();
} stack
WebAPIs
function show_alert (){
bouton click event
alert("This is an alert!" );
}
setTimeout(..)
function clicking(){
gestionnaire()
alert("The clicker was clicked" );
} callback
[Link] = function () {
Event loop
show_alert();
const bouton = [Link]('#clicker'); callback
[Link]('click', () => gestionnaire()); queue
}
Génie informatique et génie logiciel – LOG2440 A2024
60
60
Semaine 5 – DOM
Prise en charge de la minuterie par le navigateur
function gestionnaire () {
setTimeout (show_alert , 3000);
clicking();
} stack
WebAPIs
function show_alert (){
bouton click event
alert("This is an alert!" );
} onTimeout()
function clicking(){
gestionnaire()
alert("The clicker was clicked" );
} callback
[Link] = function () {
Event loop
show_alert();
const bouton = [Link]('#clicker'); callback
[Link]('click', () => gestionnaire()); queue
}
Génie informatique et génie logiciel – LOG2440 A2024
61
61
Semaine 5 – DOM
Exécution de la prochaine instruction
function gestionnaire () {
setTimeout (show_alert , 3000);
clicking();
} stack
WebAPIs
function show_alert (){
bouton click event
alert("This is an alert!" );
} onTimeout()
clicking()
function clicking(){
gestionnaire()
alert("The clicker was clicked" );
} callback
[Link] = function () {
Event loop
show_alert();
const bouton = [Link]('#clicker'); callback
[Link]('click', () => gestionnaire()); queue
}
Génie informatique et génie logiciel – LOG2440 A2024
62
62
Semaine 5 – DOM
alert : fonction bloquante
function gestionnaire () {
setTimeout (show_alert , 3000);
clicking();
} stack
WebAPIs
function show_alert (){
alert() bouton click event
alert("This is an alert!" );
} onTimeout()
clicking()
function clicking(){
gestionnaire()
alert("The clicker was clicked" );
} callback
[Link] = function () {
Event loop
show_alert();
const bouton = [Link]('#clicker'); callback
[Link]('click', () => gestionnaire()); queue
}
Génie informatique et génie logiciel – LOG2440 A2024
63
63
Semaine 5 – DOM
alert fermée avant 3000ms : fin des instructions
function gestionnaire () {
setTimeout (show_alert , 3000);
clicking();
} stack
WebAPIs
function show_alert (){
bouton click event
alert("This is an alert!" );
} onTimeout()
function clicking(){
alert("The clicker was clicked" );
}
[Link] = function () {
Event loop
show_alert();
const bouton = [Link]('#clicker'); callback
[Link]('click', () => gestionnaire()); queue
}
Génie informatique et génie logiciel – LOG2440 A2024
64
64
Semaine 5 – DOM
Après 3000ms : fin de la minuterie
function gestionnaire () {
setTimeout (show_alert , 3000);
clicking();
} stack
WebAPIs
function show_alert (){
bouton click event
alert("This is an alert!" );
} onTimeout()
function clicking(){
alert("The clicker was clicked" );
}
[Link] = function () {
Event loop
show_alert();
const bouton = [Link]('#clicker'); callback
[Link]('click', () => gestionnaire()); queue
}
Génie informatique et génie logiciel – LOG2440 A2024
65
65
Semaine 5 – DOM
Pige dans la file dʼattente
function gestionnaire () {
setTimeout (show_alert , 3000);
clicking();
} stack
WebAPIs
function show_alert (){
bouton click event
alert("This is an alert!" );
}
function clicking(){
alert("The clicker was clicked" );
}
[Link] = function () {
Event loop
show_alert();
const bouton = [Link]('#clicker'); callback
show_alert()
[Link]('click', () => gestionnaire()); queue
}
Génie informatique et génie logiciel – LOG2440 A2024
66
66
Semaine 5 – DOM
alert: fonction bloquante
function gestionnaire () {
setTimeout (show_alert , 3000);
clicking();
} stack
WebAPIs
function show_alert (){
bouton click event
alert("This is an alert!" );
}
function clicking(){
alert()
alert("The clicker was clicked" );
} show_alert()
[Link] = function () {
Event loop
show_alert();
const bouton = [Link]('#clicker'); callback
[Link]('click', () => gestionnaire()); queue
}
Génie informatique et génie logiciel – LOG2440 A2024
67
67
Semaine 5 – DOM
1er alert encore là après 3000ms : file bloquée
function gestionnaire () {
setTimeout (show_alert , 3000);
clicking();
} stack
WebAPIs
function show_alert (){
alert() bouton click event
alert("This is an alert!" );
}
clicking()
function clicking(){
gestionnaire()
alert("The clicker was clicked" );
} callback
[Link] = function () {
Event loop
show_alert();
const bouton = [Link]('#clicker'); callback
show_alert()
[Link]('click', () => gestionnaire()); queue
}
Génie informatique et génie logiciel – LOG2440 A2024
68
68
Semaine 5 – DOM
File dʼattente partagée
La boucle dʼévénements et lʼaffichage sont sur le même fil dʼexécution. stack
WebAPIs
- Lʼaffichage est une séquence de Styles, Layout et Paint
- Lʼaffichage a toujours priorité sur une tâche (Task)
- Lʼaffichage est fait à la fréquence de rafraîchissement de lʼappareil
- Moins fréquent si rien nʼa changé sur la page
- Lʼaffichage peut être bloqué par lʼexécution trop longue du JS
Event loop
( la page gèle et on ne peut pas interagir avec)
Render
- Traitement lourd synchrone Render
queue
- (Le pire) boucles infinies
Task
queue Task
Génie informatique et génie logiciel – LOG2440 A2024
69
69
Semaine 5 – DOM
File dʼattente partagée
Les appels aux WebAPIs sont exécutés sur des fils autres que le fil stack
WebAPIs
principal de Rendu/JS et sont donc des fonctions asynchrones.
- Un traitement long dans ces fils ne bloque pas le fil principal.
Ex : un appel réseau qui nʼest jamais répondu.
À la fin de lʼexécution, les méthodes asynchrones appellent le
callback passé en paramètre avec le résultat de leur traitement.
- Ceci est une tâche (Task)
Event loop
- 1 tâche exécutée à la fois par "tour" de la boucle
- Toujours exécutées après le code synchrone (stack vide) Render Render
queue
Task
queue Task
Génie informatique et génie logiciel – LOG2440 A2024
70
70
Semaine 5 – DOM
Comment ça fonctionne?
Ils existent aussi des micro-tâches (Micro-Task) stack
WebAPIs
- Toujours exécutées après le code synchrone (stack vide)
- La file de micro-tâches est exécutée jusquʼà quʼelle soit vide
- Ceci peut causer une boucle infinie bloquante
- Les micro-tâches sont utilisés par les Promesses (Promise) de
JS : une alternative aux callbacks asynchrones
- On verra les Promesses plus en détail aux cours 7 et 8
Event loop
Render
queue Render
Task
queue Task
Génie informatique et génie logiciel – LOG2440 A2024
71
71
Semaine 5 – DOM
Représentation alternative de la boucle
Task Queue Rendering Queue
Event Loop
Source : Jake Archibald (YouTube)
Génie informatique et génie logiciel – LOG2440 A2024
72
72
Vous aimerez peut-être aussi
- Éléments de programmation orientée objetPas encore d'évaluationÉléments de programmation orientée objet75 pages
- Relations UML en Java : Guide PratiquePas encore d'évaluationRelations UML en Java : Guide Pratique4 pages
- Classes Abstraites et Interfaces en JavaPas encore d'évaluationClasses Abstraites et Interfaces en Java34 pages
- Gestion des Stages Étudiants en POOPas encore d'évaluationGestion des Stages Étudiants en POO7 pages
- POO en Python : Concepts et ExemplesPas encore d'évaluationPOO en Python : Concepts et Exemples13 pages
- TP1 : Mini Système Bancaire IFT 1170Pas encore d'évaluationTP1 : Mini Système Bancaire IFT 11704 pages
- Simulation de Comptes Bancaires en PHPPas encore d'évaluationSimulation de Comptes Bancaires en PHP1 page
- Formation Ingénierie Logicielle AvancéePas encore d'évaluationFormation Ingénierie Logicielle Avancée4 pages
- Hiérarchie de classes en C++ pour comptes bancairesPas encore d'évaluationHiérarchie de classes en C++ pour comptes bancaires7 pages
- Chapitre4 Conception Detaillee GTA WisePas encore d'évaluationChapitre4 Conception Detaillee GTA Wise25 pages
- Introduction à la programmation orientée objetPas encore d'évaluationIntroduction à la programmation orientée objet31 pages
- Programmation Orientée Objet Les Références - CoursPas encore d'évaluationProgrammation Orientée Objet Les Références - Cours2 pages
- Utilisation des types génériques en C#Pas encore d'évaluationUtilisation des types génériques en C#24 pages
- Arbres de syntaxe abstraite en JavaPas encore d'évaluationArbres de syntaxe abstraite en Java17 pages
- UML et Design Patterns : TD1 2024-2025Pas encore d'évaluationUML et Design Patterns : TD1 2024-20252 pages
- Chapitres 8. & 9.: Héritage Simple & Héritage Multiple: © Prof. EN-NAIMIPas encore d'évaluationChapitres 8. & 9.: Héritage Simple & Héritage Multiple: © Prof. EN-NAIMI29 pages
- Cours Redefinition Surcharge PolymorphismePas encore d'évaluationCours Redefinition Surcharge Polymorphisme11 pages
- Héritage en Java : Concepts et PratiquesPas encore d'évaluationHéritage en Java : Concepts et Pratiques64 pages
- Héritage en Programmation Orientée ObjetPas encore d'évaluationHéritage en Programmation Orientée Objet107 pages
- Classes et objets en Python : Guide completPas encore d'évaluationClasses et objets en Python : Guide complet49 pages
- Classes et objets en Python : guide completPas encore d'évaluationClasses et objets en Python : guide complet15 pages
- TP N°:5 Exercice 1:: Affichehomothetie Non RedéfiniePas encore d'évaluationTP N°:5 Exercice 1:: Affichehomothetie Non Redéfinie1 page
- Programmation Objet : Classification RéseauPas encore d'évaluationProgrammation Objet : Classification Réseau6 pages
- Programmation Orientée Objet en PythonPas encore d'évaluationProgrammation Orientée Objet en Python6 pages
- Polymorphisme en Java : Classes Personne et EmployéPas encore d'évaluationPolymorphisme en Java : Classes Personne et Employé1 page
- Modélisation POO : Médiathèque et ComptesPas encore d'évaluationModélisation POO : Médiathèque et Comptes2 pages
- Évolution des Outils de Développement IAPas encore d'évaluationÉvolution des Outils de Développement IA9 pages
- Atelier HTML : Erreurs et CorrectionsPas encore d'évaluationAtelier HTML : Erreurs et Corrections4 pages
- Règles de calcul en mathématiques 6ePas encore d'évaluationRègles de calcul en mathématiques 6e10 pages
- Introduction au Web et ses langagesPas encore d'évaluationIntroduction au Web et ses langages3 pages
- Rapport de stage en développement informatiquePas encore d'évaluationRapport de stage en développement informatique25 pages
- Introduction au CSS et ses applicationsPas encore d'évaluationIntroduction au CSS et ses applications51 pages
- Introduction à HTML, CSS & BootstrapPas encore d'évaluationIntroduction à HTML, CSS & Bootstrap102 pages
- Histoire du Web et premiers navigateursPas encore d'évaluationHistoire du Web et premiers navigateurs3 pages
- Page d'accueil Camsight avec BootstrapPas encore d'évaluationPage d'accueil Camsight avec Bootstrap7 pages
- Examen de Programmation Web ISET SfaxPas encore d'évaluationExamen de Programmation Web ISET Sfax4 pages
- Comprendre le fonctionnement des moteurs de recherchePas encore d'évaluationComprendre le fonctionnement des moteurs de recherche2 pages
- Introduction au HTML pour débutantsPas encore d'évaluationIntroduction au HTML pour débutants13 pages
- Outils d'investigation : Eyewitness 2023Pas encore d'évaluationOutils d'investigation : Eyewitness 202312 pages
- Introduction à HTML5 et ses balisesPas encore d'évaluationIntroduction à HTML5 et ses balises145 pages
- Créer une API REST avec Flask et Connexion100% (1)Créer une API REST avec Flask et Connexion118 pages