ugrás a tartalomhoz

JavaScript hivás egérmozgással szemetes kód nélkül

olvastar · 2010. Okt. 22. (P), 23.21
Syastox!

Nem igazi "probléma" csak szépséghiba

Adott egy <div>ünk, benne sok kicsi <div> listaszerűen. Ezekkel a kis listaelemekkel lenne problemám.
Ugyanis szinte minden egér-eventhez köthető valami JavaScript történés.
Valahogy igy:

<div>

  <div>
    <a onclick="itemwear()" ondblclick="itemdrop()" onmouseout="hideinfo()" onmouseover="showinfo()">
      Database datas
    </a>
  </div>

  <div>
    <a onclick="itemwear()" ondblclick="itemdrop()" onmouseout="hideinfo()" onmouseover="showinfo()">
      Database datas
    </a>
  </div>

</div>
Természetesen ez nem a teljes kód, csak lecsupaszitottam a problémára.
A két DIV sem csak 2 lenne hanem aggasztóan sok, csak felesleges copyznom érti mindenki.
Az a gondom velük h nem-e lehetne megoldani valahogy azt, h ne kelljen minden sorban leirnom a JS hivást? Akármire vevő vagyok.
A kód formázva van CSS-el, PHP generált MySQL adatbázissal. Ajax módszerrel kommunikál. Szóval van kód rendesen. És ha egy mód lenne rá akkor lecserélném h (ez most hülyeség lesz de igy lenne a legfrappánsabb)

CSS-t neki:
[colorer=css]
#mouse
   onclick="itemwear()" ondblclick="itemdrop()" onmouseout="hideinfo()" onmouseover="showinfo()"
Simpla CODE:

<div>
  <a >
  <div id=mouse>
    Database datas
  </div>
  <div id=mouse>
    Database datas
  </div>
</div>
 
1

Auch

olvastar · 2010. Okt. 22. (P), 23.26
Kimaradt a [/colorer] sor -.-' Kapkodok :(
2

A "class" tulajdonságot

inf3rno · 2010. Okt. 22. (P), 23.36
A class tulajdonságot szokták használni ilyesmire, nem az id-t. Ha elég rögzített a szerkezet, akkor még enélkül is meg lehet, csak szimplán getElementsByTagName-el.
4

Nem használom

olvastar · 2010. Okt. 22. (P), 23.57
Nem használtam az ID-t mondtam h hülyeség
Az a cink h egértevékenységet kell figyelni minden egyes kis DIVben.
getElementsByTagName-el úgy tudom ez nem megoldható... De amien szinten van még a JS tudásom mindent elhiszek :D A kérdés csak az h hogyan?
3

JavaScript + bubbling

Poetro · 2010. Okt. 22. (P), 23.55
Az eseménykezelőket hozzáadhatod JavaScripttel, úgy hogy végigmész az összes elemen, és hozzáadod az eseménykezelőket (getElementsByTagName, className). Vagy kihasználhatod az event bubbling-ot és a szülőhöz adod hozzá az eseménykezelőt, és onnan figyeled, mi volt az esemény eredeti célpontja.
5

o.O

olvastar · 2010. Okt. 22. (P), 23.58
WoW ennek akkor must utánamászunk :P
Köszi!
6

Meglesz ez

olvastar · 2010. Okt. 23. (Szo), 02.47
Szóval, mivel most mindenki alszik ide irogatom a részmegoldásokat
Merugye legyen már válasz a saját témámra :D

Szóval a Bubblemicsoda elkalauzolt az addeventlistener -hez (FTW? LoL)
AMiből kisütöttem valami iesmit:

<html>
 <head>
   <title>Going on</title>
   <style type="text/css">
     #t
       {
         border: 1px solid red;
       }
   </style>
   <script type="text/javascript">

   function showinfo() {
     document.getElementById('info').innerHTML = 'That is the target'
   }

   function modifyTextb() {
     alert('other page');    
   }
	 
   function hideinfo() {
     document.getElementById('info').innerHTML = 'InfoBox'    
   }

   function load() { 
     var el = document.getElementById("list"); 
     el.addEventListener("mouseover", showinfo, true);
		 el.addEventListener("click", modifyTextb, true);
		 el.addEventListener("mouseout", hideinfo, true); 
   } 

   </script> 
 </head> 
 <body onload="load();"> 
 <div> 
   <b>Main Div</b> 
   <div id="list">
	   <a id="t"> Target </a>
	 </div>
   <b>End of Main div</b>
 </div>
 <br />
 <div id="info">
   Info box
 </div>
   
 </body> 
 </html>
Mostmár csak azt kell megvizslatni h kismillió "list" elemet h a somba kezel le...Eddig mindenesetre müxik
7

A-A

olvastar · 2010. Okt. 23. (Szo), 07.22
Nem megy ez Joe több listaelemmel :(
De most elteszem magam holnapra majd folytatom
8

Például, hogy nem id-t

ironwill · 2010. Okt. 23. (Szo), 11.41
Például, hogy nem id-t használsz, hanem class-t.
function load() {
  try {
    var divs = document.getElementById("listcontainer").getElementsByTagName("div");

    for (var i=0; i<divs.length; i++) {
      var el = div[i];

      if (el.className != null && el.className != "" && el.className.indexOf("list") > -1) {
        el.addEventListener("mouseover", showinfo, true);
        el.addEventListener("click", modifyTextb, true);
        el.addEventListener("mouseout", hideinfo, true);
      }
    }
  } catch (ex) {}
}
<div id="listcontainer">
  <div class="list">
    <a id="t"> Target </a>
  </div>
  <div class="list">
    <a id="t"> Target </a>
  </div>
  <div class="list">
    <a id="t"> Target </a>
  </div>
  <div class="list">
    <a id="t"> Target </a>
  </div>
</div>
9

Naa nemá, túl sokat segítesz

inf3rno · 2010. Okt. 23. (Szo), 13.59
Naa nemá, túl sokat segítesz neki. Így születnek a copy-paste programozók...
10

bocs.. :)

ironwill · 2010. Okt. 23. (Szo), 14.13
Veled még nem esett meg, hogy már nem tudtad megállni, hogy valamit megcsinálj más helyett, mert már a hajad tépted, hogy mit szórakozik annyit? :)
11

Dehogynem, de azóta

inf3rno · 2010. Okt. 23. (Szo), 19.05
Dehogynem, de azóta fegyelmeződtem, és már elintézem egy kézlegyintéssel... :D
12

(Nincs téma)

bona95 · 2010. Okt. 24. (V), 08.00
13

LoL

olvastar · 2010. Okt. 24. (V), 08.04
Igen ez valóban hasznos HSZ volt :D Köszönjük nem kérjük :D
15

<3

inf3rno · 2010. Okt. 24. (V), 11.24
<3
14

Reinstall lesz

olvastar · 2010. Okt. 24. (V), 08.45
Győőőő

Miután szétturtam a példakódot agyonvertem, megnyúztam, megsütöttem, és még akkor se akart menni Elmásztam kedvenc kis helyemre a WEBen és beillesztettem egy helyre ahol mindenféleképpen futnia kell ha múködőképes... Nos az amit betettem az futott ott (nem a példát de amit szétszedtem)... nálam nem -.-' Namármost ez olyan mókás jelenség volt h ennek örömére elmentem aludni...

Mellesleg az marha hasznos infó lett volna, ha valaki oldalbabök h Hééé az byId csak az első elemet szedi ki... Nah az PL hasznos lett volna... Tiszta Google társadalom. Tudják a tényeket, de a miértekt nem vagdossák hozzá az emberhez. Najó megyek aludni kissé morcosabb vagyok a kelleténél.

Ezt az animálét meg vagdossa ki innen valaki spamolást rühellem csak a spanolással vagyok ok szinten.
16

Restart lett >D

olvastar · 2010. Okt. 24. (V), 11.29
Nah szóval helyzetjelentés :P
Pontos helyi, hegyi idő hajnal 2:25
Újrainditást, kód újbóli leirását követően kaptunk egy működőképes változatot. Sajnálatos módon nálam olyan Isten nincs h Nincs. Szal magyarázat h megértsem mit kell csinálni:
Classozni a diveket, igy amikor getElement-ezem akkor azt az adatot ki tudjam préselni a tömbből. ById-vel nem megy, az csak az első elemet kapja ki a többit hagyja a somba. Szal NEKEM maradt a ByName /*okosabbak biztos tudnak mást is :D Csak nem mondják :( */

Már csak be kell tömbözni a DIVeket egy laza for ciklussal onload-nál igy mindegyik tömbelemhez /*azaz a tömbelelemekhez társitott DIVekhez */ hozzá tudjuk adni az addEventListener -t és mindenki boldogan mehet tönkre :D

Nah de hogy a CTRL-C CTRL-V társadalom is örüljön meg én is h lázithatok /* mocskos rockkultúra! Punk Rock 'n' Roll! */ bepakolom a kódot, asszem az alertekből benn maradt pár, de legalább mindenki nyomon tudja követni mi is történik :D

Hulla vagyok ezért ien jó sok a duma :D

<html>
<head>
  <style type="text/css">
    #lista
    {
      border: 1px solid red;
    }
  </style>
<script type="text/javascript">

  function showinfo() {
     document.getElementById('info').innerHTML = 'That is the target'
   }

  function csere()
    {
      alert('other page');  
    } 
   
  function hideinfo() 
    {
      document.getElementById('info').innerHTML = 'InfoBox'    
    }

function getElements()
  {
  try 
    {  
      var cuccok=document.getElementsByName("x");
      alert(cuccok.length);
      
      for (var i=0; i<cuccok.length; i++)
        {
          alert(i);
          var el = cuccok[i];
          alert(el.className);
          alert(el.className.indexOf("list"));
          if (el.className != null && el.className != "" && el.className.indexOf("list") > -1)
            {
            alert(cuccok[i].className);
  
         el.addEventListener("mouseover", showinfo, false);
         el.addEventListener("click", csere, false);
         el.addEventListener("mouseout", hideinfo, false);
            }
        }
        
    } catch (ex) {}
  }
</script>
</head>
<body onload="getElements()";>

  <div id="cucc">

    <div class="list" name="x">
      <a id="lista">
        <img alt="icon (1K)" src="mix/icon.png" id="icon"/>
        MySQL cucc
      </a>
    </div>
    <div class="list" name="x">
      <a id="lista">
        <img alt="icon (1K)" src="http://weblabor.hu/misc/fs/perl4.jpg" id="icon"/>
        MySQL cucc
      </a>
    </div>
    <div class="list" name="x">
      <a id="lista">
        <img alt="icon (1K)" src="http://weblabor.hu/misc/fs/delfin.jpg" id="icon"/>
        MySQL cucc
      </a>
    </div>

    <input type="button" onclick="getElements()" value="Mennyi Xunk is van?" />

  </div>
  <div id="info">
    Info
  </div>
  <div>
  </div>

</body>
</html>


Ironnak köszi sokat lenditett a dolgokon, Infernó meg kicsit több infóval jön /*Lsd.: Amit én irtam */ Már rég kész lenne. A... Poetro (?) meg olyat linkelt aminek még hasznát veszem! Nade most iszok még egy KVt ha jól látom van 3 órám amig el kell indulni melóba, szal addig programozunk itthon IS /*nem mintha ott nem azt csinálnám de lehet keresek egy helyet ahol lehet tovább offolni*/ :D További szép 7végét mind1kibe :D


P.S.:
ILY helyett...
És h nézzen is ki valahogy dobtam a kódba két képlinket is innen oldalról Muhahahah
17

Szerintem felesleges a name

neogee · 2010. Okt. 25. (H), 16.25
Szerintem felesleges a name tulajdonság. Persze azzal is megoldható, de class-al is. :)
Csak kell hozzá készíteni egy getElementsByClassName függvényt valahogy így:

function getElementsByClassName( elementTagName , className ) {
  var returnElements = new Array();
  var tempElements = document.getElementsByTagName( elementTagName );
  for( var i=0; i<elements.length; i++) {
    if( tempElements[i].className != '' &&
        tempElements[i].search(/className/i')
       ) {
      returnElements.push(tempElements[i]);
    }
  }
  return returnElements;
}
És valahogy emígyen használod:

var items = getElementsByClassName('div','item');
Aztán a visszakapott tömböt bejárhatod, ahogy akarod, és azt csinálsz az elemeivel ami jólesik. :)

Lehet a regex nem jó, azt nem tudom, nem teszteltem :)
18

Szép...

inf3rno · 2010. Okt. 25. (H), 17.33

tempElements[i].className != '' && tempElements[i].search(/className/i')
Ez a kifejezés annyira kemény, hogy érdemes elemezni :D

  1. Szintaktikai hiba: az egyik aposztróf pár nélkül van
  2. A /className/i regex arra a sztringre illik, hogy "className". A helyes megadás: new RegExp(className,"i") lenne.
  3. A regexnél érdemes belevenni, hogy a className után és előtt szóköz, vagy semmi ne legyen, így nem fordulhat elő, hogy a "list"-re kereső regex illik a "listA" és a "listB" sztringekre is.
  4. A search-öt sztringre kell meghívni, nem a node-ra, szóval tempElements[i].className.search lenne helyesen.
  5. A search visszatérő értéke -1, ha nincs találat, és nem nulla.
  6. Felesleges az üres sztringet külön ellenőrizni, mert amúgy sem lenne benne a keresett className, helyette inkább a className-t kéne ellenőrizni, hogy nem e üres sztring.
  7. Érdemesebb RegExp.test-et használni String.search helyett, mert az Boolean-t ad vissza, és nekünk arra van szükségünk, nem pedig a találat helyére.


Szóval így kéne kinéznie:

new RegExp("\\b"+className+"\\b","i").test(tempElements[i].className)
Persze a regex-et illik kiemelni külön változóba (ez mondjuk sokat nem oszt nem szoroz, mert a compile csak egyszer fut le a regex-re, utána már cache-ből megy, tökmindegy hányszor hozzák létre ugyanazt).
19

Köszi a javításokat :)

neogee · 2010. Okt. 27. (Sze), 09.46
Köszi a javításokat :)

1: Az aposztróf, véletlenül került oda

2,3,7: A JavaScript mintaillesztése számomra rejtély, nagyon szokatlan...

4: Egyszerű figyelmetlenség :) Gondolom veled is előfordult már. Nyilván ha az előző sorban jól írtam akkor nem szándékos... :)

3: Ezt nem tudtam, de most megjegyzem

6: A className-t tényleg ellenőrizni kéne, de ilyen alapon agyon lehetne bonyolítani az egészet. Nyilván aki 5 percnél többet kódolt már, az használat előtt ezeket beleteszi, de aki 5 percnél többet kódolt már, az nem fogja copy-paste használni. A className != '' pedig azért került bele, mert minek ilesszünk mintát, ha úgyis üres? PHP-s tapasztalataim alapján a mintaillesztés elég lassú dolog, ezért gondoltam feleslegesen nem kell. :) Megfelelően nagy számú elemnél szerintem érezhető a különbség. De lehet hogy ismét tévedek.

Ezen túl pseudocode-ot írok abban valószínűleg nem lesznek ilyen hibák :) Ám minden bizonnyal segíteni sem fog a kérdezőnek sokat. :)
20

Egyszerű figyelmetlenség :)

inf3rno · 2010. Okt. 27. (Sze), 19.50
Egyszerű figyelmetlenség :) Gondolom veled is előfordult már.

Persze, és azt tanultam belőle, hogy nem teszek ki olyan kódot, amit előtte nem próbáltam ki.

PHP-s tapasztalataim alapján a mintaillesztés elég lassú dolog, ezért gondoltam feleslegesen nem kell. :) Megfelelően nagy számú elemnél szerintem érezhető a különbség. De lehet hogy ismét tévedek.

Lehet, nem próbáltam, de nincs rá bizonyíték, hogy bármit is számítana. Php regex motorja teljesen más, mint javascripté...
21

Ok.

neogee · 2010. Okt. 27. (Sze), 20.26
Ok.
22

Lemértem a kedvedért:

inf3rno · 2010. Okt. 28. (Cs), 08.21
Lemértem a kedvedért:

var className="list";
var empty="";

function test1(a)
{
	var r=[];
	var p=new RegExp("\\b"+className+"\\b","i");
	for (var i=0,l=a.length; i<l; ++i)
	{
		if (p.test(a[i]))
		{
			r[r.length]=a[i];
		}
	}
	return r;
}

function test1b(a)
{
	var r=[];
	for (var i=0,l=a.length; i<l; ++i)
	{
		var p=new RegExp("\\b"+className+"\\b","i");
		if (p.test(a[i]))
		{
			r[r.length]=a[i];
		}
	}
	return r;
}

function test1c(a)
{
	var r=[];
	var p=new RegExp("\\b"+className+"\\b","i");
	for (var i=0,l=a.length; i<l; ++i)
	{
		if (a[i]!=empty && p.test(a[i]))
		{
			r[r.length]=a[i];
		}
	}
	return r;
}

function test2(a)
{
	var r=[];
	var s=className.length;
	var w=" ";
	for (var i=0,l=a.length; i<l; ++i)
	{
		if (a[i]==empty)
		{
			continue;
		}
		var p=a[i].indexOf(className);
		if (
			p!=-1
		&&
			(!p || a[i].charAt(p-1)==w)
		&&
			(a[i].length==p+s || a[i].charAt(p+s)==w)
		)
		{
			r[r.length]=a[i];
		}
	}
	return r;
}

function newArray()
{
	var a=[];
	var l=1000000;
	for (var i=0; i<l; ++i)
	{
		a[i]=Math.round(Math.random())
			?empty
			:className;
	}
	return a;
}

//test1:	 264
//test1b:	3642
//test1c:	 189
//test2:	 111

var a=newArray();
var d1=new Date();
test1c(a);
var d2=new Date();
alert(d2-d1);

//firefox alatt
Na most a maximum amivel szerintem valaha találkozol az 10K elem, ez meg egymillióra lett mérve. Ha leosztod 100-al az időket, akkor a mintaillesztés előtti ellenőrzés: test1-test1c = 0.8 msec. Körülbelül ennyit számít, hogy van e üres sztring ellenőrzés vagy sem. Nyilván az indexOf a leggyorsabb, viszont sokkal bonyolultabb logikailag, ha meg több className-re keresel egyszerre, akkor még komplikáltabb lesz...

Magának a className-nek a lekérése szerintem übereli a sztring feldolgozásnak az idejét, mert DOM Node-ból kéred le, az meg lassú, de ezt még nem teszteltem.


Még egy dolog; a fejlesztés úgy megy, hogy először megírjuk a programot, és csak utána optimalizálunk, és csak nagyon ritkán van az, hogy a program írásakor is oda kell figyelni a terhelésre.
Itt a sztring feldolgozás nagyon rövid idő, szóval teljesen felesleges optimalizálni, mert egyik programban sem ez lesz a szűk keresztmetszet, ezért jobb, ha inkább az átlátható és könnyebben módosítható kódra megy az ember (nálam ez a tiszta regex-es megoldást jelenti).
A módszer, amivel mértem elég gagyi, gondolom vannak jó profilerek js-ben is erre a célra, még nem próbálgattam őket.
23

Nézd ha ezt most

neogee · 2010. Okt. 28. (Cs), 09.37
Nézd ha ezt most bizonyításnak szántad, akkor felesleges volt. Elhiszem enélkül is.
Ha csak úgy kíváncsiságból mérted meg, hogy azért mégis jelent-e különbséget, akkor viszont köszi az eredményt, most már akkor ezt is tudom, és figyelek is majd rá :)
Tulajdonképpen egyébként akkor baromira mindegy, hogy ott van-e a az üres sztring ellenőrzés vagy sem. Vegyük úgy, hogy én megírtam, te pedig optimalizáltad... Jelen esetben persze nem teljesítményben, hanem átláthatóságban :)

Visszatérve arra az esetre, ha bizonyításnak szántad:
Nem az a probléma, ha elmondod, hogy mit csináltam rosszul, vagy kijavítasz engem, vagy akárki mást. Nem foglalkozom ezzel 100 éve, nem ismerem minden nyelv sajátosságait, és nem vagyok professzor sem. Előfordul hogy az ember mellényúl, téved, vagy rosszul tud valamit. Nem csak velem, veled is előfordult már számtalanszor, és mindenkivel. Gondolom te sem úgy születtél, hogy ezt mind tudtad volna. :)

A gond ezzel van:
Ez a kifejezés annyira kemény, hogy érdemes elemezni :D

Vagy lehet, hogy ezzel nincsen gond, de engem eléggé zavart... :)
Megpróbáltam valamiféle segítséget, vagy megoldást, vagy egy másik megközelítést adni a problémára, erre kiröhögnek... :)

Találkoztam én már itt ennél sokkal nagyobb marhasággal is, amit jótanácsként adott a válaszoló, aztán mégsem röhögték ki. :)

Ezzel szemben szerintem ez nem marhaság volt...
24

Nézd ha ezt most

inf3rno · 2010. Okt. 29. (P), 00.25
Nézd ha ezt most bizonyításnak szántad, akkor felesleges volt. Elhiszem enélkül is.

Hát van a tekintély elvű megközelítés, amikor elhiszed nekem, mert úgy gondolod többet tudok a témáról, meg van a tudományos, amikor bizonyítékot vársz. Én inkább az utóbbiban hiszek. :-)

Amúgy meg kíváncsi voltam rá, hogy ténylegesen mennyit jelent. Én úgy saccoltam, hogy 10K elemnél már több msec lesz egy-egy teszt futása, ahhoz képest tévedtem két nagyságrendet, ez elég meglepő volt... Az nem lepett meg, hogy kicsi a különbség. Úgy általában nekem az a tapasztalatom js-el, hogy a DOM manipulálás szokott szűk keresztmetszet lenni, az összes többi dolog jóval gyorsabb nála.


Vagy lehet, hogy ezzel nincsen gond, de engem eléggé zavart... :)

Nekem az tetszett, hogy egy sorban sikerült 7 olyan dolgot elkövetni, ami szerintem hiba, vagy nem oda illő. Nem volt benne semmi személyes, ha magadra veszed, az a te problémád, nem az enyém.
25

dom

inf3rno · 2010. Nov. 1. (H), 16.05
Csináltam neked egy alap rendszert dom kezelésre. Próbáld meg megérteni a működését, aztán utána továbbléphetsz. Persze tölthetsz le már kész rendszereket is, csak azoknak sokkal bonyolultabb a kódja. Szerintem elsőre még ez is sok lesz neked.

dom.js

Function.prototype.extend=function (fragment)
{
	for (var i in fragment)
	{
		if (fragment.hasOwnProperty(i))
		{
			this.prototype[i]=fragment[i];
		}
	}
	return this;
};

Function.prototype.bind=function (context)
{
	var method=this;
	return function ()
	{
		return method.apply(context,arguments);
	};
};

(function ()
{
	var Node=function (element)
	{
		this.element=element;
	};
	Node.extend(
	{
		getElementById: function (id)
		{
			return new Node(this.element.getElementById(id));
		},
		getElementsByTagName: function (tagName)
		{
			return new NodeList(this.element.getElementsByTagName(tagName));
		},
		getElementsByClassName: function (className)
		{
			return this.getElementsByTagName("*").getElementsByClassName(className);
		},
		invoke: function (method)
		{
			method.call(this);
			return this;
		},
		getAttribute: function (name)
		{
			return this.element.getAttribute(name);
		}
	});



	var NodeList=function (array)
	{
		this.source=[];
		if (array)
		{
			this.addAll(array);
		}
	};
	NodeList.extend(
	{
		addAll: function (array)
		{
			for (var i=0,l=array.length; i<l; ++i)
			{
				this.add(new Node(array[i]));
			}
			return this;
		},
		add: function (node)
		{
			this.source[this.source.length]=node;
			return this;
		},
		contract: function (test)
		{
			var result=new NodeList();
			for (var i=0,l=this.source.length; i<l; ++i)
			{
				var node=this.source[i]
				if (test.call(node))
				{
					result.add(node);
				}
			}
			return result;
		},
		getElementById: function (id)
		{
			return this.contract(function ()
			{
				return this.element.id==id;
			});
		},
		getElementsByTagName: function (tagName)
		{
			if (tagName=="*")
			{
				return this;
			}
			this.contract(function ()
			{
				return this.element.tagName==tagName;
			});
		},
		getElementsByClassName: function (className)
		{
			var pattern=new RegExp(
				"\\b"+
					"(?:"+
					(
						(arguments.length>1)
							?Array.prototype.join.call(arguments,"|")
							:className
					)+
					")"+
				"\\b",
				"i"
			);
			return this.contract(function ()
			{
				return pattern.test(this.element.className);
			});
		},
		invoke: function (method)
		{
			for (var i=0,l=this.source.length; i<l; ++i)
			{
				method.call(this.source[i]);
			}
			return this;
		}
	});

	var NodeFragment=
	{
		listen: function (type,callback)
		{
			return this.invoke(function ()
			{
				var listener=callback.bind(this);
				if (this.element.attachEvent)
				{
					this.element.attachEvent("on"+type,listener);
				}
				else
				{
					this.element.addEventListener(type,listener,false);
				}
			});
		},
		style: function (s)
		{
			return this.invoke(function ()
			{
				for (var i in s)
				{
					if (s.hasOwnProperty(i))
					{
						this.element.style[i]=s[i];
					}
				}
			});
		},
		html: function (html)
		{
			if (typeof(html)=="string")
			{
				return this.invoke(function ()
				{
					this.element.innerHTML=html;
				});
			}
			else if (this instanceof Node)
			{
				return this.element.innerHTML;
			}
		}
	};

	Node.extend(NodeFragment);
	NodeList.extend(NodeFragment);
	
	$=function (element)
	{
		return new Node(
			typeof(element)=="string"
			?document.getElementById(element)
			:element
		);
	};
})();
test.html

<html>  
<head>  
<style type="text/css">  
.list
{
	float: left;
	border: 1px solid grey;
	margin: 1px;
	background-color: lightblue;
	width: 200px;
	text-align: center;
}  

#info
{
	clear: both;
	border: 1px solid grey;
	margin: 1px;
	background-color: pink;
	width: 200px;
	text-align: center;
}
</style>
<script type="text/javascript" src="dom.js"></script>
<script type="text/javascript">  
$(window).listen("load",function ()
{
	var info=$("info");
	var def=info.html();
	var cuccok=$("cucc").getElementsByTagName("div").getElementsByClassName("list");
	cuccok.listen("mouseover",function ()
	{
		info.html(this.getAttribute("info"));
	});
	cuccok.listen("mouseout",function ()
	{
		info.html(def);
	});
});
</script>  
</head>  
<body>

<div id="cucc">  
	<div class="list" info="perl info">  
		<img alt="icon (1K)" src="http://weblabor.hu/misc/fs/perl4.jpg"/>  
		Perl
	</div>  
	<div class="list" info="delphi info">  
		<img alt="icon (1K)" src="http://weblabor.hu/misc/fs/delfin.jpg"/>  
		Delphi 
	</div>
	<div id="info">  
		Info  
	</div> 
</div>  

</body>  
</html>  
ui:
Kezdj el megbarátkozni a gondolattal, hogy egy html dokumentumban egy id csak egy elemhez tartozhat.
26

WoW

olvastar · 2010. Nov. 13. (Szo), 17.35
Őőőő igy hirtelen átfutottam KB vágom...
KB akkor hagytam abba a topicom olvasását mikor megfájdult az oldalam :P Olyan aranyosan civódtok :) (Viszont a szórakozás marhára feltart a melóban -.-') Az IDre igen én is ráeszméltem, mindjárt alvás után. 2 percig sipolt a gép h vegyem le a homolokom a klavról :D Viszont amit irtál igy hirtelen awesome :) Velem az a baj h alap dolgokon akadok el :P Most PL azon törpölök h a somba hivjam meg a JavaScriptet a dokumentum kellős közepén :D ÉRZED?
Rossz szokásom h napokig nem alszok... EZ a legnagyobb hiba a programjaimban :D ezen a héten is valami 6 órát sikerült és már itt is szombat reggel van xD (OK fél nyolc x.O)