Allocation dynamique d'un événement à un élement. Paramètres this et event. [À relire]

**Auteur** · 22/12/2008, 20h20

[QR] Lorsqu'un événement est alloué dynamiquement à un objet HTML, comment transmettre à la fonction appelée lors de l'événement les objets this et event ?

[Section] Utilisation du DOM

[Auteur] FremyCompany

[Commentaires] Lorsque l'on alloue dynamiquement un événement à un objet, il peut être parfois utile de transmettre à la fonction l'objet event ainsi que l'objet (this) qui a déclenché cet événement.

Voici comment procéder :

Code xhtml :

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
 
<head>
 
<title></title>
 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
 
<script type="text/javascript">
<!-- 
function initObjet()
{
  document.getElementById("monElement").onclick = function(event)
                                                  { 
                                                    var ev;
                                                    ev = (event?event:window.event); // POUR IE
 
                                                    //id de l'objet et type d'événement
                                                    alert(this.id+" "+ev.type);
                                                  }
}
 
 
 
//-->
</script>
 
</head>
 
<body onload="initObjet()">
 
 
<div id="monElement">bla bla bla bla bla</div>
 
</body>
</html>

[Remarques] Compatible IE7, FF3. Pas testé sous IE6, Opéra, Konqueror.

Le bout de code ci-dessus a été extrait de cette discussion (messages 8 à 12).
J'ai donc réalisé un exemple en reprenant ce qu'à écrit FremyCompany :

Envoyé par FremyCompany

Il faut passer par une fonction "relais" qui complète les events

Voici le code sous-entendu par FireFox :

Code :

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

function (event) { move(event, this, "coucou"); }

Et celui par IE :

Code :

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

function () { move(event, this, "coucou"); }

Pour un code compatible on préférera en général :

Code :

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

1
2
3
4
function (event) {
  event = (event?event:window.event); // POUR IE
  move(event, this, "coucou"); 
}

**vermine** · 27/11/2013, 17h43

C'est le moment de relire ceci. On pourra éventuellement l'intégrer.

**Bovino** · 28/11/2013, 09h36

Heu... je vois pas trop l'utilité

Surtout que this et event sont disponibles sans avoir besoin de quoi que ce soit

Code :

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

1
2
3
4
5
6
7
var madiv = document.createElement('div');
madiv.onclick = coucou;
document.body.appendChild(madiv);
function coucou(event){
	console.log(this);
	console.log(event);
}

**Auteur** · 02/12/2013, 20h38

à un détail près : pour IE c'est window.event.

**Bovino** · 02/12/2013, 20h43

Oui, c'est bien pour ça que je nomme le paramètre event.

Si le paramètre existe (cas général où l'objet Event est passé en paramètre automatique), c'est lui qui sera utilisé, sinon (anciennes versions de IE), comme l'objet window est implicite, c'est window.event qui sera utilisé.
Ca évite une ligne supplémentaire

Code :

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