[JS/DOM] Toekennen van eventhandler met argumenten

[drm]

't Is weer eens DHTML W&G topic tijd

Ik zit met het volgende probleem: Ik heb een scriptje in elkaar geflanst waarmee ik op basis van DOM (naar aanleiding van een tipje van Pelle ) de mouseovers van plaatjes definieer.

Je ziet een voorbeeldje van het probleem hier.

De alert vindt plaats in de eventhandler. Maar zoals je ziet is de waarde van 'i' de laatste waarde die 'i' had in de functie loadHovers (). Kortom: bij het vastleggen van de eventhandler, wordt de 'i' uit de eventhandler-body niet ge-dereferenced.

Hoe los ik dat op Ik heb zitten klooien met eval en parseInt () en met een wrapper die een functie teruggeeft, maar bij alle dingen die ik geprobeerd heb loop ik tegen hetzelfde probleem aan

Weet iemand iets?


_{Ik kwam in de search dit topic tegen, maar de oplossing om met event-properties te gaan werken i.c.m. 'this' (ja dan kom je er ook wel) vind ik eigenlijk maar een plakband oplossing. Voor hetzelfde geld kom ik nog eens een probleem tegen waarbij ik wel honderd argumenten aan een functie mee wil geven, ipv alleen een index en een mouseover ja/nee}

edit:

Oh ja, niet boos worden als ik je icon ff "geleend" heb

[ Voor 3% gewijzigd door drm op 18-06-2003 11:50 ]

[Pelle]

* Pelle doet het dus met 2 losse functies, maar drm wil het op de nette manier doen

Java:

    // snip

    arrImages.item(i).onmouseover = doImageRollOver;
    arrImages.item(i).onmouseout  = doImageRollOut;

    // snip

    function doImageRollOver() {
        this.src = this.getAttribute("rollover");
    }

    function doImageRollOut() {
        this.src = this.getAttribute("rollout");
    }

Ik had het zelf ook eerst met attachEvent willen doen, maar daarmee kreeg ik ook niet voor elkaar wat drm hier probeert te doen. En dus maar even zo, op de ranzige manier

[deviltje]

Ik zou persoonlijk een event meegeven
function(event){ hover(event,true);}

en dan uit het event halen om welk plaatje het gaat en dan kan je dus ook meteen de src en de hover uitlezen hoef je dat van te voren niet meer te doen.

[drm]

deviltje:
Ik zou persoonlijk een event meegeven
function(event){ hover(event,true);}

en dan uit het event halen om welk plaatje het gaat en dan kan je dus ook meteen de src en de hover uitlezen hoef je dat van te voren niet meer te doen.

Ook daar heb ik aan gedacht (jawel ), maar het probleem is daarmee niet per definitie opgelost. Ik wil namelijk niet in de toekomst weer voor hetzelfde probleem staan als ik de informatie niet anders dan via een argument aan de eventhandler mee kan geven

[Clay]

Beetje vreemd dat het niet gewoon werkt. Variabelen die je zo doorgeeft zouden gewoon behouden moeten blijven, ik gebruik dat principe ook vaker, en dat werkt pirma. Misschien dat het wat me die loop van doen heeft, maar 't is gewoon een int, geen object waar naar verwezen wordt oid.
Wat ook vreemd is is als je boven het ifje een var j = i doet, en in de hover dan een j meegeeft, dat de alert 1 zegt ipv 2. Dus er is wel iets mee.

Of het je helpt weet ik niet, maar laatst was er op dhtmlcentral ook een leuk topic over events. Let vooral op de post van ttrenka, da's best een hip systeem (al kost het wel ff tijd om te doorgronden).

[drm]

Clay:
Beetje vreemd dat het niet gewoon werkt. Variabelen die je zo doorgeeft zouden gewoon behouden moeten blijven, ik gebruik dat principe ook vaker, en dat werkt pirma. Misschien dat het wat me die loop van doen heeft, maar 't is gewoon een int, geen object waar naar verwezen wordt oid.
Wat ook vreemd is is als je boven het ifje een var j = i doet, en in de hover dan een j meegeeft, dat de alert 1 zegt ipv 2. Dus er is wel iets mee.

Ik denk dat dat komt omdat de body van de function gedefinieerd is binnen de functie loadHovers. Op de een of andere manier wordt die scope dus behouden voor de functions die in die scope gedefinieerd zijn.

Of het je helpt weet ik niet, maar laatst was er op dhtmlcentral ook een leuk topic over events. Let vooral op de post van ttrenka, da's best een hip systeem (al kost het wel ff tijd om te doorgronden).

Ik zal eens gaan kijken

[2]

Ik zat hier laatst ook mee te klooien, dit is wat ik erop gevonden heb:

code:

<html>
  <head>
    <script>
      function hopsa()
      {
        var msg = "kaasbal!";
        if(document.all)
        {
          document.getElementById('eppo').attachEvent("onclick",  new Function("alert('" + msg + "')"));
        }
        else
        {
          document.getElementById('eppo').addEventListener("click", new Function("alert('" + msg + "')") , false);
        }
      }
    </script>
  </head>
  <body onload="hopsa();">
    [img]"http://www.tweakers.net/g/trueserver.gif"[/img]
  </body>
</html>

[McVirusS]

2 schreef op 18 June 2003 @ 13:22:
Ik zat hier laatst ook mee te klooien, dit is wat ik erop gevonden heb:

code:

[..]

Deze oplossing gebruikt hij al min of meer maar dat werkt dus niet (bekijk z'n voorbeeld maar eens goed ).

[drm]

McVirusS:
Deze oplossing gebruikt hij al min of meer maar dat werkt dus niet (bekijk z'n voorbeeld maar eens goed ).

Het werkt wel

En dat komt omdat de waarde van 'i' geëvalueerd wordt zodra je hem bij een string optelt, wat resulteert in (bijvoorbeeld) de volgende body van de functie:

JavaScript:

function anonymous() {
hover(0, true);
}

en in het andere geval:

JavaScript:

function () { hover ( i, true ); }

Het is dus een oplossing die prima werkt, maar echt netjes vind ik 't niet. Maar dan ben ik natuurlijk een zeikerd

[ Voor 3% gewijzigd door drm op 18-06-2003 13:54 ]

[McVirusS]

Nee het werkt niet zoals jij het wilt toch anders had je deze topic niet geopent .

[drm]

McVirusS:
Nee het werkt niet zoals jij het wilt toch anders had je deze topic niet geopent .

2's oplossing werkt wel

edit:

ik zal beide versies even online zetten, dat verduidelijkt 't misschien

edit:

De niet werkende versie met ... = function () { .., i .. }
De wel werkende versie met ... = new Function ( ".." + i + ".." )

Het enige nadeel is dat dat natuurlijk alleen werkt wanneer je met strings of naar strings te casten typen werkt...

[ Voor 62% gewijzigd door drm op 18-06-2003 14:08 ]

[André]

Even tussendoor, is images geen gereserveerd woord in js: document.images is toch een array met alle images. Volgens mij kun je die variabele beter veranderen in iets anders.

[drm]

André:
Even tussendoor, is images geen gereserveerd woord in js: document.images is toch een array met alle images. Volgens mij kun je die variabele beter veranderen in iets anders.

dat zou alleen problemen opleveren als 'images' een property van 'window' zou zijn. Dat is niet zo, dus zie ik ook niet in waarom dit verwarring op zou leveren

[McVirusS]

Ook een mogelijke oplossing, niet de meest mooie maar het werkt wel .

http://mcviruss.nl/got/drmrollover.html

Blijft alleen vaag dat je eerste voorbeeld niet werkte.

[Verwijderd]

Als je het netjes wilt doen, moet je er in ieder geval niet zelf wat attributen bij gaan bedenken.
En je moet al helemaal niet het lef hebben om er dan ook nog eens mijn icon voor te gebruiken.

[drm]

Cheatah:
Als je het netjes wilt doen, moet je er in ieder geval niet zelf wat attributen bij gaan bedenken.

Het gaat niet zo zeer om het idee van die rollovers. Ik vind dat vooral handig, niet per se netjes Je gaat nou voorbij aan het probleem wat ik heb

edit:
En dan nog: ik kan het ook in bestaande attributen zetten hoor In een title bijvoorbeeld, waarbij ik in hetzelfde scriptje de title vervolgens weer overschrijf met de alt attribute

En je moet al helemaal niet het lef hebben om er dan ook nog eens mijn icon voor te gebruiken.

Da's Pelle's schuld

[ Voor 19% gewijzigd door drm op 18-06-2003 14:16 ]

[BtM909]

drm schreef op 18 June 2003 @ 14:00:
[...]
2's oplossing werkt wel
...

Het enige nadeel is dat dat natuurlijk alleen werkt wanneer je met strings of naar strings te casten typen werkt...

Toch raar dat die 'i' geëvalueerd word in het eerste voorbeeld.

_{Valt me trouwens op dat de mod(s) / parsers weer druk bezig zijn in het topic. Wordt toch geen mod-fight hè?}

[ Voor 3% gewijzigd door BtM909 op 18-06-2003 14:18 ]

[drm]

Zo, speciaal voor Cheatah de attributen-neukert :+
_{en begin nou niet over semantiek, ja!}

---

BtM909:
Toch raar dat die 'i' geëvalueerd word in het eerste voorbeeld.

Ik vind het opzich wel verklaarbaar, en ook nog wel logisch, maar het is vooral vervelend

_{Valt me trouwens op dat de mod(s) / parsers weer druk bezig zijn in het topic. Wordt toch geen mod-fight hè?}

Tuurlijk wel

[oh,when?]

Clay schreef op 18 juni 2003 @ 12:09:
Of het je helpt weet ik niet, maar laatst was er op dhtmlcentral ook een leuk topic over events. Let vooral op de post van ttrenka, da's best een hip systeem (al kost het wel ff tijd om te doorgronden).

Die post daar is gewoon een standaard Event Engine met daarnaast een wrapper die de built-in events hijacked. Het grote verschil is dat je ipv een global event engine, ieder object zijn eigen mini-event engine meegeeft..het grote voordeel is dat je altijd in de scope van dat object uitvoert, en die logica niet hoeft in te bouwen in je global event engine. Dat is juist wat vaak de moeilijkheid geeft, ook qua crossbrowser scripting.

/edit als ik nu al de tijd had genomen voor mijn mooie post met de titel "DHTML is dood" dan had ik daar nu mooi naar kunnen refereren. Had ik ook gelijk kunnen opmerken hoe essentieel dit nu is, en waarom andere technologieen toch superieur ( * kuch flash mx.... ) zijn als het net een stapje verder gaat...

[ Voor 17% gewijzigd door oh,when? op 18-06-2003 14:26 ]

[André]

oh,when? schreef op 18 juni 2003 @ 14:21:
/edit als ik nu al de tijd had genomen voor mijn mooie post met de titel "DHTML is dood" dan had ik daar nu mooi naar kunnen refereren. Had ik ook gelijk kunnen opmerken hoe essentieel dit nu is, en waarom andere technologieen toch superieur ( * kuch flash mx.... ) zijn als het net een stapje verder gaat...

-1 Troll

Daar heb je misschien wel gelijk aan, maar voordat je met flash je complete site gaat maken....

[Clay]

oh,when? schreef op 18 June 2003 @ 14:21:
[...]

/edit als ik nu al de tijd had genomen voor mijn mooie post met de titel "DHTML is dood" dan had ik daar nu mooi naar kunnen refereren. Had ik ook gelijk kunnen opmerken hoe essentieel dit nu is, en waarom andere technologieen toch superieur ( * kuch flash mx.... ) zijn als het net een stapje verder gaat...

Neem die tijd dan ff en open zo'n topic Ik ben het er bij voorbaat al niet mee eens, dus er zal best een leuke discussie uit komen

André schreef op 18 June 2003 @ 14:30:
[...]
Daar heb je misschien wel gelijk aan, maar voordat je met flash je complete site gaat maken....

Kan best. De techniek zelf is niet goed of fout. Hoe je inzet maakt het goed of fout. Je kan prima een hele site in flash bouwen.

[drm]

Nu we toch flash er bij halen, treedt een dergelijk probleem ook in actionscript op als je met function-pointers werkt?
_{definieren in een (local) function scope en aanroepen vanuit een global scope}

[Verwijderd]

Ik heb even nagedacht over waarom ik dit uberhaupt al een raar systeem vind... want dat is het, imho

Als je wel de url van het te veranderen plaatje meegeeft via een attribuut, waarom dan ook niet de id van het plaatje, of iets anders waarmee je het plaatje ook kunt identificeren?

Waarom niet gewoon een referentie naar this? Want dat is dus juist het grote voordeel als je een functie direct aan een object koppelt, in plaats van om het mee te geven via een attribuut.

[drm]

Cheatah:
Waarom niet gewoon een referentie naar this? Want dat is dus juist het grote voordeel als je een functie direct aan een object koppelt, in plaats van om het mee te geven via een attribuut.

Dat is inderdaad het probleem, die referentie bestaat niet als je attachEvent gebruikt.

[Verwijderd]

En wat is er dan mis met onmouseover = function?

[drm]

Cheatah:
En wat is er dan mis met onmouseover = function?

Dan kom je met het probleem dat je moet kiezen tussen
• gebruik maken van this
• gebruik maken van argumenten
ze kunnen namelijk niet naast elkaar bestaan, of ik zie een manier over het hoofd, dat kan natuurlijk...

maar dan ben je dus weer terug bij af

[Clay]

'k zie geen scope of argumenten problemen eigenlijk. Zowel met attachEvent als met ondinges = pointer. Je kan het element o.a. vertellen welk object bij hem hoort, of scope behoud gebruiken, ala:

JavaScript:

// in object scope
div.obj = this;

// en dan
div.onmouseover = function() {
    this.obj == object van daarnet
}

// of
var self = this;
div.onmouseover = function() {
   self == object van net
}

// idem voor attachevent

Wat je echt wil voorkomen is dat je massa's globale object pointers moet gebruiken om je events te kunnen sturen, het gebruik van "this" hoef je echt niet te schuwen. En het kan op tig manieren eigenlijk.

Misschien zou je je ook af moeten vragen of je wel argumenten mee wil sturen. Een button met een hover bijvoorbeeld kan zijn kleuren via argumenten krijgen, maar het is imo net zo logisch dat hij die kleuren als properties van zichzelf kent, en de onmousover en out alleen maar 1 functie hoeft te zijn die true of false vangt. In die context zijn button kleuren als argumenten object data buiten dat object, en dat klopt ergens niet.

De for loop kan trouwens wel zo:

HTML:

<html>
    <head>
    <title> Project </title>
    
    <style type="text/css">
    div {
        margin:5px;
        padding:10px;
        background:#f0f0f0;
        color:gray;
    }
    </style>

    <script type="text/javascript" src="scripts/global.js"></script>
    <script type="text/javascript">

    window.onload = function() {
        function setEvents(div, arg) {
            div.onmouseover = function() {
                this.innerHTML = 'hoi ' + (arg + 1);
            }

            div.onmouseout = function() {
                this.innerHTML = 'hoi'
            }
        }

        for(var i=0; i<3; i++) {
            var div = document.getElementById('test' + (i + 1));
            setEvents(div, i);
        }
    }

    </script>

</head>

<body>
    <div id="test1">hoi</div>
    <div id="test2">hoi</div>
    <div id="test3">hoi</div>
</body>
</html>

Hij onthoudt blijkbaar de laatste waarde van i, en zo omzeil je dat een soort van.