Archivlink: javarea.de Forum > JavaScript > Innerhalb von Event Handler auf Objekt Instanz zugreifen
Vollständigen Link anzeigen: javarea.de Forum > JavaScript > Innerhalb von Event Handler auf Objekt Instanz zugreifen

Pages: [1]
geschrieben von okley am 09.12.2007 - 13:48
Hallo zusammen

Ich beschäftige mich grad mit OOP in Javascript... Folgendes würde ja funktionieren:
HTML-Quelltext
1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 
18: 
19: 
20: 

function obj(){
 this.foo = "ok";
 this.func = null;

 this.load = function(){
  this.func(this.foo);
 }
}

var instanz1 = new obj();
instanz1.func = function (arg1){ alert(arg1); };
instanz1.load(); // prints ok

Nun habe ich aber in der Funktion load ein Event Handler und möchte nun in diesem Event Handler mit this auf meine Instanz zugreifen, dass geht aber nicht, weil this in diesem Event Handler auf das Objekt zeigt, welches den Event ausgelöst hat...

this.load = function(){
  document.getElementById("el1").click = function(ev){
    this.func(this.foo); // geht nicht weil this auf el1 zeigt.
  }
}

Wie ist es möglich innerhalb eines Event Handler auf die Instanz zuzugreifen? Gibts dafür ein spezielles keyword oder muss ich die Funktionsweise vom Code gross ändern?

geschrieben von Micha am 09.12.2007 - 15:47
Hi,

Du muss die Instanz dann ans Objekt hängen.

HTML-Quelltext
1: 
2: 
3: 
4: 

var el = document.getElementById("el1");
el.Instanz = this;

el.onclick = function(e) { alert(this.Instanz.foo);  };


Micha

geschrieben von Martin am 09.12.2007 - 15:58
Ave,

PHP-Quelltext
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: 

<?
function obj(){
 this.foo = "ok";
 this.func = null;

 this.bind = function( elemId, callbackFunc ){
      var el = this.getEl( elemId );
      this.func = callbackFunc;
      el.onclick = this.func;
 }

  this.getEl = function( elmID ) {
      return document.getElementById( elmID );
 }
}

var instanz1 = new obj();
instanz1.bind ( 'elem1', 
                         function (arg1)
                        { 
                           alert(arg1); 
                       });

Nun habe ich aber in der Funktion load ein Event Handler und möchte nun in diesem Event Handler mit this auf meine Instanz zugreifen, dass geht aber nicht, weil this in diesem Event Handler auf das Objekt zeigt, welches den Event ausgelöst hat...

this.load = function(){
  document.getElementById("el1").click = function(ev){
    this.func(this.foo); // geht nicht weil this auf el1 zeigt.
  }
}
?>



PHP-Quelltext
1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
14: 

<?
var object = {
     // private vars
     foo: 'bar',
     bar: 'foo',
     return {
         // public methods
         doit:function( arg1 ) {
                return this.foo + arg1;
         }
     }
}();
object.doit('foo');
?>



mfg martin

geschrieben von okley am 09.12.2007 - 18:56
Ich danke euch beiden für die Antwort. Ich hab nun eine Lösung gefunden und implementiert. Sie gleicht vom Prinzip her der von Martin.

PHP-Quelltext
1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 

<?
// quelle:  http://groups.google.com/group/Java....18fb4b145f 
        Function.prototype.bind = function(scope){
            var method = this;
            return function(){
                return method.apply(scope, arguments);
            }
        }
// Dann um den Event innerhalb der Objektmethode für das link Element zu registrieren:
jQuery.event.add(link, "click", this._clickHandler.bind(this));
?>


Powered by: JBB v.2.0.4 Copyright ©2000-2006, www.javarea.de.