jQuery trigger() és triggerHandler()
trigger Aktivál, aktiválás. Valamilyen esemény külső aktíválása.
Például: Egy esemény bekövetkezésekor, meghívja (aktíválja) előző eseményt, függvényt, és módosíthatja azt.
Eseményhez (event) kötött függvény meghívása, külső paraméter vagy paraméterek átadásával.
Egy kiválasztott elemre vonatkozóan, a trigger() és triggerHandler() metódus között, semmi eltérés.
Ha több testvérelemre (<p>, <input, stb.), vagy class osztályazonosítóval rendelkező elemekre alkalmazzuk e metódusokat,
akkor megfigyelhetjük az eltéréseket.
A trigger() metódus elindítja a megadott eseményt.
Alapértelmezés szerint, egy eseményt a kijelölt elemeknél.(Például egy űrlap kitöltése).
Ez a módszer hasonló a triggerHandler() módszerhez, kivéve, hogy triggerHandler() nem indítja az alapértelmezett viselkedési eseményt.
A triggerHandler() metódus elindítja a megadott eseményt, a kiválasztott elemnél.
Nem indítja az alapértelmezett viselkedési eseményt.
Ez a módszer hasonló a trigger() módszerhez, kivéve, hogy a trigger() kiváltja az alapértelmezett viselkedést, egy eseményt (például egy űrlap kitöltése).
trigger() és triggerHandler() Példák.
Kiválasztott egyedi azonosítóval rendelkező elemhez, hozzárendelünk egy tetszőleges elnevezésű függvényt, mely meghatározott feladatot hajt végre, a trigger által átadott paraméterekkel.
Eredményt, megjeleníthetjük egy másik kiválasztott egyedi azonosítóval rendelkező elem területén is.
Megjegyzés:
A trigger milyen eseményre aktiválódjon, a program készítője határozza meg.
Példánkban, a kiválasztott button gombokra történő kattintási eseményre, aktiválódik.
<head>
<script>
$(document).ready(function(){
// A mat nevű functiont, hozzárendeljük az id="szamtan" azonosítóval rendelkező elemhez.
$("#szamtan").on("mat", function(event, a, b){
var c=a*b;
$("#ertek").append(' '+c);
});
// --------------------------------------------------------------------------------------------------------------------------------
// A mat nevű functionnak, tetszőleges számű trigger metódus adhat át, paramétereket.
$("#trig01").click(function(){
$("#szamtan").trigger("mat", [5, 4]);
});
// --------------------------------------------------------
$("#trig02").click(function(){
$("#szamtan").trigger("mat", [10, 4]);
});
// --------------------------------------------------------
$("#trig03").click(function(){
$("#szamtan").trigger("mat", [10, 10]);
});
// --------------------------------------------------------------------------------------------------------------------------------
// triggerHandler. A mat nevű functionnak, tetszőleges számű triggerHandler metódus adhat át, paramétereket.
$("#trigHand01").click(function(){
$("#szamtan").triggerHandler("mat", [5, 4]);
});
// --------------------------------------------------------
$("#trigHand02").click(function(){
$("#szamtan").triggerHandler("mat", [10, 4]);
});
// --------------------------------------------------------
$("#trigHand03").click(function(){
$("#szamtan").triggerHandler("mat", [10, 10]);
});
});
</script>
</head>
<body>
<p id="szamtan">Ez lesz az a kiválasztott elem, melyhez a funkciót rendeljük.</p>
<!-- Következő <p id="ertek" elem lesz az a kiválasztott elem, mely területén megjelenik az eredmény. -->
<p id="ertek"><b>Eredmény: </b></p>
</body>
|
|
Eredmény: |
Több elemre, példa.
Több testvérelemre, vagy class osztályazonosítóval rendelkező elemeknél.
<head>
<script>
$(document).ready(function(){
// A adatok nevű functiont rendeljük, minden class="alma" azonosítóval rendelkező elemhez.
$(".alma").on("adatok", function(event, a, b){
$(".alma").append(" "+a+" "+b+"; ");
});
// trigger. -------------------------------------------------------------------------------------------
$("#tr01").click(function(){
$(".alma").trigger("adatok", ["trigger", 1]);
});
// --------------------------------------------------------
$("#tr02").click(function(){
$(".alma").trigger("adatok", ["trigger", 2]);
});
// --------------------------------------------------------
$("#tr03").click(function(){
$(".alma").trigger("adatok", ["trigger", 3]);
});
// triggerHandler. -------------------------------------------------------------------------------------
$("#trH01").click(function(){
$(".alma").triggerHandler("adatok", ["triggerHandler", 1]);
});
// --------------------------------------------------------
$("#trH02").click(function(){
$(".alma").triggerHandler("adatok", ["triggerHandler", 2]);
});
// --------------------------------------------------------
$("#trH03").click(function(){
$(".alma").triggerHandler("adatok", ["triggerHandler", 3]);
});
});
</script>
</head>
<body>
<!-- Kiválasztott elemek, melyekhez a funkciót rendeljük, és eredmény is ezeknél jelenik meg. -->
<p class="alma">1. p elem: </p>
<p class="alma">2. p elem: </p>
<p class="alma">3. p elem: </p>
</body>
|
|
1. p elem: 2. p elem: 3. p elem: |
Input elemknél, trigger() és triggerHandler()
1. Példa.
<head>
<script>
$(document).ready(function(){
// ------------------------------------------------------------
$("#form01>input").select(function(){
$("input").after(" Kiemelt szöveg!");
});
// ------------------------------------------------------------
$("#btn1").click(function(){
$("input").trigger("select");
});
// ------------------------------------------------------------
$("#btn2").click(function(){
$("input").triggerHandler("select");
});
// ------------------------------------------------------------
});
</script>
</head>
<body>
<form name="form01" id="form01">
<input type="text" value="Hello World"><br />
<input type="text" value="Hello World"><br />
<input type="text" value="Hello World">
</form>
<button id="btn1">trigger()</button>
<button id="btn2">triggerHandler()</button>
Elsőként jelöld ki, valamelyik mező teljes szövegét, vagy egy részét. |
2. Példa.
<head>
<script>
$(document).ready(function(){
// ------------------------------------------------------------
$("#form02>input").select(function(){
$(this).after(" Kiemelt szöveg!");
});
// ------------------------------------------------------------
$("#btn3").click(function(){
$("#form02>input").trigger("select");
});
// ------------------------------------------------------------
$("#btn4").click(function(){
$("#form02>input").triggerHandler("select");
});
// ------------------------------------------------------------
});
</script>
</head>
<body>
<form name="form02" id="form02">
<input type="text" value="Hello World"><br />
<input type="text" value="Hello World"><br />
<input type="text" value="Hello World">
</form>
<button id="btn3">trigger()</button>
<button id="btn4">triggerHandler()</button>
Elsőként jelöld ki, valamelyik mező teljes szövegét, vagy egy részét. |
További példák.
Szöveg (string) paraméterek átadása.
<head>
<script>
$(document).ready(function(){
$("#p01pelda").click(function(){
$("#p01pelda").on("sajatParameterek", function(event, parameter1, parameter2, parameter3){
alert(parameter1 + "\n" + parameter2 + "\n" + parameter3);
});
$("#p01pelda").trigger("sajatParameterek", [ 'Ezek', 'Együttesen', 'Parameterek' ] );
});
});
</script>
</head>
<body>
<div>
<p id="p01pelda"> Kattints ide, és láthatod az átadott paramétereket.</p>
</div>
</body>
trigger() Kattints ide, és láthatod az átadott paramétereket. |
<head>
<script>
$(document).ready(function(){
$("#p01tH").click(function(){
$("#p01tH").on("Parameterek", function(event, p1, p2, p3){
alert(p1 + "\n" + p2 + "\n" + p3);
});
$("#p01tH").triggerHandler("Parameterek", [ 'Általam meghatározott', 'Paraméter', 'Értékek' ] );
});
});
</script>
</head>
<body>
<div>
<p id="p01tH"> Kattints ide, és láthatod az átadott paramétereket.</p>
</div>
</body>
triggerHandler() Kattints ide, és láthatod az átadott paramétereket. |