Forum PHP.pl > [JavaScript] addEventListener

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [JavaScript] addEventListener

Wieviór

9.12.2008, 11:49:26

Stwierdziłem ostatnio, że przerzucę się na nieinwazyjny JavaScript i przestanę w kodzie HTML używać onclick, onmouseover czy innych.

Używam addEventListener. Kod mam taki:

[HTML] pobierz, plaintext 
function overW3c() { document.getElementById('loga_w3c').src="strona/loga_w3c_on.gif"; }
function outW3c() { document.getElementById('loga_w3c').src="strona/loga_w3c.gif"; }
function load()
	{ 
    document.getElementById('loga_w3c').addEventListener("mouseover", overW3c, false);
    document.getElementById('loga_w3c').addEventListener("mouseout", outW3c, false);
	}
[HTML] pobierz, plaintext

To jest w pliku main.js, który wrzucam do pliku index.html, w którym mam:

[HTML] pobierz, plaintext 
<body onload="load();">
<a href="http://validator.w3.org/check?uri=referer"><img id="loga_w3c" src="strona/loga_w3c.gif" alt="Valid HTML 4.01 Transitional"></a>
</body>
[HTML] pobierz, plaintext

No i wszystko fajnie działa, tylko rozwiązanie to jest stosunkowo słabe. Co będzie jeśli takich obrazków zmieniających się po najechaniu będę chciał mieć np. 10? Bezsensu pisać dla każdego funkcję. Lepszym rozwiązaniem byłaby funkcja over(id), która dla podanego id by przekazywała, który element i na co zamienić po najechaniu.

Niestety gdy tak próbuję, to już addEventListener nie działa... ktoś ma jakiś pomysł?

batman

9.12.2008, 12:24:54

Cytat(Wieviór @ 9.12.2008, 11:49:26 )

... ktoś ma jakiś pomysł?

Ja mam - jQuery.

Wieviór

9.12.2008, 13:20:33

jQuery, jQuery. Akurat tworzę małą stronę i bibliotek jQuery wolałbym nie dodawać. Szukam innego rozwiązania mimo wszystko ;]

erix

9.12.2008, 17:20:14

[HTML] pobierz, plaintext 
<body onload="load();">
<a href="http://validator.w3.org/check?uri=referer"><img id="loga_w3c" src="strona/loga_w3c.gif" alt="Valid HTML 4.01 Transitional"></a>
</body>
[HTML] pobierz, plaintext

Sory, ale sam sobie przeczysz; body onload.

Poza tym, addEventListener nie jest obsługiwany przez IE. Najlepiej byłoby tu faktycznie skorzystać z jQuery, skoro Ci tak zależy na rozmiarze, to go odpowiednio okroić, aby zostały tylko potrzebne Ci metody.

Widać, mało Googlałeś, bo znalazłem coś takiego:

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.