Slabikář JavaScriptu – události myši a objekt Event

16. dubna 2002

•

Dynamické HTML stránky téměř vždy obsahují programový kód JavaScriptu připojený k událostem, které mohou na stránce nastat. Aby bylo možné takové stránky tvořit, je nutné znát jejich význam. Podívejme se tedy na popis nejpoužívanějších událostí, které mohou nastat v HTML prohlížeči a na příklady jejich použití.

Před vlastním výkladem zdůrazněme, že událost může nastat vždy nad některým objektem dokumentu, tedy v souvislosti s nějakou činností, která se objektu týká. Takovým objektem může být okno prohlížeče (window), tělo – tag BODY – HTML dokumentu (document) nebo jakýkoli HTML objekt (formulář, tlačítko, tabulka, buňka tabulky, text uzavřený do tagu FONT, obrázek apod.).

Události a příslušná odezva na ně se definují většinou přímo v tagu objektu, k němuž je událost vázána. V názvech událostí se nerozlišují malá a velká písmena.

Událostmi myši rozumíme ty události, které vzniknou v souvislosti s tím, že uživatel používá myš (v některých případech i klávesnici). Tady je jejich seznam:

onClick (při klepnutí)
Tato událost nastává ve chvíli, kdy uživatel klepne myší nad příslušným objektem. Klepnutí se týká pouze levého tlačítka myši. Pokud uživatel použije pravé tlačítko, nastává událost onContextMenu.

Následující příklad demonstruje použití obou vlastností v tagu FONT:

onDblClick (při poklepání)
Poklepáním se spustí událost ondblclick. Její použití je stejné jako onclick.

onMouseDown (při stlačení tlačítka myši)
Událost onMouseDown nastává ve chvíli, kdy uživatel stlačí tlačítko myši – je libovolné zda levé nebo pravé.

onMouseUp (při uvolnění tlačítka myši)
Událost nastane ve chvíli, kdy uživatel uvolní tlačítko myši. Je logické, že někdy dříve již musela nastat událost onMouseDown. Události onMouseDown a onMouseOut mohou nastat nad různými objekty. To je základ pro možnost programování technologie „drag and drop“. Bude uvedeno později.

onMouseMove (při pohybu myši)
Tato událost nastává kdykoli se kurzor myši pohybuje nad objektem, nad kterým je událost definovaná.

onMouseOut (při opuštění objektu)
Událost nastane ve chvíli, kdy kurzor myši opustí objekt, nad kterým se pohyboval. Jak bylo ukázáno v předcházejícím dílu Slabikáře, společně s onMouseOver se používá pro zvýrazňování objektu, nad kterým se právě nachází kurzor.

onMouseOver (při vstupu na objekt)
Událost nastane ve chvíli, kdy uživatel posune kurzor nad objekt – tedy přesně v okamžiku, kdy kurzor překračuje hranici objektu. Ve skriptech se používá ve spojení s onMouseOut.

Při programování je také důležité vědět, v jakém pořadí události nastanou. Pokud uživatel pohybuje kurzorem nad objekt, klepne na objekt a potom kurzor „odveze“ jinam, nastanou na tomto objektu události v následujícím pořadí:

onMouseOver
onMouseMove
onMouseDown
onMouseUp
onClick
onMouseMove
onMouseOut

Správně naprogramovat technologii „drag and drop“ patří k těm těžším úlohám, se kterými se lze setkat. Je zapotřebí ošetřit velké množství možných událostí:

„zvednutí“ objektu kurzorem myši
„upuštění“ na správné místo
„upuštění“ na nesprávné místo
pokus o „upuštění“ ve chvíli, kdy objekt ještě nebyl „zvednut“
korektní zobrazení přenášení objektu
zničení původního objektu, pokud byl upuštěn na nové místo a další

Většinu popsaných problémů řeší následující funkční příklad, který berte jako inspiraci pro možné pozdější úpravy. Texty uzavřené do tagu FONT lze tažením myší umístit do seznamu SELECT v libovolném pořadí:

<html>
<head>
<SCRIPT LANGUAGE=“JavaScript“>
var optText=““;
var optValue;
var obj;

function cancel() {
// upuštění objektu na nesprávné místo, tj. kamkoli do dokumentu
   if (typeof(obj)==“object“) {
      obj.style.fontWeight=’normal‘;
      optText=““;
}}

function drop(a) {
// upuštění textu na správné místo, tj. do tagu SELECT
   if (optText!==““) {
      var no = new Option();
      no.value = optValue;
      no.text = optText;
      a[a.options.length] = no;
      obj.innerText=““;
      optText=““;
}}

function ret (a) {
// na počátku přenášení se přenášený text zobrazí tučným písmem
a.style.fontWeight=’bold‘;
event.returnValue=false;
}

function drag(a) {
// naplnění globálních proměnných
   optText=a.innerText;
   optValue=a.id;
   obj=a;
}
</script>

</head>
<body onmouseup=“cancel();“>
   <select name=“prvni“ size=“5″ style=“width: 100px;“ onMouseUp=“drop(this)“>
   </select>
<p>
   <font id=“1″ onMouseDown=“drag(this)“ onSelectStart=“ret(this)“>Text1</font><br>
   <font id=“2″ onMouseDown=“drag(this)“ onSelectStart=“ret(this)“>Text2</font><br>
   <font id=“3″ onMouseDown=“drag(this)“ onSelectStart=“ret(this)“>Text3</font><br>
   <font id=“4″ onMouseDown=“drag(this)“ onSelectStart=“ret(this)“>Text4</font><br>
   <font id=“5″ onMouseDown=“drag(this)“ onSelectStart=“ret(this)“>Text5</font><br>
</body>
</html>

Při programování událostí lze výhodně využívat objekt event, který je součástí objektového modelu DOM (objekty, jejich metody a vlastnosti, které podporují internetové prohlížeče). Pokud se v HTML dokumentu vyskytne jakákoli událost, informace o ní se uloží do vlastností objektu event. Podle hodnot těchto vlastností pak lze rozhodnout, jak událost ošetřit. Zde je stručný seznam těch nejpoužívanějších vlastností:

altKey, ctrlKey, shiftKey
Stlačení funkčních kláves ALT, CTRL a SHIFT nevyvolává žádnou událost. Proto je v těchto vlastnostech objektu event vždy uložena Boolean hodnota, která udává, zda v okamžiku výskytu události byla nebo nebyla stlačena i příslušná klávesa.

button
V této vlastnosti je uložena hodnota typu integer udávající, které tlačítko myši bylo v okamžiku vyvolání události stisknuto.

0 – žádné
1 – Levé tlačítko
2 – Pravé tlačítko
4 – Střední tlačítko

Součtem těchto čísel se identifikuje současné stisknutí více tlačítek.

fromElement, toElement
Obě vlastnosti se používají pouze v souvislosti s událostmi onMouseOver a onMouseOut. Obě události nastávají ve chvíli, kdy kurzor vstupuje nebo opouští objekt. V takových případech uvedené vlastnosti obsahují odkaz na objekt z kterého, resp. na který se kurzor přesunul.

Pro názornost vyzkoušejte následující příklad a zkuste najíždět kurzorem na tlačítko Beta. Ve stavovém řádku prohlížeče se bude zobrazovat typ tagu, z něhož na toto tlačítko kurzor vstoupil:

keyCode
Obsahuje UNICODE znaku, který byl stlačen na klávesnici, pakliže se jedná o událost klávesnice returnValue (velice důležitá hodnota). Jejím nastavením na hodnotu false lze zrušit implicitní odezvu na událost. Například pokud klepne uživatel myší na hypertextový odkaz, provede se nejdříve tělo události onClick (pokud je definováno), a pak se teprve provede přesměrování na URL uložené v atributu HREF. Pokud tělo funkce připojené k události onClick bude obsahovat event.returnValue=false, přesměrování neproběhne.

srcElement
Vlastnost obsahuje odkaz na objekt, nad kterým událost vznikla.

type
Obsahuje textově popis události, která nastala – např. „click“ při události onClick apod.

screenX, screenY
X-ové a y-ové souřadnice kurzoru myši ve chvíli, kdy událost nastala. Jsou vztaženy k levému hornímu rohu okna prohlížeče.

Používání objektu event může velmi usnadnit psaní skriptů například tím, že není nutné definovat odezvu na událost do každého tagu, kde ji chceme mít. To demonstruje poslední dnešní příklad. Funkce Udalost se spustí pokaždé, když uživatel klepne na plochu dokumentu nebo kterýkoli z HTML objektů. Teprve ve funkci se pozná, nad kterým objektem událost nastala, a podle toho lze řídit další ošetření události:

<html>
<head>
<script language=“JavaScript“>
function Udalost() {
   alert(„Kliknul jste na tag “ + event.srcElement.tagName);
}
</script>
</head>
<body onClick=“Udalost()“>
   <input type=“button“ value=“Tlačítko“><p>
   <font>text</font>
</body>
</html>