Ergebnis 1 bis 7 von 7
  1. #1
    Selius ist offline Grünschnabel
    registriert
    23-05-2011
    Beiträge
    5

    von event auf eine andere funktion im Objekt zugreifen.

    Hallo Leute.

    Vermutlich wurde diese Frage schon x mal beantwortet, aber irgendwie finde ich keine Lösung.

    Meine Situation ist diese:
    Code:
    var container = {
    	
    	init : function(){
    		var myB = document.getElementById('myButton');
    		this.assignListener(myB, 'click', this.clickListener);
    	},
    	
    	assignListener : function(elem, type, fn){
    		if (elem.addEventListener) {
    			elem.addEventListener( type, fn, false );
    		} else if (obj.attachEvent) {
    			elem["e"+type+fn] = fn;
    			elem[type+fn] = function() {
    					obj["e"+type+fn]( window.event );
    				}
    			elem.attachEvent( "on"+type, obj[type+fn] );
    		}
    	},
    	
    	clickListener : function(e){
    		this.giveOut('Blubber!'); // diese Funktion ist nicht auffindbar.
    	},
    	
    	giveOut : function(inString){
    		alert(inString);
    	}
    	
    }
    im Body ist nurnoch:

    Code:
    <input type="button" id="myButton" />
    <script>container.init();</script>
    Der Container enthält alle möglichen funktionen und alle nötigen Listener. Über die assignListener funktion (die ich ergooglet habe) weise ich die Listener den entsprechenden HTML-Elementen zu.
    Aber von diesen ListenerFunktionen kann ich nicht auf andere Funktionen des selben Objekts zugreifen.
    Hier wird this vom Eventobjekt überschrieben und die Funktion 'clickListener' findet ihre Klasse nicht wieder.
    Klar kann ich auch global über 'container' gehen, aber gibt es da nicht noch eine elegantere methode? Vor allem, für den Fall wenn es mehrere Container gibt.

  2. #2
    Avatar von Arcsinh
    Arcsinh ist offline Kaiser
    registriert
    03-06-2010
    Beiträge
    1.392

    AW: von event auf eine andere funktion im Objekt zugreifen.

    Code:
    assignListener : function(elem, type, fn){
    	var that = this;
    	if (elem.addEventListener) {
    		elem.addEventListener( type, function() {
    			fn.call(that);
    		}, false );
    	} else if (elem.attachEvent) {
    		elem.attachEvent("on"+type, function() {
    			fn.call(that, window.event);
    		});
    	}
    },
    edit:
    im IE würde es sowieso eine Fehlermeldung geben, wegen der Zeile

    Code:
    else if (obj.attachEvent)
    obj existiert nicht.
    Geändert von Arcsinh (23-05-2011 um 17:22 Uhr)
    Wenn du eine weise Antwort verlangst, musst du vernünftig fragen. (Goethe)

  3. #3
    Selius ist offline Grünschnabel
    registriert
    23-05-2011
    Beiträge
    5

    AW: von event auf eine andere funktion im Objekt zugreifen.

    Hm,... auf den ersten Blick funktioniert die Lösung super.
    Auf den zweiten Blick, verlier ich teilweise dadurch die Verbindung zum eventobjekt.

    Auf den dritten Blick liegt die Lösung auf der Hand: Für FF muss das eventobjekt ebenfalls mit übergeben werden.
    Code:
    	assignListener : function(elem, type, fn){
    		var that = this;
    		if (elem.addEventListener) {
    			elem.addEventListener( type, function(e) {
    				fn.call(that, e);
    			}, false );
    		} else if (elem.attachEvent) {
    			elem.attachEvent("on"+type, function() {
    				fn.call(that, window.event);
    			});
    		}
    	},

    Vielen Dank.
    Geändert von Selius (23-05-2011 um 18:02 Uhr)

  4. #4
    Avatar von Arcsinh
    Arcsinh ist offline Kaiser
    registriert
    03-06-2010
    Beiträge
    1.392

    AW: von event auf eine andere funktion im Objekt zugreifen.

    Zitat Zitat von Selius Beitrag anzeigen
    Auf den dritten Blick liegt die Lösung auf der Hand: Für FF muss das eventobjekt ebenfalls mit übergeben werden.
    Ah ok, hab ich vergessen, weil ich FF nicht so oft verwende.
    Wenn du eine weise Antwort verlangst, musst du vernünftig fragen. (Goethe)

  5. #5
    Selius ist offline Grünschnabel
    registriert
    23-05-2011
    Beiträge
    5

    AW: von event auf eine andere funktion im Objekt zugreifen.

    Dafür sind wir ja in nem Forum.

  6. #6
    Selius ist offline Grünschnabel
    registriert
    23-05-2011
    Beiträge
    5

    AW: von event auf eine andere funktion im Objekt zugreifen.

    Kleines Manko bei dieser Lösung: der Funktionshändler für das Event geht verlohren.
    Dadurch kann das Event später nicht mehr entfernt werden.

  7. #7
    Selius ist offline Grünschnabel
    registriert
    23-05-2011
    Beiträge
    5

    AW: von event auf eine andere funktion im Objekt zugreifen.

    Für alle Sucher:

    um dieses Problem zu lösen habe ich jetzt einen Event-Listener-Provider geschrieben, vielleicht hilft es dem ein oder anderen:

    Code:
    	var eventListenerProvider : {
    		
    		evtFunctionsArr : new Object(),
    		
    		assignListener : function(elem, type, fn, refObj){
    			var that = refObj;
    			
    			var eFn = null;
    			
    			if (elem.addEventListener) {
    				
    				eFn = function(e){ fn.call(that, e); };
    				
    				elem.addEventListener( type, eFn, false );
    			} else if (elem.attachEvent) {
    				
    				eFn = function(){fn.call(that, window.event);};
    				
    				elem.attachEvent("on"+type, eFn);
    			} 
    			
    			if(eFn != null){
    				this.evtFunctionsArr[elem.id+type+fn] = eFn;
    				return true;
    			} else {
    				return false;
    			}
    			
    		},
    		
    		removeListener : function(elem, type, fn){
    			
    			if( !this.evtFunctionsArr[elem.id+type+fn]){
    				return false;
    			}
    			
    			var eFn = this.evtFunctionsArr[elem.id+type+fn];
    			
    			if (elem.removeEventListener) {
    				elem.removeEventListener( type, eFn, false );
    				this.evtFunctionsArr[elem.id+type+fn] = null;
    				return true;
    			} else if (elem.detachEvent) {
    				elem.detachEvent("on"+type, eFn);
    				this.evtFunctionsArr[elem.id+type+fn] = null;
    				return true;
    			}
    			return false;
    		}
    	}
    Wie ich den Provider benutzt habe ist hier in dem isolierten Test ersichtlich:

    Code:
    <!DOCTYPE html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Unbenanntes Dokument</title>
    <script>
    
    var container = {
    	
    	// Listenerzuweisung bei Initialisierung
    	init : function(){
    		this.eventListenerProvider.assignListener(document.getElementById('assignButton'), 'click', this.assignListener, this);
    		this.eventListenerProvider.assignListener(document.getElementById('removeButton'), 'click', this.removeListener, this);
    	},
    	
    	// Dieser Listener fügt einen Listener nachträglich hinzu.
    	assignListener : function(e){
    		this.eventListenerProvider.assignListener(document.getElementById('testButton'), 'click', this.clickListener, this);
    	},
    	
    	// Dieser Listener beseitigt den nachträglichen Listener wieder.
    	removeListener : function(e){
    		this.eventListenerProvider.removeListener(document.getElementById('testButton'), 'click', this.clickListener, this);
    	},
    	
    	// Dies ist der Listener, der hinzugefügt/beseitigt wird.
    	clickListener : function(e){
    		this.giveOut('Blubber =>' + (e.target || e.srcElement));
    	},
    	
    	// Eine funktion auf die der Listener zugreifen können muss. Thema: referenzierung von this.
    	giveOut : function(inString){
    		alert(inString);
    	},
    	
    	// Dieses Objekt verwaltet eventlistener.
    	// Innerhalb des Listeners kann per 'this' auf das übergebene referentObjekt zugegriffen werden.
    	// Um dies zu gewährleisten wird für jeden Listener eine anonyme Funktion erstellt. (Für weiter Informationen: Thema -> closures)
    	// Um sie später wieder entfernen zu können, wird die anonyme Funktion zwischen gespeichert.
    	eventListenerProvider : {
    		
    		// Temporäre EventFunktionen werden in diesem objekt abgelegt.
    		evtFunctionsArr : new Object(),
    		
    		// Hier wird der Listener engegengenommen und in einer anonymen Funktion gekapselt.
    		assignListener : function(elem, type, fn, refObj){
    			var that = refObj;
    			
    			var eFn = null;
    			
    			if (elem.addEventListener) {
    				eFn = function(e){ fn.call(that, e); };
    				elem.addEventListener( type, eFn, false );
    			} else if (elem.attachEvent) {
    				eFn = function(){fn.call(that, window.event);};
    				elem.attachEvent("on"+type, eFn);
    			} 
    			
    			if(eFn != null){
    				this.evtFunctionsArr[elem.id+type+fn] = eFn;
    				return true;
    			} else {
    				return false;
    			}
    			
    		},
    		
    		// Hier wird die anonyme Funktion des Listeners vom Element entfernt.
    		removeListener : function(elem, type, fn){
    			
    			if( !this.evtFunctionsArr[elem.id+type+fn]){
    				return false;
    			}
    			
    			var eFn = this.evtFunctionsArr[elem.id+type+fn];
    			
    			if (elem.removeEventListener) {
    				elem.removeEventListener( type, eFn, false );
    				this.evtFunctionsArr[elem.id+type+fn] = null;
    				return true;
    			} else if (elem.detachEvent) {
    				elem.detachEvent("on"+type, eFn);
    				this.evtFunctionsArr[elem.id+type+fn] = null;
    				return true;
    			}
    			
    			return false;
    		}
    	}
    	
    }
    
    </script>
    </head>
    
    <body>
    <input type="button" id="assignButton" name="assignListener" value="assignListener" /><input type="button" id="removeButton" name="removeListener" value="removeListener" /><br />
    <input type="button" id="testButton" name="testListener" value="testListener" />
    <script>container.init();</script>
    </body>
    </html>
    Getestet in FF 3.6, IE8, Chrome 11.0, Safari 3.1.2
    Geändert von Selius (23-05-2011 um 20:02 Uhr) Grund: Ergänzung

Ähnliche Themen

  1. Javascript String-Objekt um eine Funktion erweitern?
    Von Flashbaer im Forum JavaScript
    Antworten: 2
    Letzter Beitrag: 18-06-2010, 21:55
  2. auf andere Websiten zugreifen
    Von Grizly im Forum JavaScript
    Antworten: 3
    Letzter Beitrag: 29-01-2009, 22:31
  3. Event Auslöser (Callee von Event Objekt)?
    Von sacharja im Forum JavaScript
    Antworten: 14
    Letzter Beitrag: 16-03-2007, 09:21
  4. Antworten: 2
    Letzter Beitrag: 23-11-2005, 23:18
  5. Antworten: 3
    Letzter Beitrag: 18-09-2003, 13:19

Stichworte

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •