[js] eventhandler van Tino Zijdel

[xilent_xage]

Hoi,

Ik loop me al weken stuk te bijten op een goeie eventhandler. Hierover is natuurlijk al het nodige geschreven, maar echt duidelijk is het niet, waarschijnlijk vooral omdat dat soort hardcore js me echt boven de pet gaat.

Ik wil wat iedereen wil: events op een nette manier kunnen afhandelen, en geen problemen als je meerdere events aan hetzelfde dingetje toewijst. Unobtrusive, netjes, klein.

Eindelijk dacht ik de oplossing gevonden te hebben: Tino Zijdels onEvent. En inderdaad het werkt fantastisch. Ik heb maar 2 problemen, maar omdat die nou net ff essentieel zijn baal ik als een stekker!

Het lukt me niet om aan de aangeroepen functies argumenten mee te geven. In alle voorbeelden die ik heb gevonden doet ook niemand dit. Is het gewoon niet mogelijk, of kan het op een andere manier? Ik bedoel: Je moet toch op 1 of andere manier kunnen zeggen: onEvent(id, 'Click', functie(arg1, arg2))?

Ik wil deze functie ook kunnen gebruiken om kliks op hyperlinks aan te klikken. Om te voorkomen dat de gebruiker ook echt naar de aangegeven URL (die er wel in moet staan voor als js is uitgeschakeld) geef ik normaal gesproken een return false; dat werkt nu ook niet meer.

Sorrie mensen, ben echt even de weg kwijt nu, kan me niet voorstellen dat dit teveel gevraagd is. Dit moet toch kunnen en bere-eenvoudig zijn???

Heeft iemand hier enig idee? Of een andere goeie eventHandler (maar niet een compleet framework als prototype oid, zo hardcore ben ik dan nog net wel!)

[chem]

Het kan niet, omdat het niet zo hoort. Door middel van scoping dien je gegevens beschikbaar te hebben, of ze dienen opgezocht te worden.

[Millennium]

JavaScript:

function createHandler(arg1, arg2) {
  return function(e) {
     alert('arg1:' +arg1+' arg2:'+arg2);
  }
}

Zo gewoon moeten werken.

[xilent_xage]

@chem: Het voorhanden hebben is ook het probleem niet. Stel je wil bijvoorbeeld dat een onclick een bepaald tekstje neerzet in een bepaalde div, dan is een functie als

code:

function pleurtext( text, id ) {

el = document.getElementById(id);
el.innerHTML = text;

}

addEvent(knopje, 'Click', pleurtext("test, "content'))

toch prima? Ik zou ook een array kunnen gaan bouwen met info welk knopje bij welke text en welk id hoort, of voor ieder knopje een aparte functie maken, maar dat lijkt me toch ook niet netjes? Hoe zou ik dit anders moeten doen?

@Millenium
Ik snap dat een functie op die manier werkt. Echter, jouw functie aanroepen middels addEvent lukt mij dus juist niet.

[crisp]

Dan wrap je het toch in een anonymous function:

JavaScript:

addEvent(knopje, 'click', function() { pleurtext("test", "content"); });

aardige jongen overigens, die Tino Zijdel

[BCC]

Idd crisp. Zo werkt in prototype zo ongeveer alles.

[RobIII]

crisp schreef op zondag 01 juni 2008 @ 21:22:
aardige jongen overigens, die Tino Zijdel

offtopic:
Ik heb 'm anders een keer ontmoet en dat valt best tegen Hij schijnt hier ook op GoT ergens rond te lopen

Een leuk (om te lezen, maar ook leerzaam) artikeltje hierover: http://www.joelonsoftware.com/items/2006/08/01.html

[Millennium]

xilent_xage schreef op zondag 01 juni 2008 @ 21:20:


@Millenium
Ik snap dat een functie op die manier werkt. Echter, jouw functie aanroepen middels addEvent lukt mij dus juist niet.

Verschil is dat ik een function return die gebruikt wordt door Addevent, echter zijn de 2 meegegeven argumenten nu argumenten binnen de scope van de functie. Wat in principe een zelfde soort constructie is als Crisp hierboven neerzet.

[xilent_xage]

@crsip bedankt! werkt inderdaad, al snap ik nog niet helemaal waarom mijn idee niet werkt. Moet ik me nog maar eens in verdiepen...

Iemand enig idee voor mijn tweede probleem? (het returnen van false om te voorkomen dat de gebruiker ook echt naar de aangegeven link gaat?

[Johnny]

Zonder te weten hoe je code er precies uit ziet; is het niet handiger om de parameters als attributen aan het object te hangen wat het event triggert en dan ze via het event target (je object dus) weer uit te lezen?

[Millennium]

xilent_xage schreef op zondag 01 juni 2008 @ 21:36:
Iemand enig idee voor mijn tweede probleem? (het returnen van false om te voorkomen dat de gebruiker ook echt naar de aangegeven link gaat?

JavaScript:

function jouwfunctiediegeweldigedingendoet(e) {
   //jouw code
  
  //deze om default te stoppen
  e.preventDefault = fixEvent.preventDefault;
  //deze om eventuele andere eventhandlers gekoppeld aan dit event te stoppen
  e.stopPropagation = fixEvent.stopPropagation;


}

[ Voor 29% gewijzigd door Millennium op 01-06-2008 22:04 ]

[xilent_xage]

Hoi,

Inmiddels werkt alles prima, bedankt voor alle aangedragen oplossingen. Ik zit echter weer met een nieuw gerelateerd probleempje: Ik krijg het srcElement van het event niet te pakken: Hij geeft 'undefined'. Hier de code die ik gebruik:

code:

addEvent(document.getElementById('test'), 'click', function(e) { alert(e.srcElement.id); } );

Als ik alleen e echo dan geeft ie wel netjes Object MouseEvent. Wat doe ik verkeerd?

[ Voor 0% gewijzigd door xilent_xage op 18-07-2008 11:47 . Reden: typo ]

[crisp]

da's e.target in standards-compliant browsers

[xilent_xage]

jeez, vroeg me al af waarom ik em niet kon vinden in mijn boeken...
soms is Google *NIET* je beste vriend! Bedankt! Werkt!