När man hovrar över en div skall den byta färg. Det kan bli en väldans massa divvar och då vill jag hellre ha en universal grej i mitt javascript än att skriva ut eventet onmouseover="document..." för varje div i htmlkoden. Hur ska man egentligen göra?
Det går ju visserligen att skriva en funktion getElementsByClassName() som hämtar alla element vars värde på class-attributet uppfyller ett visst villkor, skulle man inte vilja tilldela id-värden till varje <div>.
Vill man göra för alla divvar behöver de inte ens vara namngivna, man kan ju använda document.getElementsByTagName("div"):
window.onload = function()
{
var divs = document.getElementsByTagName("div");
for (var i = 0; i < divs.length; ++i){
divs[i].onmouseover = function()
{
this.style.backgroundColor = "#777";
}
divs[i].onmouseout = function()
{
this.style.backgroundColor = "#fff";
}
}
}
... men det är nog klokt att göra som Peter S föreslår och ha en klass på dem som man kollar. Divvar är ju tänkta att vara generella element, man kan ju vilja ha andra divvar som inte har mouseover/out-effekt.
Kan det finnas en fördel med att ta bort alla event som man har i ett htmldokumentet och flytta in dom i window.onload = function {}? Min fråga är kanske mer om det egentligen finns någon nackdel med det?
Den enda fördelen är att HTML-koden blir renare: du separerar HTML:en och JS:en. Man kan likna det vid att länka in all CSS via externa filer, i stället för att skriva style="..." direkt i taggarna.
Så länge det inte påverkar funktionernas "prestanda", eller vad jag nu ska kalla det, så är det ju bara så mycket skönare att kunna köra in alla små funktioner i window.onload
// Tack grabbar för avsatt tid!
257 ms totalt · 4 externa anrop · v20260731065814-full.86ec41c2