nicht angemeldet
Eigenschaften an einen eventHandler übergeben
StruppiHallo,
ich habe da ein Problem mit einem Konstruktor und der Übergabe von Werten an einen eventHandler. Vieleicht kann mir jemand helfen?
Der nachfolgende Code soll helfen, das Problem zu beschreiben:
Im Beispiel soll beim Klick in einen Tag die ID des Tags angezeigt werden.
<HTML>
<head>
</head>
<body>
<p ID="bulb">bulb</p>
</body>
<script type="text/javascript" >
//Konstruktor
function bulb(element){
this.element=element;
this.name=element.getAttribute('ID');
this.show=zeige;
this.element.onclick=zeige;
}
// werte Klickereignis aus
function zeige(){
alert("elementID="+this.name);
}
// erzeuge Instanz
b1=new bulb(document.getElementById("bulb"));
</script>
</html>
In meinem Beispiel wird das Klicken ausgewertet, es erscheint aber nur eine Meldung
"elementName=undefined".
Ich habe das auch schon mit anderen Varianten im Konstruktor wie z.B. addEventListener versucht. Das Ergebnis war immer das gleiche.
Wenn ich den Handler direkt im Tag unterbringe nach der Form
<p ID="bulb" onclick="b1.show()">bulb</p>
funktioniert das ganze. Es erscheint die Meldung
"elementID=bulb".
Ich möchte jedoch die Handler nicht im Tag vorgeben sondern über den Klassenkonstruktor. Hat vieleicht jemand eine Idee, die mir weiterhelfen könnte?
-
Hi,
this.element=element;
Hier speicherst du dir die Referenz auf das Element doch in einer public-Variablen.
function zeige(){
alert("elementID="+this.name);Also nutze diese Referenz hier, um auf das Element zuzugreifen.
MfG ChrisB
-
Hi,
this.element=element;
Hier speicherst du dir die Referenz auf das Element doch in einer public-Variablen.
function zeige(){
alert("elementID="+this.name);Also nutze diese Referenz hier, um auf das Element zuzugreifen.
MfG ChrisB
Hallo ChrisB, entschuldige das habe ich vieleicht nicht richtig verstanden...
die Funktion "zeige" soll eine Methode für die Klasse "bulb" sein. Ich möchte beliebig viele Instanzen erzeugen können. Und beim Klick auf ein im instanzierten Objekt angegebenes HTML Element soll an den eventHandler einn Eigenschaftswert des jeweiligen bulb-objektes übergeben werden. Ein Aufruf mit zeige(element) hilft mir da - glaube ich - nicht weiter?
-
-
<script type="text/javascript" >
//Konstruktor
function bulb(element){
this.element=element;
this.name=element.getAttribute('ID');
this.show=zeige;
this.element.onclick=zeige;Dein Problem ist das. In der onclick Funktion, ist this = this.element nicht das Objekt this.
Diese Variante ist auch nicht schön, da du eine unnötige globale Funktion benutzt und du musst dir eine Referenz auf das Objekt speichern um es in der Funktion anzsprechen, dass sieht dann so aus:
var self = this; this.element.onclick= function() { alert( self.name); };Struppi.
-
Danke, Struppi
nun funktioniert es!
-
-