[JS] eventhandler voor willekeurig element van een class

[Mei]

Ik heb een aantal divs op een pagina die allemaal dezelfde classnaam hebben. Ik wil graag een soort van eventhandler hebben waarbij een functie uitgevoerd wordt zodra één van die elementen gehovered wordt. Ik kan in elke tag een onhover attribuut zetten of ik kan voor elke classnaam een eventhandler hebben, maar aangezien de pagina dynamisch gegenereerd wordt lijkt het mij handiger een algemeen scriptje te hebben die alle events afvangt. Ik heb al lopen zoeken, maar ik heb helaas nog niets gevonden waar ik wat mee kan.

[djluc]

Gewoon alle div's met getElementsByTagName opzoeken en vervolgens indien de classname klopt er automatisch de onmouseover eventhandler aan hangen?

[Mei]

Hmm, ik zit eens even te kijken hoe ik dat ga uitwerken. Ik ben niet zo'n geweldige JS-scripter, maar ik kom er met wat moeite vast wel uit. In ieder geval bedankt voor het schopje in de goede richting

//edit: Is er ook een manier om met document.getElementsByTagName('div')... gelijk de goede classnaam te selecteren of moet ik dan een array doorlopen?

[ Voor 29% gewijzigd door Mei op 25-06-2006 15:44 ]

[XWB]

JavaScript:

document.getElementsByTagName('div').getAttribute('class');

[OnTracK]

@Hacku: getElementsByTagName levert een array. Dus je moet per element de class uitlezen in een loop (en dat kan ook met .className, welke sneller / beter is weet ik niet)

[Mei]

Gaat niet werken. Je selecteert namelijk een groep elementen. De JavaScript Console in FF meldt ook dat het niet klopt. Ik ben bang dat er weinig anders opzit dan sowieso elke div een aparte id te geven en daar vanuit te gaan. Ik moet dan wel even kijken of dat gaan lukken in combinatie met mijn cms.

[XWB]

OnTracK schreef op zondag 25 juni 2006 @ 16:01:
@Hacku: getElementsByTagName levert een array. Dus je moet per element de class uitlezen in een loop (en dat kan ook met .className, welke sneller / beter is weet ik niet)

Weet ik, het ging om het voorbeeld, ik neem aan dat TS er zelf wat van kan maken.

JavaScript:

var elements = document.getElementsByTagName('div');

for (var i = 0; i < elements.length; i++)
{
    alert(elements[i].getAttribute('class'));
}

[Mei]

Ik heb nu dit.

JavaScript:

    function test()
    {
        alert('test');
    }
    var elements = document.getElementsByTagName('div');
    for (var i=0;i<elements.length;i++)
    {
        if(elements[i].getAttribute('class')=='options')
        {
            document.getElementById(elements[i].getAttribute('id')).mouseover=test();
        }
    }

Hij werkt alleen niet goed met mouseover. Zodra ik de pagina laad krijg ik een aantal alerts, maar niet zodra ik over die bepaalde elementen heen ga. Dan gebeurt er namelijk helemaal niets.

[Verwijderd]

Mei schreef op zondag 25 juni 2006 @ 16:32:
Ik heb nu dit.

JavaScript:

            document.getElementById(elements[i].getAttribute('id')).mouseover=test();

waarom doe je getAttribute?

anyway, zoals je nu doet een functie aan een event hangen kan niet lukte mij niet, kun je beter zo doen:

JavaScript:

theElement.mouseover = function() { test(); }

[ Voor 8% gewijzigd door Verwijderd op 25-06-2006 16:56 ]

[djluc]

Een classname crossbrowser gebruiken is handiger zo:
object.className

Verder kan een object meerdere classnames hebben. Je zal dus daarop moeten checken:

JavaScript:

//dit is de eventhandler die aan het element gehangen wordt
function showalert() {
    alert('Deze alert wordt getoont bij een mouseover op een div met class: showalert.');
}

//dit laadt alle divs in een array
var allDivs=document.getElementsByTagName('div');
var i=allDivs.lenght;
while(i--) {
    //dit kijkt of "showalert" voorkomt in de className
    if(/showalert/g.test(allDivs[i].className)) {
        //de controle blijkt waar dus wordt de eventhandler het event gehangen
        allDivs.onmouseover=showalert;
    }
}

[ Voor 59% gewijzigd door djluc op 25-06-2006 16:46 ]

[crisp]

[rml][ handig] getElementsByClassName[/rml]

maar als IE-support je niet boeit en het om een hover-effectje gaat kan je natuurlijk ook dit doen:

Cascading Stylesheet:

div.class:hover {
  background-color: yellow;
}

[Mei]

Verwijderd schreef op zondag 25 juni 2006 @ 16:34:
waarom doe je getAttribute?

Om de ID van het element te achterhalen

djluc schreef op zondag 25 juni 2006 @ 16:41:
Een classname crossbrowser gebruiken is handiger zo:
object.className

Verder kan een object meerdere classnames hebben. Je zal dus daarop moeten checken:

Ik weet zeker dat die elementen maar één classnaam hebben, dus dat komt wel goed

crisp schreef op zondag 25 juni 2006 @ 17:01:
[rml][ handig] getElementsByClassName[/rml]

maar als IE-support je niet boeit en het om een hover-effectje gaat kan je natuurlijk ook dit doen:

Cascading Stylesheet:

div.class:hover {
  background-color: yellow;
}

Bedankt voor dat topic! Ik ga het zo eens goed doornemen. Ik ben benieuwd of ik daar iets van kan gebruiken. Wat ik wil is namelijk erg ingewikkeld. Ik heb dus een aantal elemenen met die class en pas als er eentje gehovered wordt, dan moet er voor dat element iets uitgevoerd worden.

Ik ken :hover (Ik ben juist zeer goed thuis in CSS), maar het gaat niet om een lullig effectje, het moet een menu zichtbaar maken en dat is ook in IE belangrijk.

//edit: In plaats van getAttribute('class') heb ik nu className gebruikt. Dit werkt ook in IE.

[ Voor 4% gewijzigd door Mei op 25-06-2006 18:45 ]

[Mei]

Stomkop die ik ben... Ik gebruikte 'mouseover' in plaats van 'onmouseover' als eventhandler...

Maargoed, ik heb het nu werkende, als ik het scriptje af heb, dan zal ik het wel posten. Bedankt voor de hulp

[ Voor 9% gewijzigd door Mei op 25-06-2006 19:49 ]

[Mei]

En hier de werkende code:

JavaScript:

fade=function()
{
    var elements=document.getElementsByTagName('div');
    for (var i=0;i<elements.length;i++)
    {
        if(elements[i].className=='options')
        {
            elements[i].onmouseover=function()
            {
                this.className+=" optionshover";
            }
            elements[i].onmouseout=function()
            {
                this.className=this.className.replace(new RegExp(" optionshover\\b"), "");
            }
        }
    }
}
if (window.attachEvent) window.attachEvent("onload", fade);

Zoals je misschien ziet lijkt het een beetje op de code voor het Son of Suckerfish menu. Dit klopt, het is een mengsel van de code daarvan, wat code uit dit topic en wat eigen code.

Wat doet het: Hij zoekt eerst alle divs op. Daar plukt hij de elementen met class="options" uit waarop hij een onmouseover en onmouseout eventhandling toepast. De code kan gewoon in de header geplaatst worden, omdat het pas uitgevoerd wordt zodra de pagina klaar met laden is.

Het lijkt misschien een beetje omslachtig om met javascript te doen, maar dit is puur de basis. De code die voor het eigenlijke effect moet zorgen komt er nog bij.

[crisp]

waarom gebruik je daar de RegExp constructor ipv een literal? Nu moet de regexp elke keer opnieuw gecompileerd worden.
Ook je loop kan vele malen efficienter, en ik zou een reference naar een functie opgeven als handler ipv op deze manier anonymous functions genereren voor elk object:

JavaScript:

function fade()
{
    var elements = document.getElementsByTagName('div'), el, i = 0;;
    while ((el = elements[i++]))
    {
        if (el.className == 'options')
        {
            el.onmouseover = options_mouseover;
            el.onmouseout = options_mouseout;
        }
    }
}
function options_mouseover()
{
    this.className += ' optionshover';
}
function options_mouseout()
{
    this.className = this.className.replace(/\boptionshover\b/, '');
}

(zelf gebruik ik een meer genormaliseerde manier om met classes om te gaan; wel wat trager maar imho meer correct: classdealer.js)

last but zeker not least: attachEvent is IE-only (en een eventmodel dat je beter kan mijden).

[HurrI]

Heb je al eens naar de JS library Prototype gekeken? Deze heeft oa de cross browser getElementsByClassName(). Maar daarnaast vele vele erg handige functies die netjes cross browser hetzelfde reageren.

Wat linkjes:

Wiki: http://wiki.script.aculo.us/scriptaculous/show/Prototype
Download: http://prototype.conio.net/

Verdiep je een beetje in en JS'en wordt je tweede taal

edit:

en wat dacht je van:

Element.removeClassName( el, 'optionshover' );

wicked!

[ Voor 13% gewijzigd door HurrI op 25-06-2006 23:33 ]

[crisp]

HurrI schreef op zondag 25 juni 2006 @ 23:26:
Verdiep je een beetje in en JS'en wordt je tweede taal

Je verdiepen in JS en het gebruik van libraries aanraden staat eigenlijk een beetje haaks op elkaar

[Fuzzillogic]

Kijk eens naar Javascript Behaviours. Een behoorlijk geniale oplossing om elegant Javascript aan heel veel nodes te hangen. Hiermee kun je ook eenvoudig een stuk code aan een onmouseover van bepaalde elementen hangen.

[HurrI]

crisp schreef op zondag 25 juni 2006 @ 23:31:
[...]

Je verdiepen in JS en het gebruik van libraries aanraden staat eigenlijk een beetje haaks op elkaar

zal ik gewoon ff happen?

Mn gedachte achter die opmerking was de eenvoud waarmee je complexe taken kan uitvoeren zonder de taal van haver tot gort te kennen zoals jij *lik*lik*

Hoe sta jij tegenover Prototype?

[crisp]

HurrI schreef op zondag 25 juni 2006 @ 23:38:
[...]
Hoe sta jij tegenover Prototype?

De object-notatie vind ik geweldig, maar ik vind dat ze te geforceerd bezig zijn om javascript op Ruby te laten lijken; javascript is geen Ruby, het is geen Perl, het is geen Python of Java - het is javascript en zo zie ik het ook het liefst.
Daarnaast zijn er een groot aantal zaken in Prototype die ik persoonlijk anders zou doen en mogelijk zelfs beter, en als laatste vind ik dat als je de meestgebruikte functie niet eens een goed beschrijvende naam kan geven maar simpelweg $ noemt er toch wel wat mis moet zijn

[Mei]

crisp schreef op zondag 25 juni 2006 @ 23:17:
waarom gebruik je daar de RegExp constructor ipv een literal? Nu moet de regexp elke keer opnieuw gecompileerd worden.
Ook je loop kan vele malen efficienter, en ik zou een reference naar een functie opgeven als handler ipv op deze manier anonymous functions genereren voor elk object:

JavaScript:

function fade()
{
    var elements = document.getElementsByTagName('div'), el, i = 0;;
    while ((el = elements[i++]))
    {
        if (el.className == 'options')
        {
            el.onmouseover = options_mouseover;
            el.onmouseout = options_mouseout;
        }
    }
}
function options_mouseover()
{
    this.className += ' optionshover';
}
function options_mouseout()
{
    this.className = this.className.replace(/\boptionshover\b/, '');
}

(zelf gebruik ik een meer genormaliseerde manier om met classes om te gaan; wel wat trager maar imho meer correct: classdealer.js)

last but zeker not least: attachEvent is IE-only (en een eventmodel dat je beter kan mijden).

Regexp en anonymous functions (wist niet dat het zo heette, weer wat geleerd) heb ik uit de code voor Son of Suckerfish. Zoals aangegeven ben ik absoluut geen JS-expert, ik weet hoe het werkt en ik kan een paar dingetjes, dat is alles. Ik ben dan al blij al het goed werkt, langzaam of niet attachEvent is zeker niet IE only, dit werkt ook in Opera en het heeft volgens mij ook in FF gewerkt. (Nu werkt het ineens niet meer, had gisteren geen tijd meer om daar naar te kijken).

Je hebt nou heel mooi de regel met attachEvent weggehaald, maar nu wordt fade() niet meer aangeroepen

De rest bedankt voor de linkjes, zal daar eens naar gaan kijken.

[djluc]

En zoek nu eens het verschil tussen de code die je nu hebt en de code die ik al eerder gepost heb: [rml]djluc in "[ JS] eventhandler voor willekeurig eleme..."[/rml]

[Mei]

Die code is veel te omslachtig voor wat ik wil, aangezien die elementen toch maar één classnaam hebben.

Na wat knutselen heb ik het volgende gekregen:

JavaScript:

    fade=function()
    {
        var elements=document.getElementsByTagName('div');
        for (var i=0;i<elements.length;i++)
        {
            if(elements[i].className=='options')
            {
                elements[i].onmouseover=fade_in;
                elements[i].onmouseout=fade_out;
            }
        }
    }
    function fade_in()
    {
        this.className+=" optionshover";
    }
    function fade_out()
    {
        this.className=this.className.replace(' optionshover','');
    }
    if(window.attachEvent)
        window.attachEvent("onload",fade);
    if(window.addEventListener!='undefined')
        window.addEventListener('load',fade,false);

De regexp is weg, geen anonymous functions meer en doordat ik zowel attachEvent als addEventListener gebruik, werkt het in FF, Opera en IE.

[crisp]

Alleen Opera zal het nu het load-event 2x uitvoeren

[ Voor 25% gewijzigd door crisp op 26-06-2006 12:59 ]

[Mei]

Hmm, weet het. Wat is beter qua performance, het zo laten of eerst checken of de huidige browser Opera is?

Verder nog op- en aanmerkingen trouwens? Heb al veel geleerd van dit kleine stukje script, kan nog wel wat bij. Ik ga het nog leuk vinden ook

[crisp]

Mei schreef op maandag 26 juni 2006 @ 13:01:
Hmm, weet het. Wat is beter qua performance, het zo laten of eerst checken of de huidige browser Opera is?

Verder nog op- en aanmerkingen trouwens? Heb al veel geleerd van dit kleine stukje script, kan nog wel wat bij. Ik ga het nog leuk vinden ook

Eerst kijken of het w3c-eventmodel ondersteund is en als fallback pas het MS-propriety-model gebruiken:

JavaScript:

if (window.addEventListener)
        window.addEventListener('load',fade,false);
else if (window.attachEvent)
        window.attachEvent("onload",fade);

note dat dit voor een onload handler nog wel kan, maar voor andere events moet je enorm oppassen met dit soort constructies aangezien functioneel de beide eventmodels nogal afwijken...

oh, en oudere browsers waaronder IE/Mac ondersteunen geen van beide eventmodels

[ Voor 6% gewijzigd door crisp op 26-06-2006 13:10 ]

[Mei]

Hey, stom dat ik daar niet op gekomen ben.

IE/Mac kan me trouwens niet veel schelen. Als je dáár rekening mee moet houden blijf je hacken om bugs te omzeilen... En dan nog, support bieden voor antieke browsers gaat mij toch te ver als het niet makkelijk te fiksen is

[Mei]

JavaScript:

    function fade()
    {
        var elements=document.getElementsByTagName('div');
        for(var i=0;i<elements.length;i++)
        {
            if(elements[i].className=='options')
            {
                elements[i].onmouseover=fade_in;
                elements[i].onmouseout=fade_out;
            }
        }
    }
    function loop_in(i,ul)
    {
        i=i+0.1;
        ul.style.opacity=i;
        if(i<=1)
            setTimeout("loop_in("+i+",'"+ul+"')",100);
    }
    function fade_in()
    {
        var i=0;
        var ul=this.getElementsByTagName('ul')[0];
        ul.style.marginLeft='42.5px';
        loop_in(i,ul);
    }
    function fade_out()
    {
        var ul=this.getElementsByTagName('ul')[0];
        ul.style.marginLeft='-999em';
    }
    if(window.addEventListener!='undefined')
        window.addEventListener('load',fade,false);
    else if(window.attachEvent)
        window.attachEvent('onload',fade);

Zoals je ziet staat er een extra functie bij: loop_in(). Dit omdat ik een loop nodig heb, maar er een kleine vertraging tussen moet zitten. Bij een for-loop wordt elke loop te snel afgehandeld.

Ik heb een aantal problemen:
1) Die eventhandlers op deze manier werken nu niet in dIE. Ik heb nog niet geprobeerd het om te draaien oid. Dit is dan ook meer een melding van het probleem dan een verzoek voor een oplossing.
2) Ik krijg bij loop_in() de error dat ul.style geen properties heeft. Ik geef alles volgens mij netjes door, dus ik snap zo niet waarom het niet werkt,
3) Hij zou nu netjes vanaf 0 tot en met 1 moeten tellen in stapjes van 0.1. Hij telt alleen heel raar op:
0.1> 0.2> 0.30000000000000004> 0.4> 0.5> 0.6> 0.7> 0.7999999999999999> 0.8999999999999999> 0.9999999999999999> 1.0999999999999999. Hier snap ik ook niets van. Zowel in Opera als Firefox gaat het op deze manier.

[user109731]

Mei schreef op maandag 26 juni 2006 @ 17:38:
1) Die eventhandlers op deze manier werken nu niet in dIE. Ik heb nog niet geprobeerd het om te draaien oid. Dit is dan ook meer een melding van het probleem dan een verzoek voor een oplossing.

Wat is het nut van '!= undefined'?

2) Ik krijg bij loop_in() de error dat ul.style geen properties heeft. Ik geef alles volgens mij netjes door, dus ik snap zo niet waarom het niet werkt,

Die 'this' weghalen?

3) Hij zou nu netjes vanaf 0 tot en met 1 moeten tellen in stapjes van 0.1. Hij telt alleen heel raar op:
0.1> 0.2> 0.30000000000000004> 0.4> 0.5> 0.6> 0.7> 0.7999999999999999> 0.8999999999999999> 0.9999999999999999> 1.0999999999999999. Hier snap ik ook niets van. Zowel in Opera als Firefox gaat het op deze manier.

Dit heeft te maken met hoe processors omgaan met floating point getallen. Dit is verder geen fout of een bug ofzo. Een oplossing is om het getal af te ronden:

JavaScript:

// round to 1 decimal
i = Math.round(i*10)/10;

[ Voor 35% gewijzigd door user109731 op 26-06-2006 17:57 ]

[crisp]

die != 'undefined' is idd quatsch als je geen typeof opvraagt; maar je kan net zo goed gewoon if (window.addEventListener) { } doen

[Mei]

Die undefined had ik op internet ergens gezien toen ik op zoek was naar een alternatief voor attachEvent. Het werkte toen niet bij mij zonder die vergelijking met undefined om de één of andere reden.

Er staat geen this in loop_in(), ik neem aan dat je die in fade_in() bedoelt? Gaat dan moeilijk worden, aangezien ik niet de eerste ul op de pagina nodig heb, maar de eerste ul in die bepaalde div.

[Clay]

Mei schreef op maandag 26 juni 2006 @ 17:38:

JavaScript:

    
    function loop_in(i,ul)
    {
        i=i+0.1;
        ul.style.opacity=i;
        if(i<=1)
            setTimeout("loop_in("+i+",'"+ul+"')",100);
    }

in de setTimeout plak je ul nu als string in de uit te voeren rits code. Na 100 ms probeert IE dan een referentie te zoeken naar [object], en andere browsers naar [HTMLUListElement], en dat is niks Als je de ul door wil geven zal je de referentie ernaar ergens op moeten slaan, b.v. met globale array's en counters (oldskool) of door een closure in de timeout te gooien ipv een string, bv:

JavaScript:

setTimeout(function(){ loop_in(i, ul); }, 100);

Maar erg elegant is dat allemaal niet.

Submenutjes openklappen kan trouwens best met :hover, dat moet je in IE dan gewoon ff aanzetten

[Mei]

Mei schreef op zondag 25 juni 2006 @ 20:12:
Het lijkt misschien een beetje omslachtig om met javascript te doen, maar dit is puur de basis. De code die voor het eigenlijke effect moet zorgen komt er nog bij.

Ik snap ook dat je met :hover een menuutje kan laten uitklappen, dat was ook het eerste dat ik gemaakt had Met pure CSS klapt alles netjes uit en werkt het in Opera en Firefox. De javascript om het in IE te laten uitklappen heb ik ook netjes gemaakt. Nu ben ik alleen bezig om te zorgen dat het menu snel in- en uitfadet.

//edit:

Clay schreef op maandag 26 juni 2006 @ 20:04:

JavaScript:

setTimeout(function(){ loop_in(i, ul); }, 100);

Dit werkt als een zonnetje! Bedankt Wat is trouwens het wezelijke verschil tussen jouw timeout en de mijne?

[ Voor 20% gewijzigd door Mei op 26-06-2006 20:24 ]

[Clay]

Je kan 2 dingen in een timeout of interval uitvoeren, een string, of een functie referentie danwel closure. Op de eerste manier kan je alleen strings en ints etc meegeven, en wordt er een soort eval() gedaan daarvan. Een referentie kan niet bijster veel meer, en een closure bevat alle variabelen die op dat moment in de scope zitten. Een simpele referentie zou er zo uit kunnen zien:

JavaScript:

var message = "hello world";
setTimeout(someReference, 1000);
function someReference() {
   alert(message);
}

In dit geval is alles globaal gescoped, en kent someReference de message variabele. Nou kan je someReference ook inline als anonieme functie schrijven, en variabelen daarbinnen gebruiken die in de scope bij de setTimeout bekend zijn:

JavaScript:

window.onload = function() {
   var message = "hello world";
   setTimeout(function(){ // anonymous closure
      someReference(message); // iets aanroepen
   }, 1000);
}

function someReference(msg) {
   // alert(message); nu niet meer in scope
   alert(msg);
}

SomeReference kent message nou niet meer, maar omdat die in de scope van de closure bekend was kon die hem doorsturen, net als jouw ul net dus. Nou blinkt dit codematig uit in nutteloosheid maar ik hoop dat het het idee iig wat verduidelijkt. Hier heb ik overigens ook een keer een deel van een toturial aan besteedt, mocht je wat meer over JS willen lezen in het Nederlands.

[ Voor 6% gewijzigd door Clay op 27-06-2006 08:57 ]

[Mei]

Nou is het duidelijk, hartstikke bedankt!

Het werkt nog steeds niet helemaal soepel, maar de basis is er, nu het finetunen nog.

[Mei]

Ik heb nu de volgende code:

JavaScript:

    function fade()
    {
        var elements=document.getElementsByTagName('div');
        for(var i=0;i<elements.length;i++)
        {
            if(elements[i].className=='options')
            {
                elements[i].onmouseover=fade_in;
                //elements[i].onmouseout=fade_out;
            }
        }
    }

En ik kwam erachter dat het infaden niet soepel gaat. Dit script hoort bij de volgende html code:

HTML:

    <div class="options">
        options
        <ul>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li><a href="#">6</a></li>
            <li><a href="#">7</a></li>
            <li><a href="#">8</a></li>
        </ul>
    </div>

De lijst is in eerste instantie verborgen. Zodra je de tekst 'options' hovered komt deze tevoorschijn. Het probleem is dat als ik binnen de lijst met de muis beweeg, dat wil zeggen van de ene link naar de andere, dan fadet hij telkens opnieuw in. Ik had al het idee om in de functie fade_in te checken of de <a>'s niet toevallig al gehovered worden, maar elegant is dat niet.

[user109731]

Het probleem is denk ik dat zodra je op een list-item klikt, dit event omhoog bubbelt, zodat idd telkens je functie aangeroepen word. Je kunt in je eventhandler naar 'this.tagName' kijken om te zien wat voor element het event oorspronkelijk veroorzaakte.

Dus zoiets:

JavaScript:

if (this.tagName != 'DIV') return;

[Mei]

Het is telkens de <div> die ervoor zorgt dat fade_in aangeroepen wordt, ook al hover je eerst de ene <li> en daarna de andere <li> binnen de <ul>.

[Verwijderd]

Mei schreef op maandag 26 juni 2006 @ 12:36:

JavaScript:

    if(window.attachEvent)
        window.attachEvent("onload",fade);
    if(window.addEventListener!='undefined')
        window.addEventListener('load',fade,false);

JavaScript:

function addEvent(obj, eventType, afunction, isCapture)
{ // W3C DOM
  if (obj.addEventListener)
  { obj.addEventListener(eventType, afunction, isCapture);
    return true;
  }
  else
  { // Internet Explorer
    if (obj.attachEvent)
    { return obj.attachEvent("on"+eventType, afunction);
    }
    else
    { return false;
    }
  }
}

addEvent(window, 'load', fade, false)

[crisp]

Verwijderd schreef op dinsdag 27 juni 2006 @ 22:30:
[...]

JavaScript:

*oude addEvent code*

Da's een hele oude bekende, maar zoals ik al eerder zei: pas erg op met dergelijke functies die ervan uitgaan dat attachEvent en addEventListener functioneel hetzelfde zijn; dat zijn ze niet!
Vroeg of laat loop je tegen problemen aan veroorzaakt door verschillen in o.a. de scope waarin de handler wordt uitgevoerd.

Leesvoer: http://www.quirksmode.org...5/08/addevent_consid.html
http://dean.edwards.name/weblog/2005/10/add-event2/
http://therealcrisp.xs4all.nl/upload/addEvent_dean.html

[Mei]

Verwijderd schreef op dinsdag 27 juni 2006 @ 22:30:
[...]

JavaScript:

code

Wat is het nut daarvan? Ik moet één event handlen en mijn code is dan nog kleiner dan die van jou.