this - Referenz in Events

D

dadom110

Erfahrenes Mitglied
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:


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
 
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.
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: 
<!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>
 
Zuletzt bearbeitet:
CPoly hat gesagt.:
Ich kann zwar nicht reproduzieren, was du sagst
Zum Vergrößern anklicken....

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

Javascript: 
		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:

Javascript: 
        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
 
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.
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...)
 
Zuletzt bearbeitet:
Hier nochmal ein kompletten Beispiel. Beim klick auf das Textfeld (bekommt Fokus) ändert sich der Titel des Dokumentes.

HTML: 
<!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.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück