Evenement DOM2 et objet

**JLC83** · 24/01/2012, 21h37

Bonsoir,
Je souhaite en utilisant la fonction suivante :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
var jlc;
jlc = {};
jlc.addEvent = function (obj, evType, fn) {
	if (obj.addEventListener){
		obj.addEventListener(evType, fn, false);
		return false;
	} 
	else if (obj.attachEvent){
		var r = obj.attachEvent("on"+evType, fn);
		return false;
	} 
};

Évidemment, c'est un objet qui dans une méthode lance l’événement. ET la fonction de traitement de l'objet est une méthode de l'objet lui mê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
function Cc(){
		this.pa = document.getElementById('pa');
		this.pv = document.getElementById('pv');
		this.cx = document.getElementById('cx');
		this.mb = document.getElementById('mb');
		this.tva = document.getElementById('tva');
		this.tq = document.getElementById('tq');
		this.init();
	}
	Cc.prototype.init = function(){
		this.vtva = parseFloat(jlc.SelectVal('tva'));
		this.vpa = parseFloat(this.pa.value)||false;
		this.vpv = parseFloat(this.pv)||false;
		this.vcx = parseFloat(this.cx)||false;
	};
	Cc.prototype.comportement = function(){
		jlc.addEvent(this.tg,'click',this.test);
	};
	Cc.prototype.test = function(){
		alert('Dedans la méthode');
	};

Pourtant, le test ne fonctionne pas...
Une idée ?
Merci

**Willpower** · 24/01/2012, 22h10

Voici un exemple fonctionnel :

Code html :

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
<html>
<head>
<style>
div{border:solid;};
</style>
<script>
        var jlc = {SelectVal:function(){}};
        jlc.addEvent = function (obj, evType, fn) {
                if (obj.addEventListener){
                        obj.addEventListener(evType, fn, false);
                        return false;
                } 
                else if (obj.attachEvent){
                        var r = obj.attachEvent("on"+evType, fn);
                        return false;
                } 
        };
        function Cc(){
                this.pa = document.getElementById('pa');
                this.pv = document.getElementById('pv');
                this.cx = document.getElementById('cx');
                this.mb = document.getElementById('mb');
                this.tva = document.getElementById('tva');
                this.tq = document.getElementById('tq');
                this.init();
        }
        Cc.prototype.init = function(){
                this.vtva = parseFloat(jlc.SelectVal('tva'));
                this.vpa = parseFloat(this.pa.value)||false;
                this.vpv = parseFloat(this.pv)||false;
                this.vcx = parseFloat(this.cx)||false;
        };
        Cc.prototype.comportement = function(){
                jlc.addEvent(this.tq,'click',this.test);
        };
        Cc.prototype.test = function(){
                alert('Dedans la méthode');
        };
 
window.onload = function(){ 
        var c = new Cc();
        c.comportement();
};
</script>
</head>
<body>
<div id=pa>pa</div>
<div id=pv>pv</div>
<div id=cx>cx</div>
<div id=mb>mb</div>
<div id=tva>tva</div>
<div id=tq>tq(cliquable)</div>
</body>
</html>

Explications :

1) Dans "init" tu appelles "jlc.SelectVal('tva')", SelectVal n'existait nulle part dans ton code.

2) Dans "comportement" tu appelais "jlc.addEvent(this.tg,'click',this.test);" mais l'objet "jlc" n'avait aucune propriété nommée "tg", je l'ai donc modifié en "tq" pour correspondre à un des tes éléments initié dans le constructeur.

3) Il est important de ne pas oublier le "new" lors de l'appel au constructeur de Cc pour créer l'objet (le "this") et j'ai aussi ajouté un appel à "comportement" qui ne se trouvait nulle part.

4) Finalement j'ai lancé mes remarques du point (3) dans une fonction qui se lance après le chargement de la page pour être certains que tes éléments du DOM soient déjà existants.

J'espère qu'avec toutes ces remarques (j'imagine que certaines étaient déjà appliquées dans ton code complet) tu arriveras à faire fonctionner ce que tu veux.

Willpower.

**JLC83** · 25/01/2012, 22h37

Effectivement, une bonne part des préconisations sont déjà dans le code.
J'effectue encore quelques tests.
Merci

Evenement DOM2 et objet

JavaScript

Vue hybride

Discussions similaires

Partager

Partager