öffentliche Methoden eines Objektes über einen Event-Handler aufrufen

[Kropff]

dank dieses threads bin ich auf ein problem gestossen, was ein wenig merkwürdig ist. folgendes beispiel wirft eine Fehlermeldung a la "this.cancelEditingNumber is not a function" aus:

<div id="blubb">
    
</div>
<script type="text/javascript">
    function HandyEditor() 
    {
      this.editNumber = function() 
      {        
        // create cancel button
        cancelLink = document.createElement('a');
        cancelLink.href = '#';
        cancelLink.innerHTML = 'Abbrechen';        
        document.getElementById('blubb').appendChild (cancelLink);
        cancelLink.onclick = function() 
        {
          this.cancelEditingNumber();
        }
      }      
      this.cancelEditingNumber = function () 
      {    
        alert ('bla');    
      }
    }
    var handyEditor = new HandyEditor();
    handyEditor.editNumber();
  </script> 

während folgendes einwandfrei funktioniert.

<div id="blubb">
    
  </div>
  <script type="text/javascript">
    function HandyEditor() 
    {
      this.editNumber = function() 
      {        
        // create cancel button
        cancelLink = document.createElement('a');
        cancelLink.href = '#';
        cancelLink.innerHTML = 'Abbrechen';        
        document.getElementById('blubb').appendChild (cancelLink);
        this.cancelEditingNumber();
      }      
      this.cancelEditingNumber = function () 
      {    
        alert ('bla');    
      }
    }
    var handyEditor = new HandyEditor();
    handyEditor.editNumber();
  </script> 

kann mir mal jemand erklären, warum ich hier bei dem onclick-handler

cancelLink.onclick = function() 
{
  this.cancelEditingNumber();
} 

besagte meldung erhalte, während das einfache

this.cancelEditingNumber(); 

sauber läuft?

peter

[Abraxax]

weil die fkt noch nicht definiert wurde evtl? *schussinsblaue*

[Kropff]

*schussinsblaue*

wohl eher ein schuss in den ofen

this.cancelEditingNumber = function () 
{    
  alert ('bla');    
} 

andere reihenfolge bringt auch nichts

this.cancelEditingNumber = function () 
this.editNumber = function() 

ich hasse javascript!!!

peter

[Abraxax]

Original geschrieben von Kropff
wohl eher ein schuss in den ofen

hab' ich doch fast vermutet... *gg*

wenn du diese beiden zeilen mal verdrehst?

        document.getElementById('blubb').appendChild (cancelLink);
        cancelLink.onclick = function()

also erst das onclick definieren und dann ins DOM kleben?

[Kropff]

wenn du diese beiden zeilen mal verdrehst?

nee, garnichts. das selbe ergebnis, eine fehlermeldung.

peter

[PHP-Desaster]

Deine anonyme Funktion ist an kein Objekt gebunden. Schau dir in dem Zusammenhang mal die Methode apply und Prototype's bind an.

[Kropff]

Original geschrieben von PHP-Desaster
Deine anonyme Funktion ist an kein Objekt gebunden. Schau dir in dem Zusammenhang mal die Methode apply und Prototype's bind an.

apply hatten wir schon. siehe auch link zu obigem thread. und die kokosnuss wollen wir mal ohne prototype knacken.

was genau meinst du mit "ist an kein Objekt gebunden". sorry, ist schon spät und meine konzentrationsfähigkeit geht langsam aber sicher den bach herunter.

peter

[E.T.]

so ist das richtig!

<script type="text/javascript">
    function HandyEditor() 
    {
    
    var self = this;
    
      this.editNumber = function() 
      {        
        // create cancel button
        cancelLink = document.createElement('a');
        cancelLink.href = '#';
        cancelLink.innerHTML = 'Abbrechen';        
        document.getElementById('blubb').appendChild (cancelLink);
        cancelLink.onclick = function() 
        {
          self.cancelEditingNumber();
        }
      }      
      this.cancelEditingNumber = function () 
      {    
        alert ('bla');    
      }
    }
    
window.onload = function() {
    var handyEditor = new HandyEditor();
    handyEditor.editNumber();
}
  </script>
  
<div id="blubb">
    
</div> 

Erklärung dazu hier:
http://de.wikipedia.org/wiki/JavaScr..._Eigenschaften

[PHP-Desaster]

var self = this;
// ...
cancelLink.onclick = function() {
 self.cancelEditingNumber();
} 

So geht's auch. Prototype macht in etwa folgendes:

function bind( method, self ) {
    return( function() {
        method.apply( self );
    } );
} 

Das ist equivalent zu self.method(), allerdings kannst du apply als zweiten Parameter ein Array von Funktionsparametern übergeben, ähnlich call_user_func_array.

[Kropff]

na geht doch. danke für die hinweise. da habe ich heute abend was zu lesen.

peter