jQuery target és timeStamp
event.target.nodeName Visszatér azzal a DOM jelölőelemmel, amely kiváltotta az eseményt. Kiválaszthatunk megfigyelésre egy, vagy akár több jelölőelemet is. event.Type: Visszatér az esemény típusával: click; dblclick; mouseover; mouseout; event.currentTarget Kiválasztot elem tartalma, mely a html fájlban megírtak alapján jelenik. event.delegateTarget Esemény típusa, eseményt kiváltó elem típusa. event.relatedTarget Lehet használni elemnél történő esemény jelzésére. Milyen típusú elem területéről lépett ki, mouseover. Milyen típusú elem területére lépett be, mouseout. event.timeStamp Visszatérési értéke ezredmásodpercben. 1970 január 1-óta eltelt idő. Felhasználhatjuk két kattintás között eltelt idő, lekérdezésére is.
event.target.nodeName
Megmutatja, hogy az esemény, milyen HTML jelölőelemek között történt.
Esemény figyelése, azon HTML jelölőelemekre vonatkozik, melyeket a scriptben meghatároztunk.
<head>
<script>
// $("p, button, h1, h2, h3, h4, h5, h6") // Szelektort így határozzuk meg, akkor minden beírt jelölőelemre érvényes.
// Következő rész, egy meghatározott <div id="evTname"> területén lévő, elemekre vonatkozik.
$("#evTname > p, #evTname > button, #evTname > h5, #evTname > input").click(function(event){
$("#etarget").html("Kattintási esemény, " + event.target.nodeName + " elemmel kijelölt területen történt.");
});
</script>
</head>
<body>
<div id="evTname">
<h5>Ez egy h5-ös címsor.</h5>
<p>Ez egy normál bekezdés.</p>
<p><strong><u>Ez egy kiemelt és aláhúzott bekezdés.</u></strong></p>
<p><u><strong>Ez egy aláhúzott és kiemelt bekezdés.</strong></u></p>
<button>Ez egy button gomb</button>
<input type="text" value="Ez egy inputmező"/>
<p>Következő egy teszt szövegsor, különböző területén kattintsunk, és figyeljük meg, mi történik.</p>
<p>Teszt szövegsor, <u>itt aláhúzott,</u> <strong>itt kiemelt,</strong> itt normal, <em>itt dőlt.</em> <br /><span>kijelölt szövegrész</span></p>
<h6><u>Esemény bekövetkezése:</u><br /> <span id="etarget"></span></h6>
</div>
</body>
|
Kattints a szövegsorokra! Eredmény, e területet követően látható!
<h5>Ez egy h5-ös címsor.</h5><p>Ez egy normál bekezdés.</p> <p><strong><u>Ez egy kiemelt és aláhúzott bekezdés.</u></strong></p> <p><u><strong>Ez egy aláhúzott és kiemelt bekezdés.</strong></u></p> -----------Következő teszt szövegsor, tartalmaz normál, aláhúzott, kihangsúlyozott, dőlt, és kiemelt szöveget is. <p>Teszt szövegsor, <u> itt aláhúzott,</u> <strong>itt kiemelt,</strong> itt normal, <em>itt dőlt.</em> <br /> Esemény bekövetkezése: |
event.type.
Meghatározza az esemény típusát: click; dblclick; mouseover; mouseout;
<head>
<script>
$("#evT>p").on("click dblclick mouseover mouseout", function(event){
$("#etype").html("Event: " + event.type);
});
</script>
</head>
<body>
<div id="evT">
<p>1. Mozgasd az egérkurzort valamelyik elem fölé.</p><br />
<p>2. Kattints az elemre egyszer, ezt követően kétszer.</p><br />
<p>3. Végezetül, mozgasd el fölüle az egérkurzort.</p>
<h6><u>event.type Esemény típusa:</u> <span id="etype"></span></h6>
</div>
</body>
|
1. Mozgasd az egérkurzort valamelyik elem fölé. 2. Kattints az elemre egyszer, ezt követően kétszer. 3. Végezetül, mozgasd el fölüle az egérkurzort. event.type Esemény típusa: |
event.currentTarget
Visszaadja kiválasztott elem vagy elemek, HTML fájlban megírt tartalmát.
<head>
<script>
// Kiválasztott <div id="currenT"> elem területén lévő, kiválasztott elemekre vonatkozik.
$("#currenT > p, #currenT > h2").click(function(event){
alert(event.currentTarget.innerHTML);
});
</script>
</head>
<body>
<div id="currenT">
Teszteléshez, kattints a szövegsorokon, és azok különböző területén!
<h2>Ez egy h2-es címsor.</h2>
<p><b>Bekezdés.<br />Programunk kiírja azon elem HTML tartalmát, melyre kattintunk.</b></p>
<p>Ez egy normál bekezdés.</p>
<p><strong>Ez egy kiemelt bekezdés.</strong></p>
<p>Teszt szövegsor, mely több elemet is tartalmaz, <u>ez aláhúzott,</u> <strong>ez kiemelt,</strong> ez normal, <em>ez dőlt</em> <br />
<span class="sargah">ez, kijelölt szövegrész.</span></p>
</div>
</body>
| |
Teszteléshez, kattints a szövegsorokon! Ez egy h2-es címsor.Bekezdés. Ez egy normál bekezdés. Ez egy kiemelt bekezdés. Teszt szövegsor, mely több elemet is tartalmaz, ez aláhúzott, ez kiemelt, ez normal, ez dőlt |
event.relatedTarget
Használhatjuk a mouseover, vagy pedig a mouseout esemény jelzésére(figyelésére).
<head>
<script>
function ehhezKapcsolodoElemrol(event) {
alert("Kurzor, a " + event.relatedTarget.tagName +
" elem területéről lépett be,\n a span elem területére.");
}
</script>
</head>
<body>
Teszteléshez lépjünk be, a kijelölt területre.<p> Mouse over </body> |
<head>
<script>
function KapcsolodoElemrol(event) {
alert("Kurzor a " + event.relatedTarget.tagName +
" elem területéről lépett be,\n a p elem területére.");
}
</script>
</head>
<body>
Teszteléshez lépjünk be, a kijelölt területre.<p> Mouse over |
<head>
<script>
function ehhezKapcsolodoElemre(event) {
alert("Kurzor kilépett p elem területéről,\n a " + event.relatedTarget.tagName + " elem területére.");
}
</script>
</head>
<body>
Teszteléshez, jobbról és balról is lépjünk ki.<p onmouseout="ehhezKapcsolodoElemre(event)"> | |
1. event.delegateTarget
<head> <script type="text/javascript"> // 1.Példa: ------------------------------------------------------------------------ $("#divtarget").on("click", "#btntarget", function(event){ $(event.delegateTarget).css("background-color", "yellow"); }); // 2.Példa: ------------------------------------------------------------------------ $("#divtarget").on("click", "#btntarget02", function(event){ var delegacio=$(event.delegateTarget); delegacio.css("background-color", "yellow"); tipusa= event.type; neve=event.target.nodeName; var now = new Date(); ido=now.getHours()+" óra "+now.getMinutes()+" perc "+now.getSeconds()+" másodperc"; alert("Eseményt típusa: "+ tipusa + "\nEseményt kiváltó elem: "+ neve + "\nKattintási időpont: "+ido); }); </script> </head> <body> <div id="divtarget" style="background-color:pink;"> <button id="btntarget">1. Példa. event.delegateTarget<br /> Kattints ide!</button> <button id="btntarget02">2. Példa. event.delegateTarget<br /> Kattints ide!</button> </div> </body> |
event.delegateTarget = event.currentTarget.
<head>
<script>
$(document).ready(function(){
$("#btntarget03").on("click", function(event){
alert("A delegateTarget és currentTarget egyenlő, a közvetlenül meghatározott eseménykezelőnél. \n delegateTarget visszarérése: "
+ event.delegateTarget.nodeName +"\n currentTarget visszatérése: " + event.currentTarget.nodeName);
});
});
</script>
</head>
<body>
<div style="width:60%; background-color:lightblue;">
<button id="btntarget03">event.delegateTarget.nodeName<br />event.currentTarget.nodeName<br /> Katt ide.</button>
</div>
</body>
|
event.timeStamp (Időpont)
Visszaadja milliszekundumokban 1970 január 1-től, a kiváltó események között eltelt időpontját.
<head>
<script>
$(document).ready(function(){
var elsoms, d; // elsoms = Tetszőleges változónév is lehet, mely az első kattintáskori időt tárolja, miliszekundumokban.
$("#btnido").click(function(event){
if (elsoms){
c = event.timeStamp;
d = event.timeStamp - elsoms;
$("#eido").html("1970 január 1-től: " + c +"<br /> Utolsó kattintási esemény óta: " + d);
}
else {
$("#eido").text(" Újból kattints a button gombra.");
}
elsoms = event.timeStamp;
});
});
</script>
</head>
<body>
<button id="btnido">Időpont <br />event.timeStamp<br /> Katt ide egyszer, majd mégegyszer, vagy többször is.</button>
<h5 class="sargah">Események között, eltelt miliszekundumok:<br /> <span id="eido"></span></h5>
</body>
Események között, eltelt miliszekundumok:
|