addEventListener and dispatchEvent

Version imprimable

09/01/2015, 12h09
gabrielS

addEventListener and dispatchEvent
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:

1 2 var event = new CustomEvent("build", { "detail": 42}); divTimeline.dispatchEvent(event);
et j'attrape ensuite l'event par ce biais :
Code:

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.
09/01/2015, 16h12
lysandro

Bonjour,

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

Code:

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

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:

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>

09/01/2015, 21h20
SylvainPV

Le customEvent build est dispatché sur la div2, or tu l'écoutes sur la div1 :aie:
10/01/2015, 10h42
lysandro

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 ?
12/01/2015, 10h08
gabrielS

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.