addEventListener and dispatchEvent

**gabrielS** · 09/01/2015, 12h09

Bonjour,

Je viens vers ici pour présenter un petit soucis que je rencontre sur des events en javascript.
J'aimerai pouvoir créer un event personnalisé pour prévenir d'autres objets d'une modification. J'ai donc appliquée cette méthode :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
var event = new CustomEvent("build", { "detail": 42});
divTimeline.dispatchEvent(event);

et j'attrape ensuite l'event par ce biais :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
var listenFunction = function (e){
    console.log(e.details);
}
divsideTab.addEventListener("build", listenFunction, false);

sachant que divsideTab et divTimeline sont simplement des html 'div' (respectivement {document.getElementById("sideTab")} et {document.getElementById('mytimeline')}).

(la méthode que j'ai suivie vient de là )

Je suis preneur d'idées !

Merci,
Cordialement,

G.S.

**lysandro** · 09/01/2015, 16h12

Bonjour,

Il faut renseigner les propriétés de propagation :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var event = new CustomEvent("build", { "bubbles": true, "detail": 42 });

**gabrielS** · 09/01/2015, 18h18

hello Lysandro,

Merci pour ta réponse.. Alors en un plus complet, un petit exemple qui montre le bug que j'obtiens : je ne reçois jamais l'alerte de mon 'listenFunction'. Cependant, je rentre bien dans le onClickDIV2 sur chaque clic sur ma DIV2 ..
Quelqu'un voit le probème ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<!DOCTYPE html>
<html>
<head>
	<title>HTML JS Events Test</title>
 
 
	<script type="text/javascript">
 
		document.addEventListener("DOMContentLoaded", function (event)
		{
			console.log('document is ready. I can sleep now');
			documentOnLoad();
		});
 
		function documentOnLoad()
		{
 
			var div1 = document.getElementById("div1");
			var div2 = document.getElementById("div2");
			function onClickDIV2(event)
			{
				var event = new CustomEvent("build", { "bubbles": true, "details": 42 });
				div2.dispatchEvent(event);
				alert("onClickDIV2");
			}
			function listenFunction (event)
			{
				alert("listenFunction");
			}
			div1.addEventListener("build", listenFunction, true);
			div2.addEventListener("click", onClickDIV2, true);
		}
 
	</script>
</head>
<body>
	<div id="div1">HELLO DIV#1</div>
	<div id="div2">HELLO DIV#2</div>
</body>
</html>

**SylvainPV** · 09/01/2015, 21h20

Le customEvent build est dispatché sur la div2, or tu l'écoutes sur la div1

**lysandro** · 10/01/2015, 10h42

En plus de ce qu'à répondu SylvainPV, tu enregistres ton listener en mode capture, ce qui veut dire que même si tu fais le dispatchEvent sur div1 ça ne fonctionnera pas.

Lors d'un dispatchEvent, les listeners enregistrés en mode capture sur un élément ne sont pas déclenchés par un événement issu de cet élement mais uniquement par des événements issus des descendants de cet élément. Donc, en plus de changer le div sur lequel tu effectue le dispatchEvent, il te faut aussi changer le mode d'enregistrement du listener sur ce div, de façon à ce qu'il soit déclenché lors de la phase de dispatch 'at target'.

A moins qu'il y ait une erreur dans le html et que div2 soit en fait inclus dans div1 ?

**gabrielS** · 12/01/2015, 10h08

div1 n'est pas inclus dans div2. J'avais juste mal compris le dispatch, je pensais que c'était simplement un moyen de donner un "propriétaire" à l'event lancé mais non les "receveurs".
Ca marche avec div1.dispatch au lieu de div2.dispatch...

Merci à vous 2.

addEventListener and dispatchEvent

JavaScript

Discussions similaires

Partager

Partager