Myší události – základní syntaxe
Výhoda klientských skriptů spočívá v tom, že dovedou okamžitě reagovat na změny provedené uživatelem při práci s načteným HTML souborem. Touto událostí, která odstartuje určitou proceduru může být například pohyb nebo kliknutí myší.
Kromě obecně známých událostí jako je např. onClick, onMouseOver nebo onMouseOut však existuje řada dalších možností, jak reagovat na práci uživatele s myší. Některé z nich Vám dnes představím – čtvrté verze prohlížečů MSIE a NN totiž přinesly řadu dalších nových spouštěcích příkazů, které mnoho z vas nezná. K těm, které podporují oba nejrozšířenější browsery (MSIE, NN) patří:
Objekt Event
Uvedené příkazy však opravdu nejlépe využijete teprve ve spojení s objektem Event. Pomocí něj lze totiž přímo zjistit parametry určité události, např. které tlačítko bylo zmáčknuto, souřadnice kursoru myši apod. Využívání objektu Event má však jednu velkou nevýhodu – tou je naprostá nekompatibilita prohlížečů. Proto si uvedeme pouze vlastnosti, u kterých existují vzájemné ekvivalenty. Akce provedené myší můžeme detekovat pomocí těchto vlastností:
Praktická ukázka
Jak vidíme, rozdíly mezi jednotlivými prohlížeči jsou značné, proto si možnosti využití objektu event ve spojení se spouštěcími událostmi ukážeme na následující jednoduché ukázce. Ta umožní nadefinovat různé upozorňující zprávy podle toho, které tlačítko myši použijete pro kliknutí na uvedený odkaz
Zdrojový kód tohoto příkladu vypadá následovně:
|
Přestože se jedná o velmi jednoduchý skript, vidíme, že díky nekompatibilitě nám narostl do relativně velkých rozměrů. Jednotlivé části si nyní vysvětlíme. Pomocí příkazu onMouseDown, který reaguje na zmáčknutí tlačítka myši je provedena funce zprava(). Na začátku této procedury je nutné nejprve zjistit verzi a název prohlížeče (příkazy navigator.appVersion, navigator.appName). Podle zjištěných údajů pak využijeme objekt event pro identifikaci zmáčknutého tlačítka – v MSIE pomocí vlastnosti event.button, v NN event.which (u NN je nutno objekt event nadefinovat již při spuštění procedury, tak jak je tomu v tomto příkladu.). Protože však IE a NN vrací různé hodnoty pro jednotlivá tlačítka, je nutné je sjednotit a přiřadit jim upozorňující zprávy (příkaz alert()).
Závěrem
Jak je vidět z našeho krátkého přehledu, JavaScript 1.2 přinesl řadu důležitých zlepšení, které umožňují větší interaktivitu stránek s uživatelem. Proto budeme v tomto seriálu, kterým jsme tímto článkem započali, pokračovat a přineseme Vám řadu dalších skriptů, které zcela určitě využijete při vytváření webových stránek. Vývoj tohoto seriálu však můžete ovlivnit i Vy: stačí když nám napíšete, co vás zajímá a my se pokusíme Vaše náměty zpracovat.
Starší komentáře ke článku
Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.
Mohlo by vás také zajímat
-
Jak nainstalovat šablonu ve WordPressu
23. července 2024 -
Landing page: Jak vytvořit landing page s vysokým CTR
7. května 2024 -
Jak zabezpečit váš chytrý telefon před kybernetickými hrozbami
30. listopadu 2023 -
Nejlevnější VPS: To je nový Cloud Server Mini od ZonerCloud
4. června 2024
Nejnovější
-
Jak chránit webové stránky před Web/AI Scrapingem
27. listopadu 2024 -
Jaký monitor je nejlepší k novému Macu Mini?
25. listopadu 2024 -
Výkonný a kompaktní: ASOME Max Studio s výjimečným poměrem cena/výkon
11. listopadu 2024 -
Šokující data od Microsoftu: Kyberútoky rostou o stovky procent!
8. listopadu 2024