Newer
Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
# Événements et parcour
---
### Parcours Père/Fils dans le DOM
```html [8-11|13-19]
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Parcours Père/Fils</title>
</head>
<body>
<div id="parent">
<div id="child">Element enfant</div>
</div>
<script>
const child = document.getElementById("child");
// Trouver l'élément parent le plus proche
const parentDiv = child.parentElement
console.log("Parent <div> trouvé : ", parentDiv);
console.log("enfants du parent trouvé : ", parentDiv.children);
</script>
</body>
</html>
```
---
### Parcours Père/Fils dans le DOM
```html [8-14|17-21]
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Parcours Père/Fils</title>
</head>
<body>
<div id="parent">
<div>
<ul>
<li id="child">Lorem ipsum</li>
</ul>
</div>
</div>
<script>
const child = document.getElementById("child");
// Trouver l'élément parent le plus proche
const parentDiv = closest('#parent')
console.log("Parent <div> trouvé : ", parentDiv);
</script>
</body>
</html>
```
---
### La propagation par défaut
```html []
<a id="link" href="cour.salimkhraimeche.fr">Le cours de JS</a>
<script>
const link = document.getElementsBy('link');
// Arrêt de propagation sur l'enfant
link.addEventListener("click", (event) => {
console.log("Clic sur le lien");
event.preventDefault(); // Arrête la propagation ici
});
parent.addEventListener("click", () => console.log("Clic sur le parent"));
</script>
```
---
### La propagation
```html []
<div id="parent" style="width: 200px; height: 200px; background-color: lightblue;">
<button id="child">Cliquez sur moi</button>
</div>
<script>
const parent = document.getElementById("parent");
const child = document.getElementById("child");
// Ajout de gestionnaires d'événements
parent.addEventListener("click", () => console.log("Clic sur le parent (bouillonnement)"));
child.addEventListener("click", () => console.log("Clic sur l'enfant"));
// Résultat en cliquant sur l'enfant :
// - "Clic sur l'enfant"
// - "Clic sur le parent (bouillonnement)"
</script>
```
---
### La propagation
```html []
<div id="parent" style="width: 200px; height: 200px; background-color: lightblue;">
<button id="child">Cliquez sur moi</button>
</div>
<script>
const parent = document.getElementById("parent");
const child = document.getElementById("child");
// Phase de capture
parent.addEventListener("click", () => console.log("Clic capturé sur le parent"), true);
child.addEventListener("click", () => console.log("Clic capturé sur l'enfant"), true);
// Résultat en cliquant sur l'enfant :
// - "Clic capturé sur le parent" (Phase de capture)
// - "Clic capturé sur l'enfant" (Phase de capture)
// - "Clic sur l'enfant" (Phase de cible)
// - "Clic sur le parent (bouillonnement)" (Phase de bouillonnement)
</script>
```
---