"this" ved bruk av events [løst]

magicgunnar · 15. oktober 2007

Jeg kaller en event på følgende måte:

document.getElementById('image').onmousemove = Minklasse.funksjonenjegkaller;

Når funksjonen kjøres vil jeg gjerne bruke "this" for å kalle en annen metode i Minklasse, men det går ikke fordi "this" peker på bildeobjektet (document.getElementById('image')).

Minklasse.funksjonenjegkaller = function (e){
this.enannenfunksjoniklassen();
}

Minklasse.enannenfunksjoniklassen = function (){
//kode....
}

Har jeg noe annet valg enn å spesifisere klassen og skrive:

Minklasse.funksjonenjegkaller = function (e){
Minklasse.enannenfunksjoniklassen();
}

Føler dette blir litt rotete, og hvis jeg ikke kaller metoden statisk må jeg også opprette et nytt objekt for hver gang jeg ikke lenger kan bruke "this".

Endret 16. oktober 2007 av magicgunnar

LostOblivion · 15. oktober 2007

Dette skal få this til å peke på klassen:

function Klasse()
{
a = 5;
this.metodeNavn = function()
{
 this.a = 10;
}
}

Men vennligst spesifiser?

Endret 15. oktober 2007 av LostOblivion

magicgunnar · 16. oktober 2007

Problemet var nok litt dårlig formulert ja:

Lagde en testside:

<html>
<head>
</head>
<body>
<input type='button' name='test_1' value='test1' id='test1'>
<input type='button' name='test_2' value='test2' id='test2' onclick='Minklasse.funksjonenjegkaller(event)'>
<input type='button' name='test_3' value='test3' id='test3'>
<p>Errormessage1: <input id="errormessage1" name="errormessage1" type=text size="100"></p>
<p>Errormessage2: <input id="errormessage2" name="errormessage2" type=text size="100"></p>
<p>Errormessage3: <input id="errormessage3" name="errormessage3" type=text size="100"></p>
<p>Errormessage4: <input id="errormessage4" name="errormessage4" type=text size="100"></p>
<p>Errormessage5: <input id="errormessage5" name="errormessage5" type=text size="100"></p>

<script type='text/javascript'>
var Minklasse = function Minklasse(){}

Minklasse.funksjonenjegkaller = function (e){
	try{
		document.getElementById('errormessage2').value = '( e: ' + e + ' ) ';		
		// Explorer, Opera || Firefox
		document.getElementById('errormessage3').value = '';
		var x = (e) ? e.pageX : event.x;
		var y = (e) ? e.pageY : event.y;
		document.getElementById('errormessage3').value = '( x: ' + x + ' y: ' + y + ' ) ';
		this.enannenfunksjoniklassen();
	}
	catch(exception){
		document.getElementById('errormessage4').value = 'function failed, error: ' + exception;
		document.getElementById('errormessage5').value = 'this: ' + this;
	}
}

Minklasse.enannenfunksjoniklassen = function (){
	document.getElementById('errormessage4').value = 'this function correctly!';
	document.getElementById('errormessage5').value = 'this: ' + this;
}

document.getElementById('errormessage1').value = Math.random().toFixed(1);
document.getElementById('test1').onclick = Minklasse.funksjonenjegkaller;
document.getElementById('test3').onclick = function(event){Minklasse.funksjonenjegkaller(event)}

</script>

</body>
</html>

Og det ser ut som:

document.getElementById('test3').onclick = function(event){Minklasse.funksjonenjegkaller(event)}

var løsningen. Skjønner faktisk ikke helt hvorfor, leste om "this" her, men trodde det skulle være motsatt.

Takk for all hjelp.

Kimble · 18. november 2007

Dette har jeg også slitt en del med. Fant til slutt en løsning, men jeg er ikke sikker på at det er den mest elegante.

function Klasse() {

 this.foo = 'bar'; 
 var thisRef = this;   // Bruker dette til å få en referanse til this objektet som jeg får tilgang til i onclick hendelsen

 this.domRef = document.getElementById('dom-id');

 this.romRef.onclick = function(event) {
alert("Verdi av this.foo = " + thisRef.foo);
 }


}

Noen som har innspill til denne løsningen? Det må jo være en smartere måte å gjøre det på?

hishadow · 20. november 2007

En annen metode du muligens også kan bruke er følgende.

1. Opprett en hjelpeattributt for elementet som tar imot events. Attributtet eventObject holder på objektet som skal håndtere eventen.

MinKlasse.prototype.minFunksjon = function()
{
  // Oppretter er element som skal ta imot events. 
  this.domElement = document.createElement("div");
  this.domElement.eventObject = this;
  this.domElement.onmouseDown = onMouseDown;
}

MinKlasse.prototype.onMouseDown = function(event)
{
  // Her går all håndtering av eventen.
}

2. Opprette funksjoner for alle brukte events. Disse har ansvaret for å kalle objektet som skal håndtere eventen. Disse funksjonene kan lagres i en egen fil som kan brukes om igjen for andre javascript.

function onMouseDown(event)
{
 // Her legges ved håndtering av event for forskjellige type browsere.
  var mittEvent = event;
  if(mittEvent == null) mittEvent = window.event;

 // Kall objektet som skal håndtere eventen.
 this.eventObject.onMouseDown(mittEvent);
}

Endret 20. november 2007 av hishadow

luxus · 30. november 2007

En annen mulighet kan være å ta i bruk apply() funksjonaliteten til javascript.

Man kan f.eks. ha:

var mittObjekt = function(tekstÅSkriveUt) {
 this.tekstÅSkriveUt = tekstÅSkriveUt;
 this.eventHandler = (function(bindTilObjekt) {
return function() {
  bindTilObjekt.eventHandler.apply(arguments);
};
 })(this);

 addEventhandler(etHTMLElement, "click", this.eventHandler); // Se litt ned for deklarasjon..
};

mittObjekt.prototype.skrivUtTekst() = function() { alert(this.tekstÅSkriveUt) };

mittObjekt.prototype.eventHandler = function(event) { 
 event = event || window.event;

 if ( event.type === "click" ) {
this.skrivUtTekst();
 }
};

addEventhandler:

var addEventHandler = function(node, type, f) {
if ( node.addEventListener ) { // w3c
  node.addEventListener(type, f, false); // false -> event bubbles up
} else if ( node.attachEvent ) { // ie
  node.attachEvent("on"+type, f);
} else { // Dette burde virke på alle, men kan ikke legge på mer enn en event handler pr element
  node["on"+type] = f;
}
 }

Obs! Tar forbehold om at jeg ikke på noen måte har kjørt akkurat denne koden, og at jeg skrev den relativt "på farta" her :-) Men apply() / call() & indre-funksjoner er din venn når man skal leke med scope&this i js

Logg inn

"this" ved bruk av events [løst]

Anbefalte innlegg

magicgunnar

Lenke til kommentar

Videoannonse

LostOblivion

Lenke til kommentar

magicgunnar

Lenke til kommentar

Kimble

Lenke til kommentar

hishadow

Lenke til kommentar

luxus

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer