Nyitó

Gyorstalpaló

Tervezés

HTML

CSS

Sablonok

Bevezetés

Szintaktika

Dokumentum szerkezet

Általános attribútumok

Szöveg megadása

Linkek

Kép beillesztése

Táblázatok

Listák

Űrlapok

Szkriptek

Szkriptek - Események

A weboldalakon a JavaScript kódok futtatását többnyire valamilyen esemény indítja el. A 4.01-es HTML specifikáció az alábbi eseményeket definiálja:

Esemény neve Mikor következik be? Melyik HTML elemnél használható?
onload A böngésző befejezi egy oldal betöltését vagy az összes keret betöltését egy frameset elemen belül. body, frameset
onunload A böngésző eltávolít egy dokumentumot az ablakból vagy keretből. body, frameset
onclick A felhasználó rákattint egy elemre. A legtöbb HTML elemnél.
ondblclick A felhasználó duplán kattint egy elem fölött. A legtöbb HTML elemnél.
onmousedown A felhasználó lenyomja az egér gombját az elem fölött. A legtöbb HTML elemnél.
onmouseup A felhasználó felengedi az egér gombját az elem fölött. A legtöbb HTML elemnél.
onmouseover Az egérmutató az elem fölé mozog. A legtöbb HTML elemnél.
onmousemove Az egérmutató mozog, miközben az elem fölött van. A legtöbb HTML elemnél.
onmouseout Az egérmutató elhagyja az elemet. A legtöbb HTML elemnél.
onfocus Az elem megkapja a fókuszt. (Mindegy, hogy az egérrel vagy a tabulátor billentyűvel navigálva.) a, area, label, input, select, textarea, button
onblur Az elem elveszíti a fókuszt. (A felhasználó egy másik elemre kattint, vagy a tabulátor billentyűvel a következő elemre ugrik.) a, area, label, input, select, textarea, button
onkeypress Egy billentyű le lett nyomva és fel lett engedve az elem fölött. A legtöbb HTML elemnél.
onkeydown Egy billentyű le lett nyomva az elem fölött. A legtöbb HTML elemnél.
onkeyup Egy billentyű fel lett engedve az elem fölött. A legtöbb HTML elemnél.
onsubmit Egy űrlap elküldésekor. form
onreset Egy űrlap értékeinek kezdőértékre állításakor. form
onselect A felhasználó kijelölt egy szövegrészletet egy szöveges beviteli mezőben. input, textarea
onchange Az elem elveszíti a fókuszt és az elem értéke megváltozott, amíg rajta volt a fókusz. input, select, textarea
Néhány példa az események használatára

A <script> tagnál leírt második példában a body elem onload eseménye indítja el a szorzótáblát létrehozó program futását:

<body onload="insertmultiplicationtable();">

Az onclick esemény felhasználásával látható egy példa a Kép megjelenítése felugró ablakban című oldalon.

Az alábbi példa az onchange és az onkeydown esemény alkalmazását mutatja be. A felhasználó megadhatja egy derékszögű háromszög befogóit és egy Javascript programocska kiszámítja a háromszög átfogóját.

A derékszögű háromszög egyik befogója:
A derékszögű háromszög másik befogója:
A háromszög átlója:

A megoldás elvileg egyszerű: ha valamelyik beviteli mező megváltozik, tehát ha bekövetkezik az onchange esemény, akkor le kell futnia a számításnak. Ha a felhasználó megadta a kívánt értéket és az egérrel máshova kattint vagy a tabulátor billentyűt megnyomja, akkor a beviteli mező elveszíti a fókuszt, lefut az onchange eseményhez rendelt Javascript függvény. Problémásabb eset viszont, ha az érték megadását követően a felhasználó az enter billentyűt nyomja meg. Ezt a helyzetet a böngészők nem egyformán kezelik le. Az Internet Explorer, ha csak az onchange eseményt figyeljük, nem csinál semmit, mivel az elem még nem veszítette el a fókuszt. A Mozzilla Firefox viszont végrehajtja az onchange eseményhez tartozó kódot, hiszen a felhasználó nyílván azért nyomta meg az enter billentyűt, mert befejezte az adat megadását.

A weboldal akkor tud minden böngészőben azonos módon működni, ha az enter billentyű megnyomása is le van kezelve. A példában az enter megnyomására a fókusz átkerül a másik mezőre, ami a felhasználót is segíti (egy gombnyomást vagy kattintást megspórolunk neki) és a különböző böngészők is egységesen kezelik az oldalt.

Tehát a példa HTML kódja az alábbi módon néz ki:

<div id="example1">
   A derékszögű háromszög egyik befogója:
   <input type="text" size="10"  value="" id="leg1"
       onchange="calculation();"
       onkeydown="focusnext(event, 'leg2');"><br>

   A derékszögű háromszög másik befogója:
   <input type="text" size="10"  value="" id="leg2"
      onchange="calculation();"
      onkeydown="focusnext(event, 'leg1');"><br>

   A háromszög átlója:
   <input type="text" size="10"  value="" id="hypotenuse"
      disabled><br>
</div>

A példához tartozó Javascript függvények:

function calculation() {
   var leg_1, leg_2, hypoten;
   leg_1 = document.getElementById("leg1").value;
   leg_2 = document.getElementById("leg2").value;
   
   hypoten = Math.sqrt(leg_1 * leg_1 + leg_2 * leg_2);
   hypoten = Math.round(hypoten * 10000) / 10000;
   
   document.getElementById("hypotenuse").value = hypoten;
}
function focusnext(keypusheddown, nextfield) {
   var codeofkey;

   if (window.event) {
      codeofkey = window.event.keyCode;
   } else {
      codeofkey = keypusheddown.keyCode;
   }

   if (codeofkey == 13) {
      document.getElementById(nextfield).focus();
   }
}

Mint ahogy a példában is látszik, a billentyű események kezelése a többitől némileg eltérő módon történik, hiszen ilyenkor nem csak az esemény bekövetkezését kell figyelni, hanem a lenyomott billentyűt is meg kell határoznunk. Ez az Internet Explorer régi verzióiban a window.event objektumból olvasható ki, a többi böngészőben pedig az eseményhez rendelt függvény paramétereként érhető el. (Az Explorer újabb verzióiban mindkét módszer működik.)


Tőzsde és technikai elemzés érthetően