webForumDet fria alternativet

Event handlers i objektbaserad kod...

6 svar · 275 visningar · startad av nitro2k01

nitro2k01Medlem sedan aug. 20039 342 inlägg
#1

Jag försöker så långt som möjligt använda javascript's objektbaserade möjligheter. Dock har jag stött på ett problem: Jag lägger till en "event handler" för en div, där funktionen är definierad i objektets prototyp. När denna funktion kallas från sitt "event", här att klicka på "hej", så förväntar jag mig att kunna använda "this" för att komma åt objektets egenskaper. Men istället är "this" en referens till "hej". Något förslag hur man ska göra? (Om man antar att funktionen "klicka" kan kallas från ett godtyckligt skapat objekt, som kanske tom är registrerat för samma HTML-element)

Koden fungerar fö inte i IE, iaf inte version 5.5.

<script>
function TestObjekt(divNamn){
	document.getElementById(divNamn).addEventListener("click", this.klicka, false)
}

TestObjekt.prototype.klicka = function (){
	alert("Test")
	/* Här är "this" inte en referens till objektet utan till 
	   behållaren "hej" */
}

</script>
<script>
function laddaSida(){
	obj = new TestObjekt("hej")
}

document.addEventListener("load", laddaSida, false)

</script>

<div id="hej">
Hej
</div>
JojoxxMedlem sedan juni 20004 308 inlägg
#2

Det är väl egentligen fullt riktigt att resultatet blir som det blir. Du lägger till ett event för ett element och då borde this syfta på elementet. Men du kanske skulle kunna göra så här (har IE-anpassat exemplet lite).

<script type="text/javascript">
function TestObjekt(divNamn){
	document.getElementById(divNamn).setAttribute("onclick",this.klicka);
	document.getElementById(divNamn).setAttribute("foobar",this);
	this.egenskap="Blåbär";
}
TestObjekt.prototype.klicka = function (){
	alert(this.foobar.egenskap);
}
</script>
<script type="text/javascript">
function laddaSida(){
	var obj = new TestObjekt("hej")
}
window.onload=function(){ laddaSida(); }
</script>

<div id="hej">
Hej
</div>

Här sparar vi alltså undan objekt-referensen i foobar. Visst är objekt underbart? :)

nitro2k01Medlem sedan aug. 20039 342 inlägg
#3

Jo självklart, det är så jag gör nu, men jag vill undvika sådana genvägar. Exemplet du skrev funkar jättebra, men i de mer avancerade projekt jag håller på med ställer det till problem att göra så.

Min egentliga fråga var alltså om det finns något som fungerar som jag förväntade mig att this skulle göra i detta fall.

JojoxxMedlem sedan juni 20004 308 inlägg
#4

Du kan ju skriva en egen standard. Då kommer du kanske att få det som du förväntar dig :D Nejdå, men som jag sa så är det ju rättså logiskt att resultatet blir som det blir - det är inget fel. this ska peka på elementet, inte ditt objektet. Skall du ha en pekare på objektet får du spara undan den själv. ...och det borde väl inte vara något problem, eller?

nitro2k01Medlem sedan aug. 20039 342 inlägg
#5

Jo faktiskt.

Event handlern blir kallad och vet inte till vilket objekt den hör. Att spara en pekare till objektet kräver ju även det en pekare, men event handlern, vet ju alltså ingenting... Bara vilken kontroll den kommer från, och om flera objekt är registrerade till samma event och kontroll kan de ju inte veta...
Jag tänker att det borde finnas något enkelt sätt, som this fast något annat. Men troligen gör det inte det, då hade jag väl känt till det redan... :l

JojoxxMedlem sedan juni 20004 308 inlägg
#6

Titta på följande exempel:

<script type="text/javascript">
function TestObjekt(divNamn){
	document.getElementById(divNamn).setAttribute("onclick",this.klicka);
	document.getElementById(divNamn).setAttribute("foobar",this);
	this.egenskap="Blåbär"+divNamn;
	this.element=document.getElementById(divNamn)
}
TestObjekt.prototype.klicka = function (){
	alert(this.foobar.egenskap);
}
</script>
<script type="text/javascript">
function laddaSida(){
	var obj = new TestObjekt("hej")
	alert(obj.egenskap);
	var anotherobj = new TestObjekt("hello")
	alert(anotherobj.egenskap);
}
window.onload=function(){ laddaSida(); }
</script>

<div id="hej" onmouseover="alert('Egenskap: '+this.foobar.egenskap);" onmouseout="alert('Element-id enligt TestObjekt: '+this.foobar.element.id);">
Hej
</div>

<div id="hello" onmouseover="alert('Egenskap: '+this.foobar.egenskap);" onmouseout="alert('Element-id enligt TestObjekt: '+this.foobar.element.id);">
Hello
</div>

2 element (hej och hello) som både får varsitt event tilldelat med samma funktion. Från elementet kan du via this.foobar komma åt TestObjekt där egenskapen "egenskap" har unika värden beroende på element.

Du kan ju labba fram och tillbaks hur som hellst.

nitro2k01Medlem sedan aug. 20039 342 inlägg
#7

Jo jo jojoxx, det är bra och rätt det du skriver, men du missar punkten. Det jag vill göra är att komma åt objektet utan att referera till DIV-en. Dels därför att mitt problem är att flera objekt skapade från SAMMA konstruktor ska kunna vara kopplade till SAMMA DIV.
Dels därför att funktionen ju på något sätt måste kunna referera till sitt eget objekt. Det är en sån situation att man tänker "Det bara måste ju gå på något sätt...". Och såna där omvägar kan jag lista ut på egen hand, det var ju inte det som min fråga var...
Sorry jojoxx, inget illa menat, men du träffar fel...

138 ms totalt · 3 externa anrop · v20260731065814-full.fb544a5a
0 ms — hämta forumlista (cache)
0 ms — hämta statistik (cache)
135 ms — hämta tråd, inlägg och bilagor (db)