A javascript események olyan változások, amelyek a weboldalon történnek. Ilyenek lehetnek
- A weboldal betöltődése
- Egér műveletek
- Kattintás egy elemen (click)
- Az egeret egy elem fölé visszük (hover)
- Dupla kattintás az egérrel
- Jobb vagy bal egérgombbal kattintunk
- Billentyűzeten végzett műveletek
- Egy input tag értéke változik
Az esemény bekövetkeztében valamilyen folyamatot elindítunk
- Saját Javascript függvény elindítása
- Előre gyártott folyamatok - effektek - elindítása (keretek megnyitása, összecsukása, zoomolás, áttűnések, stb..)...
- Ajax folyamatok megindítása és kezelése
Hogyan alkalmazzuk az eseménykezelőket?
A jQuery-ben minden eseményhez speciális eseménykezelők vannak hozzárendelve logikusan. Bár ezek a hagyományos javascript módszerrel is kezelhetők, de a jQuery használatával egységesebb és jobban átlátható módunk van a használatukra.
Az eseménykezelők lánca
Amikor egy grafikus felületen valamilyen eseményt generálunk, akkor az ablakozó rendszer - jelen esetben a böngésző - megállapítja az esemény helyét, - melyik HTML tag érintett - és mi az esemény. Ezek alapján a böngésző default eseménykezelőit hívja meg. Abban az esetben, ha saját eseménykezelőt készítünk, akkor az felülírja a default eseménykezelőt.
Az űrlapoknak (FORM) van saját eseménykezelőjük. Ha az űrlapon megnyomjuk a SUBMIT gombot vagy bármelyik BUTTON tag-et, akkor a default eseménykezelő az lesz, hogy a FORM adatait az ACTION tulajdonságban megadott linkre küldi el a böngésző. Gyakori eset, hogy az űrlap adatainak küldése előtt validálni kell a kliens oldalon a bevitt adatokat (Ez persze biztonsági szempontból nem elegendő, de kényelmi szempontból megteszi). Ilyenkor a FORM submit eseménye előtt le kell futnia egy validátornak, és csak az érvényes adatok esetén futhat le az eredeti eseménykezelő.
Leggyakrabban használt eseménykezelők
.click() eseménykezelő
1. példa
Hatására egy tetszőleges TAG-en kattintva lefut egy eseménykezelő.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery css() Demo</title>
<style>
div{
width: 100px;
height: 100px;
display: inline-block;
margin: 10px;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$("div").click(function(){
var color = $(this).css("background-color");
$("#result").html(color);
});
});
</script>
</head>
<body>
<div style="background-color:orange;"></div>
<div style="background-color:#ee82ee;"></div>
<div style="background-color:rgb(139,205,50);"></div>
<div style="background-color:#f00;"></div>
<p>A DIV-re kattintva a háttérszín kódját itt írja ki: <b id="result"></b></p>
</body>
</html>2. példa
Az alábbi példában egy DIV-et mozgatunk el a helyéről véletlenszerűen, ha az egeret a DIV fölé visszük és rákattintunk:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery teszt</title>
<script src="jquery-3.3.1.min.js"></script>
</head>
<body>
<div id="elso">Ez itt egy div</div>
<div id="masodik">Ez itt egy div</div>
<script src="sajat.js"></script>
</body>
</html>A sajat.js így néz ki:
//Minden div legyen ugyanakkora
$("div").width(250);
$("div").height(250);
//Keretezzük be a DIv-eket
$("div").css("border","1px solid red");
//A második <div> objektumát így fogom kezelni
var m = $("#masodik"); //globális változó lett 'm'
m.css("position","absolute");
m.css("width","50%");
m.css("left","150px");
m.css("top","100px");
//Lekérdezem a pozícióját és beállítom valahová fixen
var p = m.position();
var t = p.top;
t += 100;
m.css("top", t +"px");
var l = p.left + 100;
m.css("left",l + "px");
// Létrehozom az m az eseménykezelőjét click() eseményre
m.click( function(){
var p = m.position();
var x = p.left;
x += Math.random()*40-20;
m.css("left", x+"px");
var y = p.top;
y += Math.random()*40-20;
m.css('top',y+'px');
});
.hover() eseménykezelő
A hover két dolgot jelent: Az egeret egy TAG fölé viszi a felhasználó, majd onnan elviszi. Ez azt jelenti, hogy két eseménynek kell lefutnia, egynek akkor, amikor az egeret a TAG fölé visszük és egy másiknak, amikor elvisszük az egeret. Az alábbi példában ha az egeret egy lista elemei fölé visszük, akkor speciális módon elhalványulnak a lista elemek, illetve, megjelennek.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>hover demo</title>
<style>
ul {
margin-left: 20px;
color: blue;
}
li {
cursor: default;
}
span {
color: red;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<ul>
<li>Tej</li>
<li>Kenyér</li>
<li class="fade">Csipsz</li>
<li class="fade">Zokni</li>
</ul>
<script src="hover.js"></script>
</body>
</html>A hover.js tartalma:
$( "li" ).hover(
//Ha fölé viszem az egeret, akkor ez a függvény fut le
function() {
$( this ).append( $( "<span> ***</span>" ) );
},
// Ha elviszem az egeret, akkor ez a függvény fut le
function() {
$( this ).find( "span" ).last().remove();
}
);
//elhalványul az menüpont
$( "li.fade" ).hover( function() { $( this ).fadeOut( 100 );
$( this ).fadeIn( 500 );
});
.change() eseménykezelő
Egy beviteli mező értékének az ellenőrzése, amely kötelezően kitöltendő. Az esemény az change:
<!doctype html>
<html lang="hu">
<head>
<meta charset="UTF-8">
<title>jQuery teszt</title>
<script src="jquery-3.3.1.min.js"></script>
</head>
<body>
<form>
<input id="be" title="beviteli mező", value="" type="text" name="be">
<span id="kotelezo"></span>
<input id="ok" type="submit" name="ok" value="ok">
</form>
<script src="ellenorzes.js"></script>
</body>
</html>A ellenorzes.js tartalma az alábbi:
$(document).ready(function(){
$("#be").change( function(){
//változóba teszem a SPAN objektumot
var k = $("#kotelezo");
// A beviteli mező értékét lekérem
var v = $(this).val();
//vizsgálom a mezőben lévő string hosszát
if ( v.length <1){
k.html("A mező kötelezően kitöltendő!");
k.css("color","red");
$(this).css("border","1px solid red");
}else{
k.html("");
k.css("color","black");
$(this).css("border","none");
}
});
});A fenti kód nem ellenőrzi le azt az esetet, amikor a weboldalon a fókusz nem kerül a beviteli mezőre és úgy küldik el az űrlapot. Hogy ez is működjön, kell még egy eseménykezelőt írni arra is, hogy a submit gomb megnyomása esetén is ellenőrizze a beviteli mező állapotát.
.submit() eseménykezelő
Amikor egy űrlap van a weboldalon, akkor gyakran többféle eseménykezelőt is kell írni, amely validálja az oldalon lévő és bevitt adatokat. mint korábban írtam ezek az eseménykezelők nem védenek meg a rosszindulatú kódtól, de a felhasználókat kényelmi szempontból kiszolgálják. Ha egy űrlap küldése előtt ellenőrzéseket akarunk végrehajtatni, az ellenőrzés eredménye kétféle lehet: sikeres, sikertelen vagy másképpen validálva, nem validálva.
Ha az adatok nem érvényesek, akkor az eseménykezelő függvényben megadott esemény (event) objektumban le kell tiltani az alapértelmezett submit esemény meghívását, amit az esemeny.preventDefault(); utasítással tudunk megtenni.
Ha az adatok érvényesek, tehát az űrlapot tényleg el akarjuk küldeni, akkor a függvénynek lennie kell visszatérési értékének retur; utasítással. ekkor a függvény lefutása után automatikusan meghívja a default eseménykezelőt.
A javított ellenorzes.js az alábbi lehet:
$(document).ready(function(){
$("#be").change( function(){
//változóba teszem a SPAN objektumot
var k = $("#kotelezo");
// A beviteli mező értékét lekérem
var v = $(this).val();
//vizsgálom a mezőben lévő string hosszát
if ( v.length <1){
k.css("color","red");
$(this).css("border","1px solid red");
} else {
k.css("color","green");
$(this).css("border","none");
// A Span megjelenik és 2 sec alatt elhalványul
k.text("Ellenőrizve...").show().fadeOut(2000);
}
});
//A FORM submit gomb eseménykezelője
$( "form").submit( function( event ){
var v = $("#kotelezo").val();
if ( v.length <1){
k.css("color","red");
$(this).css("border","1px solid red");
k.text("A mező kötelezően kitöltendő!").show().fadeOut(2000);
// Ez a sor akadályozza meg, hogy az űrlapot elküldje a felhasználó
event.preventDefault();
} else {
k.css("color","green");
$(this).css("border","none");
k.text("Ellenőrizve...").show().fadeOut(1000);
// Ennek hatására lefut az alapértelmezett eseménykezelő: az űrlapot elküldi a kód
return;
}
});
});A böngésző további eseménykezelői
.error() - lefut, ha a javascript hibára fut
//Egy képet nem tud betölteni a böngésző, mert hiányzik, akkor betölt egy másik képet...
$( "img" ) .error(function() {
$( this ).attr( "src", "replacement.png" );
}) .attr( "src", "missing.png" );.resize() - lefut, ha a böngészőablakot átméretezzük
$( window ).resize(function() {
$( "body" ).prepend( "<div>" + $( window ).width() + "</div>" );
});.scroll() - Ha a böngészőablakot vagy egy részt scrolloztatjuk az egérrel
A dokumentum eseményei
.load() - amikor egy weboldal betöltődik, akkor fut le.
$( window ).load(function() {
// Run code
});.unload() - mikor egy weboldalt bezárunk
.keypress() - Billentyűzet esemény - lenyomtunk egy billentyűt.
Form események
.change() - ez már volt
.focus() - ha egy beviteli mezőre rákerül a fókusz.
Próbáljuk ki egy beviteli űrlapon, hogyan lehet beállítani, hogyha egy beviteli mezőre fókusz kerül, akkor 2 pixel vastag szürke, lekerekített sarkú keret kerüljön köré
.blur() - ha egy elemről elkerül a fókusz
A fenti eseménykezelőhöz hasonlóan ha a fókusz átkerül máshová, akkor a keretet le lehet szedni.