ajout d'evenement sur instance [Résolu]

mekal · 06/10/2011, 10h30

bonjour

dans une fonction je fait l'ajout d'evenement avec addEventListener en prenant soint de referencé l'instance ciblé mais malheureusement le ciblage n'est pas pris en compte et j’aurai voulu savoir ou est mon erreur ?

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
 
<!doctype html>
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Video element</title>
 
<link rel="stylesheet" type="text/css" href="res/player_4.css" />
<script type="text/javascript" src="res/player_4_proto2.js"></script>
 
<script type="text/javascript">
 
function coucou(gd){
 
	this.el=document.getElementById(gd);
 
	this.ajoutevent=function(e){
 
		e.preventDefault();
		this.curent(e);
		var luiii=this
		document.documentElement.addEventListener("mousemove", luiii.curent, false);
		document.documentElement.addEventListener("mouseup", luiii.retireevent, false);
 
	}
 
	this.retireevent=function(){
		alert(this)
		var luiii=this
		document.documentElement.removeEventListener("mousemove", luiii.curent, false);
		document.documentElement.removeEventListener("mouseup", luiii.retireevent, false);
 
	}
 
	this.curent=function(e){
 
		var setX =e.clientX;
		document.getElementById('gen2').value=setX;
		this.el.value=setX;
	}
 
}
 
function init(){
	element1=new coucou('gen');
}
 
onload=init
</script>
</head>
<body>
 
<input type='texte' id='gen'>
<input type='texte' id='gen2'>
<button onmousedown='element1.ajoutevent(event)'>blabla</button>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</body>
</html>

y a t'il vraiment une solution ?

NoSmoking · 06/10/2011, 20h34

Bonsoir,
il te faut utiliser une variable à laquelle on affecte le this, comme tu l'a fait d'ailleurs, et que l'on utilise à l'intérieure des fonctions de l'objet.

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
function coucou(gd){
  // reference a l'objet a l'interieur des fonctions de l'objet
  var that=this; 
 
  this.el=document.getElementById(gd);
 
  this.ajoutevent=function(e){
    e.preventDefault();
    that.curent(e);
    document.addEventListener( "mousemove", that.curent, false);
    document.addEventListener( "mouseup", that.retireevent, false);
  };
 
  this.retireevent=function(){
    document.removeEventListener( "mousemove", that.curent, false);
    document.removeEventListener( "mouseup", that.retireevent, false);
  };
 
  this.curent=function(e){
    // ici this est le document lorsque l'on move
    var setX=e.clientX;
    document.getElementById('gen2').value=setX;
    that.el.value=setX;
  };
}

mekal · 06/10/2011, 22h41

impec sa marche tres tres bien il y avait donc pas grand chose, mais j'avoue avoir du mal a comprendre que this soit le document dans ce que j'avait fait

ps:merci car grace a çà je vais pouvoir evolué vers de nouveaux horizon

06/10/2011, 22h41	#3
mekal Membre chevronné Krusty Inscription : mai 2009 Messages : 472 Détails du profil Informations personnelles : Nom : Krusty Localisation : France Informations forums : Inscription : mai 2009 Messages : 472 Points : 617 Points : 617	impec sa marche tres tres bien il y avait donc pas grand chose, mais j'avoue avoir du mal a comprendre que this soit le document dans ce que j'avait fait ps:merci car grace a çà je vais pouvoir evolué vers de nouveaux horizon __________________ programmer n'est pas connaitre tous les moindres détails d'un langage mais savoir exploiter sous toutes ses facettes ce que l'on connait.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email