[JS] Het element met een event in Mozilla, hoe? - Softwareontwikkeling

dinsdag 29 januari 2002 01:06

Acties:

Verwijderd

Topicstarter

Eerst even wat code:

code:

function doRainbow()
{
     if (document.all) {obj=event.srcElement}
       else {obj=event.target};
       TimerID = setInterval("obj.style.color = makeColor();",100);
}

x=document.getElementsByTagName("a");
i=0;
while(i < x.length) {  
addEvent(x[i],"mouseover",doRainbow,true); 
addEvent(x[i],"mouseout",stopRainbow,true); 
i++;

}

IE luistert er wel naar met zijn event.srcElement, maar ik krijg Mozilla maar niet aan de gang.
Hoe krijg ik voor elkaar dat Mozilla ook weet wat het actieve element is (het element dat een event heeft ondergaan)?

dinsdag 29 januari 2002 01:33

Acties:

Annie

amateur megalomaan

Wordt bij netscape het event niet meegestuurd met de functie? dus:

code:

function doRainbow(e)
{
  if (document.all) obj = event.srcElement;
  else obj = e.target;
  // ...
}

btw. wat is addEvent voor iets? Eigen x-browser-brouwsel? Of wordt het tijd dat ik weer de DOM induik om bij te leren?

Today's subliminal thought is:

dinsdag 29 januari 2002 02:07

Acties:

Verwijderd

Topicstarter

Eigen x-browser-brouwsel van iemand anders (Scott Andrew):

Bedankt voor de tip, maar die werkt (en volgens mij zou dat wel moeten werken, maar ja);

Hij geeft:
error line 60: obj.style has no properties

Moet ik anders de hele code geven?

dinsdag 29 januari 2002 09:53

Acties:

crisp

Devver

Pixelated

Zoeken met Google levert misschien wel wat links met informatie en voorbeelden op. Ik kan helaas zelf hier niets uitproberen omdat ik hier alleen de beschikking heb over IE5.0.
Dit:

code:

x=document.getElementsByTagName("a");
i=0;
while(i < x.length) {  
addEvent(x[i],"mouseover",doRainbow,true); 
addEvent(x[i],"mouseout",stopRainbow,true); 
i++;

}

Lijkt echter niet te werken onder IE5.0 - x blijft undefined terwijl ik toch de volgende links mijn HTML heb staan:

code:

1 2	<a id="linkje1" href="blaat.html">Dit is een link</a> <a id="linkje2" href="blaat.html">En dit ook</a>

Intentionally left blank

dinsdag 29 januari 2002 10:22

Acties:

Verwijderd

/me roept Claaaaayyyyyyy

dinsdag 29 januari 2002 10:52

Acties:

Verwijderd

code:

1 2	x[i].addEventListener("mouseover",doRainbow,true); x[i].addEventListener("mouseout",stopRainbox,true);

is misschien wat je zoekt.

dinsdag 29 januari 2002 11:49

Acties:

Verwijderd

Topicstarter

Om misverstanden te voorkomen, hier de (bijna) volledige code:

code:

<script>
function addEvent(elm, evType, fn, useCapture)
{  if (elm.addEventListener){
    elm.addEventListener(evType, fn, useCapture);
    return true;
  } else if (elm.attachEvent){
    var r = elm.attachEvent("on"+evType, fn);
    return r;
  } else {
    alert("Handler could not be made");
  }
} 

function removeEvent(elm, evType, fn, useCapture)
{
  if (elm.removeEventListener){
    elm.removeEventListener(evType, fn, useCapture);
    return true;
  } else if (elm.detachEvent){
    var r = elm.detachEvent("on"+evType, fn);
    return r;
  } else {
    alert("Handler could not be removed");
  }
}

function ie_getElementsByTagName(str) {
 if (str=="*")
  return document.all
 else
  return document.all.tags(str)
}

if (document.all)
 document.getElementsByTagName = ie_getElementsByTagName
 
var rate = 20;   
var elmH = 0;   // Hue
var elmS = 128; // Saturation
var elmV = 255; // Value
var clrOrg;     // A color before the change
var TimerID;    // Timer ID

function doRainbow(e)
{   if (document.all) {obj=event.srcElement}
      else {obj=e.target};
     TimerID = setInterval("obj.style.color = makeColor();",100);}

function stopRainbow()
{obj=event.srcElement;
obj.style.color = "#330077";
      clearInterval(TimerID);}
function ChangeColor(obj)
{   obj.style.color = makeColor();}

function makeColor()
{alert("hier staat normaal wat anders");
}
</script>
</head>
<body>
<a id="trest" name="trest" href="test.htm">testdetest</a>
<a href="test.htm">testdetest</a>
<script>
x=document.getElementsByTagName("a");
i=0;
while(i < x.length) {  
addEvent(x[i],"mouseover",doRainbow,true); 
addEvent(x[i],"mouseout",stopRainbow,true); 
i++;}
</script></body></html>

getElementsByTagName werkt dan in dit geval ook in ie5
Maar zoals gezeg in Mozilla, lukt het niet, met event.target of e.target of wat dan ook wat ik kan verzinnen (wat niet veel is).

dinsdag 29 januari 2002 11:54

Acties:

crisp

Devver

Pixelated

Ik dacht ergens iets gezien te hebben van e.target.id
Probeer gewoon eens wat voorbeelden te zoeken met Google en probeer een en ander uit.

Intentionally left blank

dinsdag 29 januari 2002 12:04

Acties:

Annie

amateur megalomaan

Even vraagje tussendoor.
Gaat onderstaande uberhaupt wel werken (aangezien op het moment van evalueren van de interval obj niet meer bekend is):

code:

1	TimerID = setInterval("obj.style.color = makeColor();",100);

Dat zou namelijk een verklaring zijn voor dit

Op dinsdag 29 januari 2002 02:07 schreef Martijn22 het volgende:
Hij geeft:
error line 60: obj.style has no properties

Today's subliminal thought is:

dinsdag 29 januari 2002 12:58

Acties:

Verwijderd

Het zou kunnen werken omdat obj als global variable wordt gedeclareerd.

dinsdag 29 januari 2002 18:04

Acties:

Verwijderd

Topicstarter

Nou ik heb het voor elkaar gekregen met:
e.target.parentNode
Kennelijk is het dan wel een object de goed properties,
wat e.target dan is mag joost weten.

Bedankt iig allemaal. Ik ben toch wel op de goed weg geholpen door jullie.
Het is een soort alternatief voor dat rainbow-script-geval op dynamicdrive, Je hebt er niets aan, maar het was leuk om aan te werken.

Er is nog iets wat ik niet snap bij die Mozilla. Dat ik die functie-variabele e moet maken om e.target.parentNode te kunnen gebruiken, terwijl als ik de functie aanroep helemaal geen waarde invul in die functie. Beetje vaag hoor.

Mwaah, moet ik maar eens opzoeken hoe dat nou weer zit.
Annie heeft het al een beetje uitgelegd in zijn eerste reactie, geloof ik.

dinsdag 29 januari 2002 19:17

Acties:

Clay

cookie erbij?

Die e is gewoon het event object wat je in de functie binnenkrijgt oid. Je plakt je functie als handler aan de document.mouse[move/down/up], en in Netscape 4 en mozilla geeft dat die e mee. je kan het ook anders noemen als je wil.
In ie is dat ding "event", die zal wel globaal zijn dan.

Instagram | Flickr | "Let my music become battle cries" - Frédéric Chopin

woensdag 30 januari 2002 01:28

Acties:

Annie

amateur megalomaan

Op dinsdag 29 januari 2002 12:58 schreef Blues het volgende:
Het zou kunnen werken omdat obj als global variable wordt gedeclareerd.

hmmz, niet goed opgelet dus

Op dinsdag 29 januari 2002 19:17 schreef Clay het volgende:
In ie is dat ding "event", die zal wel globaal zijn dan.

In IE heb je idd de beschikking over het event object in eventhandlers (valt binnen de scope(?) van het window object).

Today's subliminal thought is:

woensdag 30 januari 2002 01:36

Acties:

Verwijderd

Topicstarter

Ah. Zo zit dat.