this - Referenz in Events @ tutorials.de: Tutorials, Forum & Hilfe

dadom110 · 08.08.10 11:33

Hallo Zusammen,

da ich nicht so häufig was mich Javascript mache, stehe ich gerade vor einem kleinen Problem.

Ich verwendet Javascript um mir ein Object zu bauen, das unter anderem eine Textbox zusammen setzt, die als Event eine Funktion dieses Objektes aufrufen soll...klingt verwirrent, darum versuch ich mal ein kurz-Beispiel:

Code javascript:

function MultiInputField (multiBoxName) {
    
    //define functions
    this.getInputField=inputField;
    this.alert=alertDefaultValue;
    
    this.defaultValue="XXX";
    this.parent=document.getElementById(multiBoxName);
    this.parent.appendChild(this.getInputField());
}
 
function alertDefaultValue() {
    alert(this.defaultValue);
}
 
function inputField()
{
    text=document.createElement("input");
    text.type="text";
    text.onfocus=this.alert;
    
    return text;
}

Beim Aufruf der Methode "alertDefaultValue" ist die "this"-Referenz nicht das Javascript Objekt, sondern das Inputfield... das mag logisch sein, aber wie würde ich es erreichen das ich in der Event Methode wieder Zugriff auf meine Objekt-Instanz habe?

Danke schon mal
Dom

***CPoly*** · 08.08.10 11:57

Ich kann zwar nicht reproduzieren, was du sagst, aber du solltest die Funktionen in die "Klasse" (deine Konstruktor Funktion) stecken, denn sonst kann man sie ja auch ohne Objekt aufrufen.

Code javascript:

function MultiInputField (multiBoxName) {
    
    //define functions
    this.getInputField=inputField;
    this.alert=alertDefaultValue;
    
    this.defaultValue="XXX";
    this.parent=document.getElementById(multiBoxName);
    this.parent.appendChild(this.getInputField());
 
    function alertDefaultValue() {
        alert(this.defaultValue);
    }
 
    function inputField()
    {
        text=document.createElement("input");
        text.type="text";
        text.onfocus=this.alert;
    
        return text;
    }
}

Hier noch ein Beispiel. Es gibt erfolgreich "XXX" in einem alert-Fenster aus. Das funktioniert aber auch mit den Funktionen außerhalb korrekt (mit dem Code aus deinem Post).

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html id="html" xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	
	<title>Titel</title>

	<script type="text/javascript">
	/* <![CDATA[ */
		function MultiInputField (multiBoxName) {
    
			//define functions
			this.getInputField=inputField;
			this.alert=alertDefaultValue;
		
			this.defaultValue="XXX";
			this.parent=document.getElementById(multiBoxName);
			this.parent.appendChild(this.getInputField());
			
			function alertDefaultValue() {
				alert(this.defaultValue);
			}
			 
			function inputField()
			{
				text=document.createElement("input");
				text.type="text";
				text.onfocus=this.alert;
	
				return text;
			}
		}
		
		window.onload = function() {
			var foo = new MultiInputField("txt");
			foo.alert();
		};
	/* ]]> */
	</script>
</head>

<body>
    <div id="txt"></div>
</body>

</html>

dadom110 · 08.08.10 14:31

Zitat von CPoly

Ich kann zwar nicht reproduzieren, was du sagst

Jepp weil dein Beispiel nicht ganz das Wiederspiegelt was ich vorhabe:

Code javascript:

1
2
3

        window.onload = function() {
            var foo = new MultiInputField("txt");
            foo.alert();

funktioniert natürlich, weil auf dem Objekt "foo" die Funktion aufgrufen wird.
Was ich aber ja erreichen will ist:

Code javascript:

1	text.onfocus=this.alert;

das in einem Event des erzeugten Textfeldes die Aktion aufgesführt wird.

Bei "foo.alert()" verweist die "this" Referenz korrekterweise auf die Instanz des MultiInpuFields. Wenn ich aber oben genannte Funktion verwendet um dem TextFeld das Event zu zu weisen ist ist das "this" beim Auftreten des Events nicht die Instanz des MultiInputFields, sondern des Textfeldes selber.

Grüße
Dom

***CPoly*** · 08.08.10 15:34

Jetzt verstehe ich

Ich weiß nicht, ob es das üblich Vorgehen wäre, aber merk dir die this-Referenz in einer weiteren Variable. Hier der funktionierende Code mit kommentierten Änderungen.

Code javascript:

function MultiInputField (multiBoxName) {
    //hier merken wir uns die Referenz
    var _this = this;    
 
    //define functions
    this.getInputField=inputField;
    this.alert=alertDefaultValue;
 
    this.defaultValue="XXX";
    this.parent=document.getElementById(multiBoxName);
    this.parent.appendChild(this.getInputField());
    
    function alertDefaultValue() {      
        //Hier wird jetzt nicht this benutzt, sondern die Referenz auf das Objekt       
        document.title = _this.defaultValue;
    }
     
    function inputField()
    {
        //hat zwar nichts damit zu tun, aber ohne "var" ist die Variable global und könnte durch Instanzen verändert werden
        var text=document.createElement("input");
        text.type="text";
        text.onfocus=this.alert;
 
        return text;
    }
}

Edit: Ich hab zum Testen noch das alert raus-genommen gehabt und durch document.title ersetzt, weil so ein endlos alert nervt (beim schließen des alert bekam das Textfeld wieder den Focus...)

dadom110 · 08.08.10 17:16

Zitat von CPoly

Jetzt verstehe ich

Ich weiß nicht, ob es das üblich Vorgehen wäre, aber merk dir die this-Referenz in einer weiteren Variable.

Hi,

rufst du die Funktion denn jetzt auch über das Event auf? Bei mir kommt dann (FireFox) das die Referenz "_this" nicht definiert ist?

Grüße
Dom

***CPoly*** · 08.08.10 17:32

Hier nochmal ein kompletten Beispiel. Beim klick auf das Textfeld (bekommt Fokus) ändert sich der Titel des Dokumentes.

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html id="html" xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	
	<title>Titel</title>

	<script type="text/javascript">
	/* <![CDATA[ */
		function MultiInputField (multiBoxName) {
			//hier merken wir uns die Referenz
			var _this = this;    

			//define functions
			this.getInputField=inputField;		
			this.alert=alertDefaultValue;

			this.defaultValue="XXX";
			this.parent=document.getElementById(multiBoxName);
			this.parent.appendChild(this.getInputField());
	
			function alertDefaultValue() {      
				//Hier wird jetzt nicht this benutzt, sondern die Referenz auf das Objekt       
				document.title = _this.defaultValue;
			};
	
			function inputField()
			{
				//hat zwar nichts damit zu tun, aber ohne "var" ist die Variable global und könnte durch Instanzen verändert werden
				var text=document.createElement("input");
				text.type="text";
				text.onfocus=this.alert;

				return text;
			}
		}
		
		window.onload = function() {
			var foo = new MultiInputField("txt");
		};
	/* ]]> */
	</script>
</head>

<body>
	<div id="txt"></div>
</body>

</html>

Ich hoffe ich hab dich jetzt auch wirklich korrekt verstanden.

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

c.o.f.f.e.e. referenz?

Referenz

Referenz

Referenz auf Referenz

Referenz

Stichworte

E-Mail:

Abonnieren Abbestellen