jQuery on(), one(), off() módszerek.
on() Elemekhez, eseménykezelőt / eseménykezelőket csatol. ( Lásd a bind() mtódust is. ) Több eseményt csatolunk, akkor azokat, szóközzel kell elválasztani. $( selector ).on( event,childSelector,data,function,map ) one() Elemekhez, eseménykezelőt / eseménykezelőket csatol úgy, hogy azok csak egyszer aktiválódnak. (Hajtódnak végre.). Több eseményt csatolunk, akkor azokat, szóközzel kell elválasztani. $( selector ).one( event,data,function ) off() Eltávolítja az elemhez csatolt eseménykezelőt / eseménykezelőket. ( Lásd az unbind() mtódus is. ) Több eseményt csatolunk, akkor azokat, szóközzel kell elválasztani. $( selector ).off( event,selector,function(eventObj),map )
A jQuery 1.7-es verziótól kezdve:
on() metódus használata ajánlott a következő módszerek helyett: bind(), live(), és delegate().
off() metódus használata ajánlott a következő módszerek helyett: unbind(), die(), és undelegate().
Választhatunk, hogy esemény mely területre vonatkozzon:
Egy vagy több html jelölőelemet határozunk meg, akkor az oldalon található testvérelemre érvényes.
Például: $("p") Ez minden p elemre vonatkozik.
Meghatározzuk kiválasztott elem vagy elemek mely azonosítóval rendelkező területen vannak, akkor csak az adott területen található kiválasztott elemekre érvényes.
Például: $("#terulet > p") Ez csak a kiválasztott területen található, minden p elemre vonatkozik.
on() példa
Példa, hogyan lehet elérni ugyanazt a hatást a on() és bind() metódussal.
$(document).ready(function(){
$("#div1").on("click", function(){
$(this).css("background-color", "pink");
});
$("#div2").bind("click", function(){
$(this).css("background-color", "pink");
});
});
| |
|
on() metódus.
<div id="div1" style="border:1px solid black;">
<p>Kattints a div tetszőleges területén, és megváltozik a háttérszín.</p> </div> |
bind() metódus.
<div id="div2" style="border:1px solid black;">
<p>Kattints a div tetszőleges területén, és megváltozik a háttérszín.</p> </div> |
on() és one() példa.
Kiválasztott elemhez vagy elemekhez eseményt vagy eseményeket csatól:
on() metódus úgy, hogy ezek az események, többször is végrehajtódnak.
one() metódus úgy, hogy ezek az események, csak egyszer hajtódnak végre.
on() példa:
$(document).ready(function(){
$("#onp > p").on("click dblclick", function(){
$(this).animate({fontSize: "+=4px"});
});
});
<div id="onp">
<p>Ez egy bekezdés. Minden meghatározott esemény "click vagy dblclick", többször is, végrehajtódik.</p> <p>Eseménykezelőket indít többször is, elemenként. Jelenleg meghatározott esemény típusok (on click, és on dblclick).</p> <p>Ez egy másik bekezdés. Kattins egyszer vagy duplán valamelyik p elemre. Betűméret növekedni fog.</p> </div> |
one() példa:
$(document).ready(function(){
$("#onep > p").one("click dblclick", function(){
$(this).animate({fontSize: "+=6px"});
});
});
<div id="onep">
<p>Ez egy bekezdés. Minden meghatározott esemény "click vagy dblclick", csak egyszer hajtódik végre.</p> <p>Eseménykezelőket indít egyszer, elemenként. Jelenleg meghatározott esemény típusok (one click, és one dblclick). <p>Ez egy másik bekezdés. Elsőre kattins egyszer valamelyik p elemre, majd duplán. Betűméret növekedni fog.</p> </div> |
off() példa
Hogyan lehet elérni ugyanazt a hatást off() vagy unbind() használatával.
Példa:
1. Meghatározunk egy click eseményt, az id="offp" azonosítóval rendelkező elem területén található, minden p elemre.
2. Majd a click eseményt visszavonjuk (senlegesítjük):
- Elsőként az off()metódussal, melyet az id="btn1" azonosítóval rendelkező button gomb aktívál.
- Másodikkén az unbind()metódussal, melyet az id="btn2" azonosítóval rendelkező button gomb aktívál.
$(document).ready(function(){
$("#offp > p").click(function(){
$(this).css("background-color", "pink");
});
$("#btn1").click(function(){
$("#offp > p").off();
});
$("#btn2").click(function(){
$("#offp > p").unbind();
});
});
<div id="offp">
<p>Kattints valamelyik bekezdésre, és megváltozik a háttérszíne.</p> <p>Újabb teszt elvégzéséhez, mindig frissíteni kell az oldalt!</p> <p>Kattints valamelyik alábbi button gombra, majd kattints erre a bekezdésre. A kattintási esemény eltávolításra kerül, és hatástalan lesz.</p> </div><button id="btn1">off() metódussal, eltávolítjuk, a fenti click eseményt.</button> <button id="btn2">unbind() metódussal, eltávolítjuk, a fenti click eseményt.</button> |
A jQuery 1.7-es verziótól kezdve:
on() metódus használata ajánlott a következő módszerek helyett: bind(), live(), és delegate().
off() metódus használata ajánlott a következő módszerek helyett: unbind(), die(), és undelegate().
$(document).ready(function(){
// Átállás bind() metódusról, on() metódusra.
$("#onbind01").on("click", function(){
$(this).css("background-color", "pink");
});
$("#onbind02").bind("click", function(){
$(this).css("background-color", "pink");
});
// Átállás delegate() metódusról, on() metódusra.
$("#ondelegate01").on("click" ,"p", function(){
$(this).css("background-color", "pink");
});
$("#ondelegate02").delegate("p", "click", function(){
$(this).css("background-color", "pink");
});
// Átállás live() metódusról, on() metódusra.
$("#onlive01").on("click", function(){
$(this).css("background-color", "pink");
});
$("#onlive02").live("click", function(){
$(this).css("background-color", "pink");
});
});
|
Átállás bind() metódusról, on() metódusra. on() metódus. Kattints ide! bind() metódus. Kattints ide! Átállás delegate() metódusról, on() metódusra. on() metódus. Kattints ide! delegate() metódus. Kattints ide! Átállás live() metódusról, az on() metódusra. on() metódus. Kattints ide! live() metódus. Kattints ide! |
További példák.
|
Esemény, mely területeken lévő kiválasztott elemekre vonatkozik, a szelektorral határozzuk meg. Például: $("body").on("click", "p", eseménye); Ez a body területén lévő összes p elemre érvényes. $("#terulet").on("click", "p", eseménye); Csak az id="terulet" azonosítóval rendelkező elem területén lévő, összes p elemre érvényes. $(".terulet").on("click", "p", eseménye); Minden class="terulet" azonosítóval rendelkező elemek területén lévő, összes p elemre érvényes. Hatástalanítása click eseményeknek, melyek a kiválasztott elmre, on() metódussal rakódtak. Hogyan lehet eltávolítani kattintási eseménykezelővel, minden <p> elemre rakódott, on()metódust. Hogyan lehet eltávolítani kattintási eseménykezelővel, egy adott funkciót, mely minden <p> elemre rakódott, on()metódussal.
<head>
<script>
function changeSize() { $(this).animate({fontSize: "+=3px"}); }
function changeSpacing() { $(this).animate({letterSpacing: "+=2px"}); }
$(document).ready(function(){
$("body").on("click", "p", changeSize);
$("body").on("click", "p", changeSpacing);
// Minden click esemény eltávolítása. Kattintási eseménykezelővel.
$("#bodibutton").click(function(){
$("body").off("click", "p");
});
// Csak a changeSpacing click esemény eltávolítása. Kattintási eseménykezelővel.
$("#bodibutton02").click(function(){
$("body").off("click", "p", changeSpacing);
});
});
</script>
</head>
<body>
<p>Ez egy p elem tartalma (bekezdése). Kattints ide! </p> <p>Ez egy másik p elem tartalma (bekezdése). Kattints ide! </p> <p>Kattintsunk minden p elemen, megnöveli betűk méretét és távolságát.</p> <----- Vagy, kattints ide! -----> |