Eventhandling

[MistaPink]

Hallo,

ich habe ein Problem mit dem Eventhandling. Und zwar Versuche ich mit Event.observe() die Events auf Buttons zu legen. Wenn ich mir aber vorher it $() eine Referenz auf das DOM-Objekt geben lasse, funktioniert das ganze nicht so wirklich, d.h. das Event wird nicht registriert bzw der Eventhandler wird nicht aufgerufen. Aber das Ausführen des Codes bringt bei Firebug auch keinerlei Fehlermeldung. Vielleicht kann mir jemand sagen, woran das liegt?

Hier noch ein Beispiel:

  
function foo(buttons)  
{  
 this.buttons = new Object();  
 this.buttons.Zoomin = $(buttons[0]);  
 this.buttons.Zoomin.style.cursor = 'pointer'; // Style wird gesetzt  
 Event.observe(this.buttons.Zoomin, 'click', this.btnZoomin_Click.bindAsEventListener(this)); // Event wird nicht behandelt :(  
 //Event.observe($('btnZoomin'), 'click', this.btnZoomin_Click.bindAsEventListener(this)); // Event wird behandelt  
 this.btnZoomin_Click = function(event) { /* ... */ };  
}  
  
var buttons = new Array('btnZoomin', 'btnZoomout');  
foo(buttons);  

Vielen Dank schon im Vorraus.
Bis denne

[Struppi]

ich habe ein Problem mit dem Eventhandling. Und zwar Versuche ich mit Event.observe() die Events auf Buttons zu legen. Wenn ich mir aber vorher it $() eine Referenz auf das DOM-Objekt geben lasse, ...

Du mischt DOM und irgendeine Bilbiothek, das geht natürlich nicht (ider nur bedingt).

Struppi.

[MistaPink]

Hallo Struppi,

ich hatte vergessen dazu zu sagen, dass ich Prototype nutze :(.

Wieso kann man die beiden nicht mischen?

Bis denne

[Struppi]

Wieso kann man die beiden nicht mischen?

Gar nicht.

Struppi.

[MistaPink]

Hallo Struppi,

könntest du mir vielleicht nochmal erklären, was du mit mischen meinst?
Laut: http://prototypejs.org/api/event/observehttp://prototypejs.org/api/event/observe[/link] brauche ich eine Referenz auf ein DOM-Element. Diese bekomme ich zum Beispiel mit $(). Und das dies klappt, zeigt doch zum Beispiel die Zeile:

  
this.buttons.Zoomin.style.cursor = 'pointer'; // Style wird gesetzt.  

Mich würde halt einfach nur interessieren, warum der Aufruf von
Event.observe() so nicht funktioniert. Der zweite:

  
Event.observe($('btnZoomin'), 'click', this.btnZoomin_Click.bindAsEventListener(this));  

geht ja sehr gut.

Wär wirklich nett, wenn du nochmal etwas genauer dazu etwas sagen könntest und nicht nur einen Satz.

Dankeschön.

[Struppi]

Wär wirklich nett, wenn du nochmal etwas genauer dazu etwas sagen könntest und nicht nur einen Satz.

Kann ich leider nicht, da ich das Framework nicht gut genug kenne um dir sagen zu können, was da im Detail passiert.

Struppi.

[Joachim]

Hi,

Event.observe(this.buttons.Zoomin, 'click', this.btnZoomin_Click.bindAsEventListener(this)); // Event wird nicht behandelt :(

Vermutlich weil "this" Dich innerhalb einer Prototype-Methode in den Scope des Prorotype-Objekts versetzt und sich nicht mehr auf Dein eigenes Objekt bezieht. bindAsEventListener rufst Du so ja auch im Prototype-Kontext auf...

Gruesse, Joachim

[MistaPink]

Hallo Joachim,

Vermutlich weil "this" Dich innerhalb einer Prototype-Methode in den Scope des Prorotype-Objekts versetzt und sich nicht mehr auf Dein eigenes Objekt bezieht. bindAsEventListener rufst Du so ja auch im Prototype-Kontext auf...

  
function foo(buttons)  
{  
 this.buttons = new Object();  
 this.buttons.Zoomin = buttons[0];  
 $(this.buttons.Zoomin).style.cursor = 'pointer'; // Style wird gesetzt  
 Event.observe($(this.buttons.Zoomin), 'click', this.btnZoomin_Click.bindAsEventListener(this)); // Event wird nicht behandelt :(  
 //Event.observe($('btnZoomin'), 'click', this.btnZoomin_Click.bindAsEventListener(this)); // Event wird behandelt  
 this.btnZoomin_Click = function(event) { /* ... */ };  
}  
  
var buttons = new Array('btnZoomin', 'btnZoomout');  
foo(buttons);  

Geht aber ebenfalls. Somit denke ich nicht, dass es am this liegt. Müsste außerdem nicht ein Fehlermeldung kommen, dass er dann Objekte buttons und Zoomin nicht kennt?
Ich habe auch mal bei script.aculo.us nach geschaut (in control.js):

  
Event.observe(this.element, 'blur', this.onBlur.bindAsEventListener(this));  
Event.observe(this.element, 'keydown', this.onKeyPress.bindAsEventListener(this));  

Dies ist m.E. das selbe wie bei mir und hier funktioniert es ja auch.

Ich mein mittlerweile habe ich wie man oben sieht eine Lösung gefunden, die zwar nicht sehr schön ist, aber ich würde halt noch gerne wissen, warum es auf die erste angedachte Weise nicht funktioniert.

Bis denne

[molily]

Hallo,

Ich habe auch mal bei script.aculo.us nach geschaut (in control.js):

Event.observe(this.element, 'blur', this.onBlur.bindAsEventListener(this));
Event.observe(this.element, 'keydown', this.onKeyPress.bindAsEventListener(this));

> Dies ist m.E. das selbe wie bei mir und hier funktioniert es ja auch.  
  
Schau dir nicht einfach irgendwo etwas ab und kopiere es. Scriptaculous arbeitet mit Instanzen, die durch Konstruktorfunktionen erstellt werden. Das tust du nicht. Also hat dich das ganze »this.blabla« nicht zu interessieren. Wenn du this außerhalb einer Konstruktorfunktion aufrufst, zeigt es einfach auf window.  
  
Mathias

-- 
[SELFHTML aktuell Weblog](http://aktuell.de.selfhtml.org/weblog/)

[molily]

Hallo,

Hier noch ein Beispiel:
function foo(buttons)
{
this.buttons = new Object();

this verweist, sofern du foo tatsächlich einfach mit foo(...) aufrufst, auf das globale Objekt window.

Mit dieser Zuweisung überschreibst du die globale Variable buttons. Aber du hast den Array ja noch als Parameter an die Funktion übergeben, deshalb funktioniert der Zugriff auf buttons (ohne this).

Da solltest du mal Klarheit schaffen.

Event.observe(this.buttons.Zoomin, 'click', this.btnZoomin_Click.bindAsEventListener(this)); // Event wird nicht behandelt :(

Dein Beispiel funktioniert problemlos bei meinen Tests.

this ist in dieser Zeile gleich window. Du machst also das:

Event.observe(window.buttons.Zoomin, 'click', window.btnZoomin_Click.bindAsEventListener(window));

Es ist sinnlos, bindAsEventListener mit dem Parameter window aufzurufen. bindAsEventListener ist gerade dazu da, damit this in der Handler-Funktion *nicht* auf window zeigt. Sinnvoll wäre .bindAsEventListener(window.buttons.Zoomin). Bzw. verstehe ich nicht ganz, warum du window.buttons überschreibst, anstatt einfach eine lokale Variable zu erzeugen.

Mathias