Esemény várakoztatása 910.
Másolható és törölhető üzenet
A példában, JavaScript programmal jelenítjük meg az üzenetet.
Vigyük az egeret a következő button gombbok valamelyike fölé, és kattintsunk rá, programunk megjelenít egy tájékoztató vagy figyelmeztető szöveget.
Példa:
A leírást, JavaSript programunk, jelenleg egy <p> címkével behatárolt területen jeleníti meg.
De mindenki, tetszőleges helyen jelenítheti meg!
onClick használatának előnye:
- korlátlan ideig rendelkezésre áll, hogy a megjelenő üzenetet elolvassuk, illetve le is mámásolhatjuk.
- A szöveg megjelenési helyét, és annak stílusát mi határozzuk meg.
| Tartalom | |
| Tartalom | |
| Tartalom | |
| Tartalom | |
| Tartalom | |
| Tartalom |
Program megírása
A JavaScript meghivó utasítást a dokumentum végén helyezzük el!
XHTML fájlban
<body>
<p id="linkuzenet"> </p>
<table width=350px; class="tabla35">
<caption><button id="torol910">Tájékoztató szövegrész törlése!</button></caption>
<tr><td><button id="link1"> Tájékoztató</button></td><td>Tartalom</td></tr>
<tr><td><button id="link2"> Figyelj oda! </button></td><td>Tartalom</td></tr>
<tr><td><button id="link3"> Hibajelzés </button> </td> <td> Tartalom</td></tr>
<tr><td><button id="link4"> Jelölőelemek </button> </td> <td> Tartalom</td></tr>
<tr><td><button id="link5"> Tema2 </button> </td> <td> Tartalom</td></tr>
<tr><td><button id="link6"> Tema3 </button> </td> <td> Tartalom</td></tr>
</table>
<script language="JavaScript" type="text/javascript" src="tajekoztato.js"></script>
</body>
JavaScript tajekoztato.js programunk, külön js fájlban
// Létrehozunk egy változót (d) és az adott területet hozzárendeljük.
var d = document. getElementById ("linkuzenet");
// Készítünk egy egérmutatót figyelő függvényt, mely figyeli azon eseményt (event), mikor ér az egérmutatója a hivatkozás, azaz link területe fölé, és a window.event eseményfigyelőt hozzárendeljuk egy változóhoz, mely a következő elnevezést kapja "e"
function hover (e) {
if (!e) var e = window.event;
// Megállapítása annak, hogy melyik hivatkozás, azaz link elem fölé húztuk az egérmutatót.
hivatkozas = (e.target) ? e.target.id : e.srcElement.id;
// Azon link és a hozzátartozó üzenet kiválasztása, mely felett az egér áll.
if (hivatkozas=="link1") uzenet = "Tetszőleges szöveget, ide írjuk. ";
else if (hivatkozas=="link2") uzenet = "Tetszőleges szöveget, ide írjuk.";
else if (hivatkozas=="link3") uzenet = "Tetszőleges szöveget, ide írjuk.";
else if (hivatkozas=="link4") uzenet = "Tetszőleges szöveget, ide írjuk.";
else if (hivatkozas=="link5") uzenet = "Tetszőleges szöveget, ide írjuk.";
else if (hivatkozas=="link6") uzenet = "Tetszőleges szöveget, ide írjuk.";
else if (hivatkozas=="torol") uzenet = " ";
// A leírás megjelenítése azon területen, melynek kezdő címkéje az id="linkuzenet" egyedi azonosítóval rendelkezik.
d = document.getElementById ("linkuzenet");
d.innerHTML = uzenet;
}
// Az eseménykezelő onclick beállítása, az adott button gombhoz.
// Soreleji változónév tetszőleges lehet, azaz egyértelmű legyen számunkra, melyik hivatkozásra vonatkozik.
torol = document.getElementById ("torol");
torol.onclick=hover;
tema1 = document.getElementById ("link1");
tema1.onclick=hover;
tema2 = document.getElementById ("link2");
tema2.onclick=hover;
tema3 = document.getElementById ("link3");
tema3.onclick=hover;
tema4 = document.getElementById ("link4");
tema4.onclick=hover;
tema5 = document.getElementById ("link5");
tema5.onclick=hover;
tema6 = document.getElementById ("link6");
tema6.onclick=hover;
Az onClick akkor fut le, ha kattintottunk az objektum vagy hivatkozás fölött.
A hover:
A weblapkészítésnél elkészített hivatkozásoknál CSS, azaz stíluslapon történő meghatározásnál, használjuk az a:hover{.......} tulajdonság meghatározást, azaz mi történjen, ha az egérmutató a hivatkozás fölött áll.
Ezt kihasználva, az onMouseOver - hez rendelt változó ezt az elnevezést (hover) kapja, hogy egyértelmű legyen számunkra, milyen esemény történik.
De természetesen, mindenki tetszőleges elnevezést adhat helyette. Például: egeralinkfelett, stb.
Megjegyzés:
Azon területet, azaz objektumot, ahol az esemény bekövetkezett,
Internet Explorer az event.srcElement tulajdonsággal azonosítja be.
Mozilla Firefox és Netscape az event.target tulajdonsággal azonosítja be.
A target (Mozilla):
Azon objektum vagy hivatkozás, azaz link, ahol az esemény bekövetkezett.
Ezen objektumot, a name vagy id azonosító alapján azonosítja be, azaz határozza meg.
Az adott programból származó eredmények megjelenítésére szolgáló ablakot (láthatatlan) határoz meg,
weboldalunk azon helyén, ahol a megfelelő egyedi azonosítóval rendelkezik az adott jelölőelem.
Ez lehet egy űrlapelem name azonosítója, vagy egy szövegrészt jelölő címke id azonosítója.
Az event.srcElement (Explorer):
Azon objektum vagy hivatkozás, azaz link, ahol az esemény bekövetkezett.
Ezen objektumot, a name vagy id azonosító alapján azonosítja be, azaz határozza meg.
Az onMouseOver akkor fut le, ha az egérmutató az objektum, azaz hivatkozás fölé áll.
Az onMouseOut akkor fut le, ha az egérmutató elhagyja az objektum, azaz hivatkozás körvonalait