Űrlap események. Űrlap események További információ az eseménnyel kapcsolatban

Az utolsó témakörben a billentyűk lenyomásakor bekövetkező eseményeket vettük figyelembe. Ebben a témában más formai eseményeket is megvizsgálunk. Beleértve az űrlap elküldését a szervernek.

Elem a fókuszban

Amikor az űrlapelem fókuszba kerül, a fókusz esemény aktiválódik, és amikor az űrlapelem életlen lesz, az elhomályosítási esemény aktiválódik. Hozzunk létre egy beviteli mezőt, és nyomtassuk ki a szöveget a konzolra, amikor fókuszba kerül, és amikor kilép a fókuszból:

HTML kód:

Nincs értelme ezeket az eseményeket egy elem stílusának megváltoztatására használni. Erre a CSS-ben van egy fókuszált pszeudoosztály.

Érték megadása

bemeneti esemény akkor fordul elő, amikor a felhasználó szöveget ír be egy beviteli mezőbe. Akkor aktiválódik, amikor minden egyes karaktert hozzáadunk vagy eltávolítunk, és amikor szöveget másolunk egy beviteli mezőbe. Egyes böngészőkben szokatlanul működik: minden alkalommal, amikor beírunk egy karaktert, egy elmosódási esemény indul, majd a bemeneti eseménykezelő végrehajtásra kerül, majd a fókusz esemény. Ha nincsenek fókusz- és elmosódás-kezelők, akkor ez nem probléma. De ha igen, akkor minden karakter hozzáadásakor működni fognak.

Adjon hozzá egy másik címkét az oldalhoz és megjeleníti az értékét szöveg beírásakor:

HTML kód:

JavaScript:

28
29
30
31
32

var newv = document.getElementById("új_érték"); newv.onchange = function () ( console.log("Az érték a következőre módosult: "+newv.value); );

Űrlap beküldése

A küldés esemény akkor aktiválódik, amikor az űrlap elküldésre kerül a kiszolgálónak. A felhasználó által az űrlapon megadott adatok érvényesítésére szolgál. A kezelőben ellenőrzik az űrlapelemek értékeit, és ha az értékeket hibásan adják meg, akkor az űrlap törlődik. Ez általában egy üzenetet eredményez, amely jelzi, hogy mit kell javítani.

Helyezze el a létrehozott címkéket az űrlapon, és add hozzá az űrlap elküldése gombot:

HTML kód:

Az előző példákban az űrlapelemeket már megtaláltuk, így a kezelő nem keres újra.

Ha az űrlap helyesen van kitöltve, azaz minden mezőben legalább két karakter szerepel, akkor a böngésző megpróbálja futtatni az action attribútumban megadott fájlt, és hiba történik, mert nincs ilyen fájl. De ebben nincs kockázat, így nem kell félni a script működésének ellenőrzésétől. Ha az egyik mezőben kettőnél kevesebb karakter van beírva, egy üzenet jelenik meg, és a küldés megszakad. Ha sok csekk van, akkor minden csekknél megjelenítheti saját üzenetét, és törölheti az űrlap beküldését.

Az bemenet esemény akkor aktiválódik, amikor egy elem értékét interaktív vezérlőelemek létrehozására használják webalapú űrlapokhoz, hogy adatokat fogadjanak el a felhasználótól; a bemeneti adatok és vezérlő widgetek széles választéka áll rendelkezésre, az eszköztől és a felhasználói ügynöktől függően. "> , elem egy vezérlőelemet jelent, amely opciók menüjét> biztosítja elem megváltozott.</p> <table class="properties"><tbody><tr><th scope="row">Buborékok</th> <td>Igen</td> </tr><tr><th scope="row">Lemondható</th> <td>nem</td> </tr><tr><th scope="row">Felület</th> <td>bemeneti esemény</td> </tr><tr><th scope="row">eseménykezelő tulajdonság</th> <td>GlobalEventHandlers.oninput</td> </tr></tbody></table><h3>HTML</h3> <input placeholder="Írjon be egy szöveget" name="name"/> <h3>JavaScript</h3>const input = document.querySelector("input"); const log = document.getElementById("értékek"); input.addEventListener("input", updateValue); függvény updateValue(e) ( log.textContent = e.target.value; ) <h3>eredmény</h3> <h2>Műszaki adatok</h2> <table class="standard-table"><tr><th scope="col">Leírás</th> <th scope="col">Állapot</th> </tr><tbody><tr><td>HTML Living Standard <br> </td> <td>Életszínvonal</td> </tr><tr><td>Dokumentumobjektum-modell (DOM) 3. szintű eseményspecifikációja <br>A "bemeneti esemény" meghatározása a specifikációban.</td> <td>Elavult</td> </tr></tbody></table><h2>Böngésző kompatibilitás</h2> <p>Az ezen az oldalon található kompatibilitási táblázat strukturált adatokból jön létre. Ha hozzá szeretne járulni az adatokhoz, kérjük, nézze meg a https://github.com/mdn/browser-compat-data webhelyet, és küldjön lehívási kérelmet.</p> <p>Frissítse a kompatibilitási adatokat a GitHubon</p><table class="bc-table bc-table-web"><tr class="bc-platforms"><td> </td><th class="bc-platform-desktop" colspan="6">Asztali</th><th class="bc-platform-mobile" colspan="6">Mobil</th> </tr><tr class="bc-browsers"><td> </td><th class="bc-browser-chrome">Króm</th><th class="bc-browser-edge">él</th><th class="bc-browser-firefox">Firefox</th><th class="bc-browser-ie">internet böngésző</th><th class="bc-browser-opera">Opera</th><th class="bc-browser-safari">szafari</th><th class="bc-browser-webview_android">android webview</th><th class="bc-browser-chrome_android">Chrome Androidra</th><th class="bc-browser-firefox_android">Firefox Androidra</th><th class="bc-browser-opera_android">Opera Androidra</th><th class="bc-browser-safari_ios">Safari iOS rendszeren</th><th class="bc-browser-samsunginternet_android">Samsung internet</th> </tr><tbody><tr><th scope="row">bemeneti esemény</th><td class="bc-supports-yes bc-browser-chrome">Chrome Teljes támogatás Igen</td><td class="bc-supports-yes bc-browser-edge bc-has-history">Edge Teljes támogatás 79 Teljes támogatás 79 Nincs támogatás 12–79 <p>jegyzetek <i> </i></p> jegyzetek <i> </i> Nem támogatott a kiválasztott , jelölőnégyzet vagy rádióbemeneteknél.</td><td class="bc-supports-yes bc-browser-firefox">Firefox Teljes támogatásIgen</td><td class="bc-supports-partial bc-browser-ie bc-has-history">IE Részleges támogatás 9</td></tr></tbody></table> <p><i>Ebben a cikkben megvizsgáljuk azokat a módszereket, amelyeket a jQuery könyvtár biztosít a webfejlesztőknek az események kezelésére.</i></p> <p>Az események forgatókönyvekben történő kezelése <a href="https://remzhuk.ru/hu/kak-vklyuchit-yazyk-javascript-kak-vklyuchit-javascript-v-brauzere-instrukciya-dlya-vseh/">JavaScript böngésző</a> API-t biztosít (például az addEventListener függvényt). Ezzel a funkcióval megadhatja, hogy milyen kódot kell végrehajtani, amikor a megadott elemhez tartozó böngésző generálja a megadott eseményt.</p> <h2>Események kezelése jQuery módszerekkel</h2>a függvény szintaxisáról <p>Mielőtt továbblépne az eseménykezelők elemekhez való hozzáadására, először meg kell szerezni ezeket az elemeket. Ha meg szeretné tudni, hogyan találhatja meg a megfelelő elemeket az oldalon, olvassa el a jQuery - Elemek kiválasztása című cikket.</p> <p>A jQuery alkalmazásban az on és one függvények, valamint a on rövidítés használatával egy eseményt (eseményfigyelőt) akaszthatunk egy adott elemre.</p><p>// függvény a .on(events,handler); // function one .one(events,handler); // események - szóközzel elválasztott esemény vagy események listája, amelyek bekövetkezésekor kezelőt (handler) kell végrehajtani // kezelő - függvény (eseménykezelő) // függvény rövidítés az .event(handler ); // esemény - az esemény neve (csak azokat az eseményeket lehet feldolgozni, amelyekhez ilyen rövid jelölés készült a jQuery-ben)</p><p>A one függvény csak abban különbözik a bekapcsolástól, hogy a megadott esemény bekövetkeztekor csak egyszer hajtja végre a kezelőt.</p> <p>Például adjunk hozzá egy kattintási eseményt az összes btn osztályú elemhez az on függvénnyel:</p><p>// anonim függvény használata kezelőként $(.btn").on("click", function() ( // az esemény bekövetkezésekor végrehajtandó műveletek... console.log($(this). szöveg( )); )); // reguláris függvény használata kezelőként var myFunction = function() ( console.log($(this).text()); ) $(".btn").on("click", myFunction);</p><p>A fenti kód az on függvény rövidítésével írva:</p><p>$(".btn").click(function() ( // az esemény bekövetkezésekor végrehajtandó műveletek... console.log($(this).text()); ));</p><h3>További információk az eseménnyel kapcsolatban</h3> <p>Egy esemény kezelése során további információkat tudhat meg róla. Ezen információk, nevezetesen az Event objektum átadása az eseménykezelőnek mindig az első argumentumon keresztül történik.</p><p>$("#demo").on("click", function(e)( // e egy Event objektum, amely további információkat tartalmaz a bekövetkezett eseményről // az Event objektum gyakran használt tulajdonságai e.preventDefault(); / /a művelet törlése alapértelmezés szerint e.stopPropagation(); //az esemény további bugyborékolásának leállítása // e.type - az eseménytípus lekérése // e.target - hivatkozás arra az elemre, amelyen az esemény történt // e. currentTarget - hivatkozás az aktuális elemre (amelyre a kezelő aktiválódott) e.pageY – kurzor koordináták, a dokumentum bal felső sarkához viszonyítva ));</p><h3>Névtér</h3> <p>A jQuery alkalmazásban az esemény nevének megadása után opcionálisan megadhat egy névteret.</p> <p>Például:</p><p>// először kattintson az eseményre a névtérben $("#demo").on("click.first",function()( console.log("1 kattintás eseménykezelő"); )); // eseményre kattintás a második névtérben $("#demo").on("click.second",function()( console.log("2 kattintásos eseménykezelő"); ));</p><p>A névtér nagyon praktikus dolog. Például akkor használatos, ha nem minden eseményt kell meghívnia, hanem csak azokat, amelyek egy bizonyos névvel rendelkeznek.</p><p>// kattintási esemény kiváltása az első névtérben $("#demo").trigger("click.first"); // kattintási esemény kiváltása a második névtérben $("#demo").trigger("click.second");</p><p>Ezenkívül nagyon egyszerűvé tesz bizonyos események eltávolítását:</p><p>//eltávolítja a kattintási eseménykezelőket az első névtérből $("#demo").off("click.first"); //eltávolítja a kattintási eseménykezelőket a második névtérből $("#demo").off("click.second");</p><p>A trigger és off funkciók leírását és példáit a cikk egy kicsit később tárgyalja.</p> <h3>További adatok átadása a kezelőnek</h3> <p>Szükség esetén adatokat adhat át az eseménykezelőnek (egy további argumentum megadásával az on függvényben). A kezelőn belül átadott adatok az Event objektumon keresztül érhetők el.</p> <p>Ez így működik (példa):</p><p> <div id="content"></div> <button id="showContent1">Tartalom megjelenítése 1</button> <button id="showContent2">Tartalom megjelenítése 2</button> ... <script> $("#showContent1").on("click", {title:"Заголовок 1", content: "Содержимое 1..."}, function(e){ var output = "<b>"+e.data.title+": </b>" + e.data.content; $("#content").html(output); }); $("#showContent2").on("click", {title:"Заголовок 2", content: "Содержимое 2..."}, function(e){ var output = "<b>"+e.data.title+": </b>" + e.data.content; $("#content").html(output); }); </script> </p><h2>Hogyan akaszthatunk több eseményt egy elemre</h2> <p>Példa egy kezelő használatára több (2 vagy több) eseményhez:</p><p>$("#id").on("billentyűnyomás elmosódás változása", function(e) ( console.log(e.type); // eseménytípus )); // vagy így var myFunction = function() ( ... ) $("#id") .keyup(myFunction) .keypress(myFunction) .blur(myFunction) .change(myFunction);</p><p>Minden eseménynek megvan a maga funkciója:</p><p>$("#id").on(( mouseenter: function() ( // mouseave eseménykezelő... ), mouseave: function() ( // mouseave eseménykezelő... ), kattintson: function() ( / / kattintson az eseménykezelőre... ) ));</p><p>Példa több kezelő (függvény) használatára egy eseményhez a jQuery-ben:</p><p>$("#demo").click(function()( console.log("1 kattintás eseménykezelő"); )); $("#demo").click(function()( console.log("2 kattintás eseménykezelő"); ));</p><p>Például megtudhatja, hogy az események milyen sorrendben lesznek végrehajtva, így:</p><p>Var eventList = $._data($("#demo"), "események"); konzolnapló(eseménylista);</p><h2>Esemény hívása programozottan</h2> <p>Egy esemény jQuery kódból történő meghívásához két módszer létezik:</p> <ul><li>trigger – kiváltja a megadott eseményt az elemen.</li> <li>triggerHandler – Meghív egy eseménykezelőt anélkül, hogy magát az eseményt kiváltaná.</li> </ul>$("#header").on("click", function() ( console("A #header elemre kattintottak"); ) ); // programozottan meghívja az elem kattintási eseményét $("#header").trigger("click"); // ennek a hívásnak a rövidítése $("#header").click(); // a kiválasztott elem kattintási eseménykezelőjének meghívása $("#header").triggerHandler("click"); <h2>jQuery – Oldalbetöltési esemény (kész)</h2> <p>Az eseménykezelő hozzáadásának folyamata valamely elemhez általában az oldal betöltése után történik, pl. amikor a dokumentum DOM fája már fel van építve. Ellenkező esetben a kezelők írása során olyan elemekre hivatkozhat, amelyek még nincsenek az oldalon.</p> <p>A jQuery oldalbetöltési eseményének legrövidebb bejegyzése így néz ki:</p><p>$(function()( // a dokumentum betöltése után végrehajtandó műveletek... ));</p><p>De használhat hosszabb jelölést is:</p><p>$(document).ready(function()( // a dokumentum betöltése után végrehajtandó műveletek... ));</p><h2>jQuery – Esemény betöltése</h2> <p>A böngésző elindít egy betöltési eseményt egy elemhez, amikor az elem és az összes beágyazott eleme teljesen betöltődött. Ez az esemény csak az URL-t tartalmazó elemekre vonatkozik: kép , szkript , iframe és ablak .</p> <p>Például hajtson végre egy függvényt, amikor az oldal teljesen be van töltve (beleértve a képeket is):</p><p>$(window).on("load", function() ( // műveletek az oldal teljes betöltése után... ));</p><p>Például nyomtasson egy üzenetet a konzolra a megadott kép betöltésekor:</p><p> <img src='https://i1.wp.com/image.png' loading=lazy loading=lazy> ... <script> $("#image").on("load", function() { console.log("Изображение загружено"); }); </script> </p><h2>jQuery – Egéresemények</h2> <p>A jQuery alkalmazásban a következő eseményeket használják leggyakrabban az egérműveletek nyomon követésére:</p> <ul><li>egérrel lefelé</li> <li>egeret</li> <li>kattintson</li> <li>egérmozgatás</li> <li>kerék</li> <li>lebeg</li> <li>egérmutató</li> <li>vigye rá az egeret</li> <li>egérlevél</li> <li>egérkihúzás</li> </ul><h3>jQuery – Kattintson az eseményre</h3> <p>A kattintási esemény egy összetett esemény, amely az egér lefelé és az egér felfelé mutató eseményeinek elindítása után következik be. A lefelé mutató esemény akkor következik be, amikor a mutató egy elem fölé kerül, és az egérgombot megnyomják. Az egérfelhúzás esemény akkor következik be, amikor a mutató egy elem fölé kerül, és az egérgombot felengedik. A kattintási esemény akkor indul el, ha a kurzort egy elem fölé viszi, és az egérgombot lenyomja és felengedi. Ezek az események fogadhatnak bármilyen <a href="https://remzhuk.ru/hu/raspolozhenie-div-po-centru-i-drugie-tonkosti-pozicionirovaniya/">HTML elem</a> s.</p> <p>Például függesszünk fel egy kezelőt az ablakelem onclick eseményére. Amikor ez az esemény bekövetkezik, a kezelő megjeleníti a lenyomott billentyű számát és a kurzor koordinátáit:</p><p>$(window).on("click", function(e) ( // a kattintási esemény kezelése... console.log("Nyomott gomb: " + e.which); //1 - <a href="https://remzhuk.ru/hu/neaktivnoe-menyu-pusk-windows-10-pusk-ne-reagiruet-na-levuyu-knopku-myshi-pochemu-ne/">bal gomb</a>, 2 - középső gomb, 3 - jobb gomb console.log("Kurzor koordinátái: x = " + e.pageX + " ; y = " + e.pageY); ));</p><p>Például függesszünk fel egy onclick eseményt az összes btn osztályú elemre:</p><p>$(".btn").on("click", function()( // gomb kattintás eseménykezelő kódja... )); Kattintási esemény rövidítése: $(".btn").click(function()( ... ));</p><p>Nézzük meg például, hogyan lehet elrejteni a blokkot valamivel a kattintási esemény után:</p><p> <div class="message">...Blokk elrejtése 5 másodperc után...</div> ... <script> $(".hide-message").click(function(e){ e.preventDefault(); var _this = this; setTimeout(function(){ $(_this).closest(".message").hide(); }, 5000); }); </script> </p><h3>jQuery – lebegő esemény</h3> <br><img src='https://i0.wp.com/itchief.ru/assets/images/js/jquery-event-hover.png' align="center" width="100%" loading=lazy loading=lazy>jQuery – Mi az a lebegési esemény <p>A kurzor lebegtetése összetett, és 2 eseményből áll:</p> <ul><li>előfordulások (egérbevitel, egérmutató);</li> <li>távozás (mouseleave, mouseout).</li> </ul><p>A jQuery mouseenter és mouseave eseményei csak abban különböznek a mouseover és mouseout eseményektől, hogy nem indulnak el, amikor a kurzor belép az elem belső elemeibe, illetve elhagyja azokat. Más szóval, a mouseover és mouseave események felbuborékolnak, de a mouseenter és mouseave események nem.</p> <p>Például változtassuk meg egy listaelem színét, amikor a kurzort rávisszük:</p><p> <ul id="list"> <li>Toll</li> <li>Ceruza</li> <li>Vonalzó</li> </ul> ... <script> $("ul>li"). mouseenter(function(){ // при вхождении в элемент $(this).css("color","orange"); }). mouseleave(function(){ // при покидании элемента $(this).css("color","black"); }); </script> </p><p>Ugyanazok a műveletek, csak az egérmutatót és az egérmutatót használva:</p><p>$("ul>li"). mouseover(function()( // a $(this).css("color","narancs"; ) elem beírásakor). mouseout(function()( // a $(this) elem elhagyásakor.css("color","black"); ));</p><p>Ezeket a módszereket nem kell együtt alkalmazni, külön-külön is használhatók.</p> <p>Például számoljuk meg egy elem látogatásainak számát, amikor a lebegtetési esemény bekövetkezik:</p><p> <div id="count">Mennyiség: 0</div> ... <script> $("#count").mouseenter(function(){ var count = parseInt($(this).find("span").text()); count++; $(this).find("span").text(count); }); </script> </p><p>A mouseenter és a mouseleave használata helyett használhatja a hover eseményt.</p> <p>Például írjuk át a fenti példát a hover használatával:</p><p>$("ul>li").hover(function()( // a $(this).css("color","orange"); ), function()( // a $ elem elhagyásakor ( ez).css("szín","fekete"); ));</p><p>Amikor a hover eseményt használja a jQuery-ben, az első kezelő határozza meg, hogy mi történjen, amikor a kurzor belép az elembe (mouseenter), a második kezelő pedig, amikor elhagyja az elemet (mouseave).</p> <p>Ha a hover eseménynek egy kezelőt adunk, akkor az a lebegtetés kezelésére és az egér elhagyására is végrehajtódik.</p> <p>Például:</p><p>$("h1").hover(function()( console.log("Enter/leave esemény történt"); ));</p><h3>jQuery - Egérmozgás esemény</h3> <p>A mousemove eseményt a rendszer elküldi egy elemnek, amikor az egérmutató mozog benne. Bármely HTML elem fogadhatja ezt az eseményt.</p><p>$(.target").mousemove(function(e) ( console.log("A mousemove esemény kezelője."); console.log("A dokumentum bal felső sarkához viszonyított koordináták: " + e.pageX + ", " + e.pageY); console.log("A kurzor koordinátái a célon belül: " + e.offsetX + ", " + e.offsetY); ));</p><h3>jQuery – Egérkerék esemény</h3> <p>Az egérgörgő görgető eseményének meghallgatása a következőképpen történhet:</p><p>$(window).on("wheel", function(e) ( // kezelőkód (például)... console.log("Görgetett pixelek száma: " + e.originalEvent.deltaY); if (pl. eredetiEsemény. deltaY< 0){ console.log("Прокручиваем вверх"); } else { console.log("Прокручиваем вниз"); } }); </p><p>Ezt az eseményt a scrolltól eltérően csak az egérgörgőhöz generálja a böngésző, és nem mindegy, hogy az elem görgetett-e vagy sem, pl. olyan elemeken tud működni, amelyek túlcsordulása rejtett értékre van állítva. Egy másik különbség, hogy a görgetés előtt a görgő, míg utána a görgetés generálódik.</p> <h2>jQuery – Billentyűzet események</h2> <p>Ha megnyom egy billentyűt, a böngésző a következő sorrendben generálja az eseményeket:</p><p>keydown -> keypress -> keyup</p><ul><li>keydown (billentyű lenyomva, de még nem engedték el);</li> <li>gombnyomás (egy esemény generálódik a betűk, számok és egyéb billentyűk számára, kivéve a vezérlőbillentyűket) – a karakterkód lekérésére szolgál (a billentyűlenyomás és a billentyűparancsok csak a billentyűkódot teszik lehetővé, a karakterről nem);</li> <li>keyup (a böngésző által generált kulcs felengedésekor).</li> </ul><p>Például írjunk egy kezelőt, amely figyeli az összes olyan eseményt, amely egy billentyű lenyomásakor történik:</p><p> <input id="target" type="text" value=""> ... <script> $("#target").on("keydown keypress keyup", function(e) { console.log("Тип события: " + e.type); // keydown, keypress, keyup console.log("Код нажатой клавиши или символа: " + e.which); // код символа позволяет получить только keypress console.log("Нажата клавиша Alt: " + e.altKey); console.log("Нажата клавиша Ctrl: " + e.ctrlKey); console.log("Нажата клавиша Shift: " + e.shiftKey); console.log("Нажата клавиша Cmd (osMac): " + e.metaKey); }); </script> </p><p>Egy példa, amely bemutatja, hogyan hallgathatja meg a billentyűleütési eseményt, és megtudhatja, hogy a megadott billentyűkombinációt lenyomták-e:</p><p>$(dokumentum).keypress("c", function(e) ( if(e.ctrlKey) ( console.log("Ctrl+c le lett nyomva"); ) ));</p><p>Példa arra, hogyan hallgathatja meg a Ctrl + Enter billentyűkombinációt:</p><p>$(document).keydown(function(e) ( // macOS X képes if ((e.ctrlKey || e.metaKey) && (e.keyCode == 13 || e.keyCode == 10)) ( / / a tetteid... ))</p><p>Példa a billentyűleállítási és kulcsfeltöltési eseményekre:</p><p> <input id="name" type="text"> ... <script> $("#name"). keydown(function(){ $(this).css("background-color", "yellow"); }). keyup(function(){ $(this).css("background-color, "pink"); }); </script> </p><h2>jQuery – Űrlapelem-események</h2> <p>A jQueryben a következő események különböztethetők meg az űrlapelemeknél, nem csak:</p> <ul><li>fókusz (fókusz)</li> <li>elmosódás (fókuszálás)</li> <li>változás</li> <li>bevitel (szöveges űrlapelemekhez)</li> <li>válassza ki</li> <li>Beküldés</li> </ul><h3>jQuery – Fókuszban a nyereség és veszteség események</h3> <p>A fókusz eseményt elküldi egy elemnek, amikor az fókuszt kap. Ez az esemény aktiválódik az input , select és link elemeknél (a href="..."), valamint minden olyan elemnél, amelynek tabindex tulajdonsága be van állítva. Az elemre való fókuszálás általában a billentyűzet Tab billentyűjének kattintásával vagy megnyomásával történik. A fókusz esemény nem buborékolódik fel.</p> <p>A fókuszon kívül van egy másik hasonló esemény, a fókuszin. A fókusztól eltérően ez az esemény buborékokat tartalmaz, és például a fókuszesemény szülőelemek általi észlelésére használható.</p> <p>Az elmosódási eseményt a rendszer elküldi egy elemnek, amikor az elveszíti a fókuszt. Csakúgy, mint a fókusz , az elmosódási esemény is hasonló fókuszálási eseményt tartalmaz. Ez az esemény abban különbözik az elmosódástól, hogy felbuborékolhat. Ezt a funkciót például arra használhatjuk, hogy a szülőelemeken is megkapjuk, és nem csak az azt hívó elemen (cél).</p> <p>Például fogadáskor <a href="https://remzhuk.ru/hu/selektor-dlya-vseh-elementov-v-div-kompleksnye-selektory/">div elem</a> fókusz események narancssárgára állítják a hátteret:</p><p> <div id="demo"><input type="text"></div> ... <script> $("#demo"). focusin(function(){ $(this).css("background-color","orange"); }) .focusout(function(){ $(this).css("background-color","inherit"); }); </script> </p><p>Nem fog pontosan ugyanúgy működni a fókusz és az elmosódás esetén, mert nem bukkannak fel.</p><p>$("#demó bemenet"). focus(function()( $(this).parent().css("háttérszín","narancs"); )) .blur(function()( $(this).parent().css("háttér -szín","öröklés"); ));</p><h3>jQuery – Esemény módosítása</h3> <p>A változási esemény célja a bemeneti , a szövegterület és a kiválasztott elemek értékében bekövetkezett változás regisztrálása. A kijelölés , a jelölőnégyzetek és a rádiógombok esetében ez az esemény azonnal aktiválódik (vagyis amint a felhasználó kiválaszt egyet). Más elemek esetében azonban ez az esemény nem következik be, amíg az elem el nem veszíti a fókuszt.</p> <p>Példa a változási esemény használatára egy jelölőnégyzet-elem állapotának figyelésére. A gomb elérhetősége a jelölőnégyzet állapotától függ (be van jelölve vagy sem):</p><p> <input type="checkbox" id="agree"> <button type="submit" id="send" disabled>Küld</button> ... <script> $(function() { $("#agree").on("change", function(){ if (this.checked) { $("#send").prop("disabled",false); } else { $("#send").prop("disabled",true); } }); }); </script> </p><p>Példa, amelyben megvizsgáljuk, hogyan kaphatjuk meg a kiválasztási elem értékét, amikor megváltozik:</p><p> <select id="list"> <option value="1">Első érték</option> <option value="2">Második érték</option> <option value="3">Harmadik jelentés</option> </select> ... <script> $(function() { $("#list").on("change", function(){ var value = $(this).val(); $("#result").text(value); }); }); </script> </p><p>Példa, amelyben megvizsgáljuk, hogyan kapjuk meg a kijelölés összes kiválasztott elemét, amikor megváltozik:</p><p> <select name="colors" multiple="multiple"> <option>Zöld</option> <option>Piros</option> <option>Kék</option> <option>Barna</option> <option>Ibolya</option> <option>Szürke</option> </select> ... <script> $("select") .change(function () { var colors = ; $("select option:selected").each(function() { colors.push($(this).text()); }); console.log("Выбранные цвета: " + colors.join()); }) .change(); </script> </p><p>Példa egy kiválasztott elem változási eseményének programozott meghívására:</p><p>// lista - elemazonosító változás $("#list").trigger("módosítás"); // gyorsírás $("#list").change(); // csak a változási eseménykezelő meghívása $("#list").triggerHandler("change");</p><p>Példa a változási esemény használatára egy bemeneti elem értékének lekérésére:</p><p> <input type="text" name="name"> ... <script> $(function() { // событие изменения значения input (возникает только после потери фокуса) $("input").on("change", function(){ var value = $(this).val(); console.log(value); }); }); </script> </p><p>De a változásesemény mellett van egy beviteli esemény is a szöveges elemekhez. Ez az esemény a változással ellentétben azonnal generálódik, és nem utána <a href="https://remzhuk.ru/hu/1s-naznachit-tip-elementu-formy-tipy-bazy-dannyh/">adott elem</a> elveszíti a fókuszt.</p> <p>Példa egy bemeneti esemény használatára egy bemeneti elem értékének lekérésére:</p><p>$("bemenet").on("bemenet",function()( var value = $(this).val(); console.log(value); ));</p><p>Példa, amely bemutatja a textarea elem értékének meghatározásának egyik módját:</p><p> <textarea name="text"> ...

Egy példa, amelyben megvizsgáljuk, hogyan használhatjuk a változási eseményt a kiválasztott bemeneti elem értékének lekéréséhez, amelynek típusa megegyezik a rádióval:

ablakok Linux Mac operációs rendszer ...

jQuery – Esemény kiválasztása (kiválasztás)

A kijelölési eseményt a böngésző indítja el, amikor a type="text" vagy textarea beviteli elemekben lévő felhasználó szöveget választ ki.

$("#target").select(function() ( console.log("Elhívott eseménykezelő kiválasztása"); ));

jQuery – Űrlap beküldési esemény (beküldés)

A küldési esemény akkor indul el egy elemen, amikor a felhasználó megpróbálja elküldeni az űrlapot. Ez az esemény csak űrlapelemekhez adható hozzá.

Példa a küldési esemény használatára:

...

Automatikus felhívás az űrlap beküldésére:

$("#feedback").submit(); $("#feedback").trigger("submit");

jQuery – esemény görgetése (görgetés)

A jQuery a görgetési eseményt használja a görgetés állapotának nyomon követésére.

Például csatoljunk egy függvényt az oldalgörgetési eseményhez, amely megjelenít egy elemet a scrollup osztályával, ha a görgetés értéke nagyobb, mint 200 képpont, és elrejti, ha a görgetés értéke kisebb ennél az értéknél.

// függvény rövidítés $(window).scroll(function() ( // mi történik az oldal görgetésekor... if ($(this).scrollTop()>200) ( $(.scrollup").fadeIn( ) ; ) else ( $(.scrollup").fadeOut(); ) ));

jQuery – Ablak átméretezési esemény (átméretezés)

A böngészőablak változási eseményének figyeléséhez használja az átméretezést:

Például hozzunk létre egy kezelőt, amely a böngészőablak megváltozásakor az oldal végén megjeleníti a szélességét és magasságát:

$(window).resize(function() ( $("body").append("

Szélesség x Magasság = " + window.innerWidth + " x " + window.innerHeight + "

"); });

jQuery – Egy esemény alapértelmezett viselkedésének felülbírálása

A HTML egyes elemei normál viselkedésűek. Például, amikor a felhasználó egy hivatkozásra kattint, a href attribútumban megadott címre lép. Ha nincs szüksége erre a műveletre, törölheti azt. Az alapértelmezett viselkedés megszakításához hívja meg az eseményobjektum preventDefault metódusát az eseménykezelőben.

Például írjuk felül az oldalon lévő összes olyan hivatkozás alapértelmezett viselkedését, amelyeknek szolgáltatási osztálya van:

$("a.service").on("click",function(e)( //megszakítja az alapértelmezett böngészőműveletet e.preventDefault(); //a hivatkozás által végrehajtott műveletek... ));

Mi az úszó és hogyan lehet megállítani

A szokásos műveletek törlése mellett az eseménymechanizmusnak van olyan is, mint a buborékolás. Ez abban rejlik, hogy amikor a böngésző eseményt generál, akkor ezt nem csak az aktuális elemre (célra), hanem annak minden leszármazottjára is megteszi, beleértve a szülőt is:

Aktuális elem (cél) -> cél szülője -> nagyszülő -> ... -> dokumentum -> ablak

A jQueryben vannak olyan forgatókönyvek, amikor a bemutatott lánc egyes elemeihez ugyanaz a kezelő tartozik ehhez az eseményhez, amelyet nem kell végrehajtani. És hogy ez az esemény ne terjedjen át erre az elemre, le kell állítani. Ehhez a kívánt elem kezelőjében meg kell hívni az eseményobjektum stopPropagation metódust. A metódus meghívása után az esemény leáll, és nem buborékolódik fel.

Például szükséges, hogy amikor a kurzort egy osztályjellel ellátott elemre visszük, annak tartalma narancssárga színűvé váljon.

Egy kis szöveg... töredék......folytatás...

...

Ebben az esetben, ha a stopPropagation metódus nincs megadva, akkor amikor a kurzort a mark osztályú span elemre visszük, akkor ez az esemény nem csak rá, hanem minden szülőelemére is be fog következni. És ez ebben a példában ahhoz a tényhez vezet, hogy nem csak a szakaszba zárt szöveg színe fog megváltozni, hanem az egész bekezdés.

Ha felül kell írnia a böngésző alapértelmezett viselkedését, és meg kell akadályoznia az esemény bugyborékolását, akkor a jQueryben e két metódus meghívása helyett egyszerűen false értéket adhat vissza a függvény eredményeként.

$("a").on("click", function(e)( //e.preventDefault(); //e.stopPropagation(); ... return false; ));

Események hozzáadása dinamikusan létrehozott objektumokhoz

Ha egy eseményt egy még nem létező elemre szeretne felakasztani, használhatja az on függvény alábbi felépítését:

$(dokumentum).on(eseménynév, választó, kezelő); // dokumentum vagy bármely más létező szülőelem // eventName - az esemény neve // választó - egy választó, amely kiszűri azokat a leszármazottakat, amelyeknél az eseménykezelőt ki kell rúgni // kezelő - az eseménykezelő

Ez a művelet annak a ténynek köszönhető, hogy az esemény felugrik, és ezért ennek az elemnek az összes ősén előfordul. És az objektum, amelyhez az oldalon lévő összes esemény buborékosodik, a dokumentum. Ezért a legtöbb esetben azt választják. Ezt követően a kiválasztó ismeretében az on függvény programozottan kiválaszthatja az elemek közül (az eseményt okozó elem (cél) és minden őse, beleértve a szülőt is, amelyek megfelelnek neki. Ezután az összes kiválasztott elemnél hajtsa végre az on függvényben megadott kezelőt. Azokat a műveleteket, amelyek révén az eseményfeldolgozás átkerül egy másik elemre (elődre), a jQuery szintén meghívja rendezvény delegálási folyamata.

Például adjunk hozzá egy eseményt egy olyan elemhez, amely még nincs az oldalon:

A delegálás nem csak dinamikusan létrehozott objektumok eseményeinek kezelésére használható, hanem azért is, hogy ne kössünk minden elemhez kezelőt (ha sok lehet az oldalon).

Például megtiltjuk a külső hivatkozások követését a megjegyzésekben (az ilyen műveleteket átirányítjuk a távoli oldalra):

$(document).on("kattintás","#megjegyzés",function(e) ( if(!(hely.gépnév === this.hostname || !this.hostname.length)) ( e.preventDefault( ); location.href="away?link="+encodeURIComponent($(this).attr("href")); ) ));

jQuery – Eseménykezelő eltávolítása

Az eseménykezelők eltávolítása a kikapcsolt módszerrel történik. Ezzel egyidejűleg csak azokat a kezelőket távolíthatja el, amelyeket az on módszerrel adtak hozzá.

Az off metódus argumentumok nélküli meghívása eltávolítja a megadott elemekhez hozzáadott összes eseménykezelőt.

Például tiltsuk le a link osztályú elemek összes kezelőjét:

$(".link").off();

Például távolítsuk el a kattintási eseményt az összes hivatkozási osztályú elemből:

$(".link").off("link");

A speciális választó (**) lehetővé teszi, hogy csak a delegált eseményeket távolítsa el, miközben megtartja a nem delegált eseményeket:

$(".link").off("kattintás","**");

Csak a megadott delegált események eltávolítása (szelektor segítségével):

// delegált esemény hozzáadása $("ul").on("click","li", function()( // kiírja a li elem tartalmát a konzolba console.log($(this).text( )); )) ; // delegált esemény eltávolítása $("ul").off("click","li");

Távolítsa el a delegált kattintási esemény összes openModal kezelőjét a modális névtérből az osztálymegjelenítéssel rendelkező elemek esetében:

$("body").on("click.modal", ".show", openModal);

Egyéni esemény létrehozása

A jQuery az on és a trigger metódusokat használja az egyéni események létrehozásához.

Nézzük meg, hogyan hozhat létre egyéni jQuery eseményt a következő példa segítségével:

...