Vstupní událost se spustí, když byla změněna hodnota prvku , , nebo.
| Ano |
| Ne |
| Vstupní událost |
| GlobalEventHandlers.oninput |
| Životní standard HTML |
Životní úroveň |
| Specifikace událostí úrovně 3 modelu dokumentu (DOM). Definice "vstupní události" v této specifikaci. |
Zastaralý |
Tabulka kompatibility na této stránce je generována ze strukturovaných dat. Pokud byste chtěli přispět k datům, podívejte se na https://github.com/mdn/browser-compat-data a pošlete nám žádost o stažení.
Aktualizujte údaje o kompatibilitě na GitHubu
| Desktop Mobile | |||
| Chrome Edge Firefox Internet Explorer Opera Safari Webové zobrazení Android Chrome pro Android Firefox pro Android Opera pro Android Safari na iOS Samsung Internet | |||
| Plná podpora Chrome Ano | Edge Plná podpora 79 Plná podpora 79 Žádná podpora 12 - 79 Poznámky Poznámky Není podporováno na vstupech select , checkbox nebo radio. | Plná podpora Firefoxu Ano | Částečná podpora IE 9 |
V tomto článku se podíváme na metody, které knihovna jQuery poskytuje webovému vývojáři pro zpracování událostí.
Pro práci s událostmi ve skriptech JavaScriptový prohlížeč poskytuje API (například funkce addEventListener). Pomocí této funkce můžete určit kód, který se má spustit, když prohlížeč pro zadaný prvek vygeneruje zadanou událost.
Zpracování událostí pomocí metod jQuery na syntaxi funkceNež budete moci přidat obslužné rutiny událostí k prvkům, musíte tyto prvky nejprve získat. Jak najít prvky, které na stránce potřebujete, se dozvíte v článku jQuery – Výběr prvků.
V jQuery můžete ke konkrétnímu prvku připojit událost (posluchač událostí) pomocí funkcí on a one a také ke zkráceným záznamům.
// funkce on .on(events,handler); // funkce jedna .one(events,handler); // events - událost nebo seznam událostí oddělených mezerou, při jejichž výskytu je nutné spustit handler (handler) // handler - funkci (event handler) // krátký popis funkce na .událost(správce); // událost - název události (lze použít ke zpracování pouze těch událostí, pro které byl v jQuery vytvořen takový krátký záznam)
Funkce one se od on liší pouze tím, že obsluhu spustí pouze jednou, když nastane zadaná událost.
Například použijte funkci on k přidání události kliknutí pro všechny prvky s třídou btn:
// použijte anonymní funkci jako handler $(".btn").on("click", function() ( // akce, které budou provedeny, když dojde k události... console.log($(this). text( )); )); // použití běžné funkce jako handleru var myFunction = function() ( console.log($(this).text()); ) $(".btn").on("click", myFunction);
Výše uvedený kód, napsaný pomocí zkratky funkce on:
$(".btn").click(function() ( // akce, které budou provedeny, když dojde k události... console.log($(this).text()); ));
Další informace o akciPři zpracování události můžete některé zjistit Dodatečné informace o něm. Přenos této informace, konkrétně objektu Event, do obsluhy události se vždy provádí prostřednictvím prvního argumentu.
$("#demo").on("click", function(e)( // e je objekt Event obsahující další informace o události, která nastala // často používané vlastnosti objektu Event e.preventDefault(); / / ve výchozím nastavení zruší akci e.stopPropagation(); //zastaví další bublání události // e.type – získání typu události // e.target – odkaz na prvek, na kterém událost nastala // e.currentTarget – odkaz na aktuální prvek (pro který byl handler spuštěn). Tato vlastnost se obvykle rovná funkci this. // e.currentTarget === this // e.which – kód klávesy (pro myš), kód tlačítka nebo symbolu (pro klávesnici) //e.pageX, e.pageY – souřadnice kurzoru vzhledem k levé straně horní roh dokument));
Jmenný prostorV jQuery můžete po zadání názvu události navíc zadat jmenný prostor.
Například:
// první kliknutí na událost ve jmenném prostoru $("#demo").on("click.first",function())( console.log("1 click event handler"); )); // událost kliknutí ve druhém jmenném prostoru $("#demo").on("click.second",function())( console.log("2 click event handler"); ));
Jmenné prostory jsou velmi pohodlná věc. Používá se například, když potřebujete spustit ne všechny události, ale pouze ty s konkrétním názvem.
// nejprve spustí událost click ve jmenném prostoru $("#demo").trigger("click.first"); // spustí událost click ve druhém jmenném prostoru $("#demo").trigger("click.second");
Také to velmi usnadňuje odstranění určitých událostí:
//odstranění obsluhy události kliknutí v prvním jmenném prostoru $("#demo").off("click.first"); //odstranění obsluhy události kliknutí ve druhém jmenném prostoru $("#demo").off("click.second");
Popisy a příklady použití funkcí spouštění a vypnutí jsou rozebrány v článku o něco níže.
Předávání dalších údajů psovodoviV případě potřeby můžete předat data obsluze události (zadáním dalšího argumentu ve funkci on). K předávaným datům uvnitř handleru se přistupuje prostřednictvím objektu Event.
Dělá se to takto (příklad):
Zobrazit obsah 1 Zobrazit obsah 2 ... $("#showContent1").on("click", (title:"Title 1", content: "Obsah 1..."), function(e)( var output = ""+e.data.title+": " + e.data.content; $("#obsah").html(výstup); )); $("#showContent2").on("click", (title:"Title 2", content: "Obsah 2..."), function(e)( var output = ""+e.data.title+" : " + e.data.content; $("#obsah").html(výstup); ));
Jak připojit více událostí k jednomu prvkuPříklad použití jednoho handleru pro několik (2 nebo více) událostí:
$("#id").on("změna rozmazání stisknutím klávesy", function(e) ( console.log(e.type); // typ události )); // nebo tak var myFunction = function() ( ... ) $("#id") .keyup(myFunction) .keypress(myFunction) .blur(myFunction) .change(myFunction);
Každá událost má svou vlastní funkci:
$("#id").on(( mouseenter: function() ( // handler události mouseenter... ), mouseleave: function() ( // handler události mouseleave... ), klikni: function() ( / / kliknout na obsluhu události... ) ));
Příklad použití několika handlerů (funkcí) pro jednu událost v jQuery:
$("#demo").click(funkce())( console.log("obslužný program události 1 kliknutí"); )); $("#demo").click(funkce())( console.log("obslužný program události 2 kliknutí"); ));
Můžete například zjistit, v jakém pořadí se budou události provádět takto:
Var eventList = $._data($("#demo"), "události"); console.log(seznam událostí);
Programové volání událostiExistují 2 způsoby, jak volat událost z kódu v jQuery:
- trigger - spustí zadanou událost na prvku.
- triggerHandler - volá obsluhu události, ale samotná událost nenastane.
Proces přidání obsluhy události k prvku se obvykle provádí po načtení stránky, tzn. když je strom DOM dokumentu již vytvořen. V opačném případě můžete při psaní obslužných programů přistupovat k prvkům, které na stránce ještě nejsou.
Nejkratší záznam pro událost načtení stránky v jQuery vypadá takto:
$(funkce())( // akce, které mají být provedeny po načtení dokumentu... ));
Můžete ale použít i delší zápis:
$(document).ready(function())( // akce, které je třeba provést po načtení dokumentu... ));
jQuery – událost Load (load)Prohlížeč generuje událost načtení prvku, když byl prvek a všechny jeho vnořené prvky plně načteny. Tato událost je určena pouze pro prvky, které obsahují adresu URL: obrázek , skript , iframe a okno .
Například spusťte funkci, když je stránka zcela načtena (včetně obrázků):
$(window).on("načíst", function() ( // akce po úplném načtení stránky... ));
Vytiskněme například zprávu do konzole, když je načten zadaný obrázek:
... $("#image").on("načíst", function() ( console.log("Obrázek načten"); ));
Nejčastěji používané události v jQuery ke sledování akcí myši jsou:
- pohyb myši
- mouseup
- klikněte
- pohyb myši
- kolo
- vznášet se
- mouseenter
- přejet myší
- myší list
- mouseout
Událost kliknutí je složitá událost, dochází k ní po spuštění událostí mousedown a mouseup. Událost mousedown nastane, když je ukazatel nad prvkem a je stisknuto tlačítko myši. K události mouseup dojde, když je ukazatel nad prvkem a tlačítko myši je uvolněno. Událost kliknutí se spustí, když je kurzor nad prvkem a je stisknuto a uvolněno tlačítko myši. Tyto události může přijímat kdokoli HTML prvek s.
Připojme například handler k události onclick prvku okna. Když nastane tato událost, obsluha zobrazí číslo stisknuté klávesy a souřadnice kurzoru:
$(window).on("click", function(e) ( // zpracování události kliknutí... console.log("Stisknuto tlačítko: " + e.which); //1 - levé tlačítko, 2 - prostřední tlačítko , 3 - pravá console.log("Souřadnice kurzoru: x = " + e.stránkaX + " ; y = " + e.stránkaY); ));
Například připojme událost onclick ke všem prvkům s třídou btn:
$(".btn").on("click", function())( // kód pro obsluhu události kliknutí na tlačítko... )); Krátký popis události click: $(".btn").click(function())( ... ));
Podívejme se například, jak můžete skrýt blok nějakou dobu po události kliknutí:
...Skrýt blok po 5 sekundách... ... $(".hide-message").click(function(e)( e.preventDefault(); var _this = this; setTimeout(function())( $( _this).closest(".message").hide(); ), 5000); ));
jQuery – událost Hover
jQuery – Co je to událost hoveru Událost při vyvolání kurzoru je složitá a skládá se ze 2 událostí:
- výskyty (mouseenter, mouseover);
- odchod (mouseeave, mouseout).
Události mouseenter a mouseleave v jQuery se liší od mouseover a mouseout pouze v tom, že se nevyskytují, když kurzor vstoupí a opustí vnitřní prvky poslouchaného prvku. Jinými slovy, události mouseover a mouseout vybuchnou, ale události mouseenter a mouseleave nikoli.
Změňme například barvu položky seznamu, když na ni přesunete kurzor:
- Pero
- Tužka
- Pravítko
Stejné akce, ale s použitím myši a přejetí myší:
$("ul>li"). mouseover(function())( // při zadávání prvku $(this).css("color","orange"); )). mouseout(function())( // při opuštění prvku $(this).css("color","black"); ));
Tyto metody není nutné používat společně, lze je použít i samostatně.
Počítejme například počet návštěv prvku, když dojde k události Hover:
Počet: 0 ... $("#count").mouseenter(function())( var count = parseInt($(this).find("span").text()); count++; $(this). najít ("rozpětí").text(počet); ));
Místo použití mouseenter a mouseleave můžete použít událost hover.
Například přepišme výše uvedený příklad pomocí kurzoru:
$("ul>li").hover(function())( // při zadávání prvku $(this).css("color","orange"); ), function())( // při opuštění prvek $( this).css("barva","black"); ));
Při použití události hover v jQuery se první handler používá k nastavení akce, když kurzor vstoupí do prvku (mouseenter), a druhý handler se používá při jeho opuštění (mouseeave).
Pokud zadáte jeden ovladač pro událost hover, bude spuštěna jak při najetí myší, tak při opuštění myši.
Například:
$("h1").hover(function())( console.log("Došlo k událostem vstupu nebo výstupu prvku"); ));
jQuery - Událost pohybu myšiUdálost mousemove je odeslána prvku, když se v něm pohybuje ukazatel myši. Tuto událost může přijmout jakýkoli prvek HTML.
$(".target").mousemove(function(e) ( console.log("Obslužný program pro událost mousemove volán."); console.log("Souřadnice vzhledem k levému hornímu rohu dokumentu: " + e.pageX + ", " + e.pageY); console.log("Souřadnice kurzoru uvnitř cíle: " + e.offsetX + ", " + e.offsetY); ));
jQuery – událost kolečka myšiPoslech události rolování kolečkem myši lze provést takto:
$(window).on("kolečko", function(e) ( // kód obsluhy (například)... console.log("Počet posouvaných pixelů: " + e.originalEvent.deltaY); pokud (např. původní událost. deltaY< 0){ console.log("Прокручиваем вверх"); } else { console.log("Прокручиваем вниз"); } });
Tuto událost na rozdíl od scrollování generuje prohlížeč pouze pro kolečko myši a nezáleží na tom, zda je prvek posouván či nikoliv, tzn. lze jej použít na prvky s přetečením rovným skrytému . Dalším rozdílem je, že kolečko se generuje před rolováním a rolování se generuje až po něm.
jQuery - Události klávesnicePo stisknutí klávesy na klávesnici prohlížeč vygeneruje události v následujícím pořadí:
Keydown -> keypress -> keyup
- keydown (klávesa stisknutá, ale ještě neuvolněná);
- stisknutí klávesy (událost je generována pro písmena, číslice a další klávesy, s výjimkou ovládacích) – určena k získání kódu znaku (události keydown a keyup umožňují zjistit pouze kód klávesy, ale není postava);
- keyup (vygenerovaný prohlížečem při uvolnění klíče).
Napišme například handler, který bude naslouchat všem událostem, ke kterým dojde při stisknutí klávesy:
... $("#target").on("klávesa stisknutí klávesy klávesa, funkce(e) ( console.log("Typ události: " + e.type); // stisknutá klávesa, stisknutí klávesy, klávesa console.log( "Kód stisknuté klávesy nebo symbolu: " + e.which); // kód symbolu umožňuje získat pouze stisknutí kláves console.log("Je stisknuta klávesa Alt: " + e.altKey); console.log( "Je stisknuta klávesa Ctrl: " + e .ctrlKey); console.log("Stisknuta klávesa Shift: " + e.shiftKey); console.log("Stisknuta klávesa Cmd (osMac): " + e.metaKey); ) );
Příklad, který ukazuje, jak si můžete poslechnout událost stisknutí klávesy a zjistit, zda byla stisknuta zadaná kombinace kláves:
$(document).keypress("c", function(e) ( if(e.ctrlKey) ( console.log("stisknuta kombinace kláves Ctrl+c"); ) ));
Příklad, jak si můžete poslechnout kombinaci kláves Ctrl+Enter:
$(document).keydown(function(e) ( // podporuje macOS X if ((e.ctrlKey || e.metaKey) && (e.keyCode == 13 || e.keyCode == 10)) ( / / vaše činy...))
Příklad použití událostí keydown a keyup:
... $("#jméno"). keydown(function())( $(this).css("background-color", "yellow"); )). keyup(function())( $(this).css("barva-pozadi, "růžová"); ));
jQuery - Události prvku formulářeV jQuery můžete zvýraznit následující události pro prvky formuláře a další:
- zaměření (zaměření)
- rozostření (zaměření)
- změna
- vstup (pro prvky textového formuláře)
- vybrat
- Předložit
Událost fokusu je odeslána prvku, když obdrží fokus. Tato událost je generována pro prvky input , select a link (a href="...") a také pro všechny další prvky, které mají nastavenou vlastnost tabindex. Zaměření na prvek se obvykle provádí kliknutím nebo stisknutím klávesy Tab na klávesnici. Událost fokusu nevybuchne.
Kromě focusu existuje ještě jedna podobná událost, nazývá se focusin. Na rozdíl od fokusu tato událost probublává a lze ji například použít k detekci události fokusu nadřazenými prvky.
Událost rozostření je odeslána prvku, když ztratí pozornost. Stejně jako focus má událost rozostření podobnou událost focusout. Tato událost se od rozmazání liší tím, že může bublat. Tuto funkci lze použít například k jejímu přijetí na nadřazené prvky, a nikoli pouze na prvek, který jej vyvolal (cíl).
Když například prvek div obdrží událost fokus, nastavte jeho pozadí na oranžové:
... $("#demo"). focusin(function())( $(this).css("background-color","orange"); )) .focusout(function())( $(this).css("background-color","zdědit ") ;));
Nebude možné provést přesně totéž pomocí událostí zaostření a rozmazání, protože nevyskakují:
$("#demo vstup"). focus(function())( $(this).parent().css("background-color","orange"); )) .blur(function())( $(this).parent().css( "barva pozadí","zdědit"); ));
jQuery - Změnit událostUdálost change je navržena tak, aby zaregistrovala změnu v hodnotě prvků input , textarea a select. U vybraných prvků, zaškrtávacích políček a přepínačů tato událost nastane okamžitě (to znamená, jakmile uživatel provede volbu). Ale u ostatních prvků tato událost nenastane, dokud daný prvek neztratí fokus.
Příklad použití události change ke sledování stavu prvku checkbox. Dostupnost tlačítka bude určena v závislosti na stavu (zaškrtnuto nebo nezaškrtnuto) zaškrtávacího políčka:
Odeslat... $(funkce() ( $("#souhlasím").on("změnit", funkce())( if (toto.zaškrtnuto) ( $("#odeslat").prop("vypnuto", false ); ) else ( $("#send").prop("disabled",true); ) )); ));
Příklad, ve kterém se podíváme na to, jak získat hodnotu prvku select, když se změní:
První hodnota Druhá hodnota Třetí hodnota ... $(function() ( $("#list").on("change", function())( var value = $(this).val(); $("# výsledek ").text(hodnota); )); ));
Příklad, ve kterém se podíváme na to, jak získat všechny vybrané prvky výběru, když se změní:
Zelená Červená Modrá Hnědá Fialová Šedá ... $("select") .change(function () ( var colors = ; $("select option:selected").each(function() ( colors.push($(this) .text()); )); console.log("Vybrané barvy: " + barvy.join()); )).change();
Příklad programového volání události change na prvku select:
// seznam - id prvku změny $("#list").trigger("change"); // zkratka $("#seznam").change(); // volá pouze obsluhu události change $("#list").triggerHandler("change");
Příklad použití události change k získání hodnoty vstupního prvku:
... $(function() ( // událost změny vstupní hodnoty (nastane pouze po ztrátě fokusu) $("input").on("change", function())( var value = $(this).val( ) ; console.log(hodnota); )); ));
Ale kromě události změny existuje také vstupní událost pro textové prvky. Tato událost se na rozdíl od změny generuje okamžitě a ne poté, co prvek ztratí fokus.
Příklad použití vstupní události k získání hodnoty vstupního prvku:
$("vstup").on("vstup",funkce())( var value = $(this).val(); console.log(value); ));
Příklad, který ukazuje jeden způsob, jak získat hodnotu prvku textarea:
... $("textarea").on("input",function())( var value = $(this).val(); console.log(value); ));
Příklad, ve kterém se podíváme na to, jak pomocí události change získat hodnotu vybraného vstupního prvku s typem rovným rádiu:
Windows Linux macOS ... $(function() ( $("input").on("change", function())( var value = $(this).val(); console.log(value); ) ) ;));
jQuery - Vyberte událostUdálost select generuje prohlížeč, když uživatel uvnitř vstupních prvků s type="text" nebo textarea vybere text.
$("#target").select(function() ( console.log("Vyberte volanou obsluhu události"); ));
jQuery – událost odeslání formuláře (odeslat)K události odeslání dojde u prvku, když se uživatel pokusí odeslat formulář. Tuto událost lze přidat pouze k prvkům formuláře.
Příklad použití události odeslání:
... ... $("#feedback").submit(function(e) ( // zrušení odeslání formuláře e.preventDefault(); // další akce, například odeslání formuláře přes ajax... ));
Programatická výzva k odeslání formuláře:
$("#zpětná vazba").submit(); $("#feedback").trigger("submit");
jQuery – Událost posouváníjQuery používá událost scroll ke sledování stavu posouvání.
Připojme například funkci k události posouvání stránky, která zobrazí prvek s třídou scrollup, pokud je hodnota posunu větší než 200 pixelů, a skryje jej, pokud je hodnota posunu menší než tato hodnota.
// krátký popis funkce $(window).scroll(function() ( // akce při rolování stránky... if ($(this).scrollTop()>200) ( $(.scrollup"). fadeIn() ; ) else ( $(".scrollup").fadeOut(); ) ));
jQuery – událost změny velikosti okna (změna velikosti)Chcete-li si poslechnout událost změny okna prohlížeče, použijte resize:
Vytvořme například handler, který při změně okna prohlížeče zobrazí na konci stránky svou šířku a výšku:
$(window).resize(function() ( $("body").append("
Šířka x Výška = " + window.innerWidth + " x " + window.innerHeight + "
"); }); jQuery – Přepsání výchozího chování událostiNěkteré prvky v HTML mají standardní chování. Když například uživatel klikne na odkaz, přejde na adresu uvedenou v atributu href. Pokud tuto akci nepotřebujete, můžete ji zrušit. Chcete-li přepsat výchozí chování, musíte zavolat metodu preventDefault objektu události v obslužné rutině události.
Zrušme například standardní chování všech odkazů na stránce, které mají třídu služby:
$("a.service").on("click",function(e)( //zrušení standardní akce prohlížeče e.preventDefault(); //akce, které odkaz provede... ));
Co se vynořuje a jak to zastavit
Kromě zrušení standardní akce je v mechanismu události také něco jako bublání. Spočívá v tom, že když prohlížeč generuje událost, nedělá tak pouze pro aktuální prvek (cíl), ale také pro všechny jeho potomky včetně rodiče:
Aktuální prvek (cíl) -> nadřazený prvek cíle -> prarodičovský prvek -> ... -> dokument -> okno
V jQuery existují scénáře, kdy některý prvek v prezentovaném řetězci má také handler pro tuto událost, který není třeba provádět. A aby se tato událost nerozšířila na tento živel, musí být zastavena. Chcete-li to provést, musíte v obslužné rutině požadovaného prvku zavolat metodu stopPropagation objektu události. Po zavolání této metody se událost zastaví a nevybuchne.
Například je nutné, aby při najetí kurzorem na prvek s třídou mark se jeho obsah stal oranžovým.
Nějaký text...fragment...pokračování... ... $(".mark").on("hover", function(e)( e.stopPropagation(); $(this).css ("barva ",oranžová); ), function(e)( e.stopPropagation(); $(this).css("barva",black); ) ));
V v tomto případě Pokud nezadáte metodu stopPropagation, pak když najedete kurzorem na prvek span s třídou mark, dojde k této události nejen u něj, ale také u všech jeho nadřazených prvků. A to v tomto příkladu povede k tomu, že se změní barva nejen textu uzavřeného v rozpětí, ale i celého odstavce.
Pokud potřebujete přepsat výchozí chování prohlížeče a zastavit bublání události, můžete v jQuery místo volání těchto dvou metod jednoduše vrátit false jako výsledek funkce.
$("a").on("click", function(e)( //e.preventDefault(); //e.stopPropagation(); ... return false; ));
Přidávání událostí k dynamicky vytvářeným objektůmChcete-li připojit událost k prvku, který ještě neexistuje, můžete použít následující konstrukci funkce on:
$(document).on(název události, selektor, obsluha); // dokument nebo jakýkoli jiný existující nadřazený prvek // eventName - název události // selektor - selektor, který filtruje podřízené položky, pro které je třeba spustit obslužnou rutinu události // handler - obslužnou rutinu události
Tuto akci lze provést díky skutečnosti, že událost vyskočí, a proto se vyskytuje u všech předků tohoto prvku. A objekt, ke kterému všechny události na stránce vybublají, je document . Proto jej ve většině případů volí. Poté, se znalostí selektoru, může funkce on programově vybrat mezi prvky (prvkem, který způsobil tuto událost (cíl) a všemi jeho předky včetně rodiče), které mu odpovídají. A pak pro všechny vybrané prvky spusťte obslužný program určený ve funkci on. Akce, jejichž prostřednictvím se zpracování událostí přenáší na jiný prvek (předchůdce), se v jQuery také nazývá proces delegování události.
Například přidejte událost k prvku, který ještě není na stránce:
Přidat tlačítko // když kliknete na prvek s id="addButton" přidá nové tlačítko do horní části stránky $("#addButton").on("click", function(e) ( $("body ").prepend("Smazat mě"); )); // přidání události kliknutí, která bude provedena pro prvky, které ještě nejsou na stránce $(document).on("click"".deleteMe", function() ( $(this).remove(); ));
Delegování lze využít nejen ke zpracování událostí dynamicky vytvářených objektů, ale také k tomu, aby se ke každému prvku (pokud jich na stránce může být hodně) nepřipojoval handler.
Například zakážeme sledování externích odkazů v komentářích (takové akce přesměrujeme na stránku pryč):
$(document).on("click","#comment a",function(e) ( if(!(location.hostname === this.hostname || !this.hostname.length)) ( e.preventDefault( ); location.href="away?link="+encodeURIComponent($(this).attr("href")); ) ));
jQuery - Odebrat obsluhu událostiObslužné rutiny událostí jsou odstraněny pomocí metody off. Navíc jej lze použít k odstranění pouze těch handlerů, které byly přidány metodou on.
Volání metody off bez argumentů odstraní všechny obslužné rutiny událostí připojené k zadaným prvkům.
Například deaktivujme všechny obslužné rutiny pro prvky s třídou link:
$(".link").off();
Například odeberme událost click ze všech prvků s třídou odkazu:
$(".odkaz").off("odkaz");
Speciální selektor (**) umožňuje smazat pouze delegované události a zachovat ty nedelegované:
$(".link").off("click","**");
Odeberte pouze zadané delegované události (pomocí selektoru):
// přidání delegované události $("ul").on("click","li", function())( // výstup obsahu prvku li do konzole console.log($(this).text ());)); // odstranění delegované události $("ul").off("click","li");
Odeberte všechny obslužné rutiny události delegovaného kliknutí openModal v modálním jmenném prostoru pro prvky s třídou show:
$("body").on("click.modal", ".show", openModal);
Vytvořte vlastní událostjQuery používá k vytváření vlastních událostí metody on a trigger.
Podívejme se na to, jak vytvořit vlastní událost jQuery pomocí následujícího příkladu:
Volání zvýraznění vlastní události (zelená barva) Volání zvýraznění vlastní události (červená barva) ... // přidání vlastní události ke všem prvkům p, které změní barvu textu a jeho obsahu // příjem dat předávaných spouštěcí metoda se provádí pomocí barevných argumentů a názvu $(".modul p").on("zvýraznění", funkce(e, barva, název) ( $(this).css("barva",barva); $( this).text("Zvýraznění volané vlastní události " +title); )); // když kliknete na prvek s třídou úspěchu, zavoláte vlastní událost zvýraznění a předáte jí parametry $(".success").click(function())( // pomocí druhého argumentu, kterému předáme data obsluha události $(this).closest(". modul").find("p").trigger("zvýraznění",["zelená","(zelená barva)"]); )); // když kliknete na prvek s třídou error, zavoláte vlastní událost zvýraznění a předáte jí parametry $(".error").click(function())( // pomocí druhého argumentu, kterému předáme data obsluha události $(this).closest(". modul").find("p").trigger("zvýraznění",["červená","(červená barva)"]); ));
Předchozí téma se zabývalo událostmi, ke kterým dochází při stisknutí kláves. V tomto tématu se podíváme na další formové akce. Včetně odeslání formuláře na server.
Prvek v centru pozornostiKdyž je prvek formuláře fokus, spustí se událost fokus, a když prvek zhasne, spustí se událost rozostření. Pojďme vytvořit vstupní pole a výstupní text do konzole, když získá fokus a když ztratí fokus:
HTML kód:
Nemá smysl používat tyto události ke změně stylu prvku. Pro tento účel existuje v CSS pseudotřída zvaná focus.
Zadání hodnotyVstupní událost nastane, když uživatel zadá text do vstupního pole. Spustí se při přidání nebo odebrání každého znaku a také při zkopírování textu do vstupního pole. V některých prohlížečích to funguje neobvykle: pokaždé, když je zadán znak, vyvolá se událost rozostření, pak se provede obslužná rutina události input a pak se vyvolá událost fokus. Pokud nejsou žádné obslužné nástroje pro zaostření a rozmazání, pak není problém. Ale pokud ano, vystřelí pokaždé, když je přidán symbol.
Pojďme na stránku přidat další značku a zobrazit její hodnotu při zadávání textu:
HTML kód:
JavaScript:
28 |
var newv = document.getElementById("new_value"); newv.onchange = function () ( console.log("Hodnota změněna na: "+newv.value); ); |
Událost odeslání se spustí při odeslání formuláře na server. Slouží k ověření údajů, které uživatel zadal do formuláře. Obslužná rutina zkontroluje hodnoty prvků formuláře, a pokud jsou nějaké hodnoty zadány nesprávně, formulář se zruší. Obvykle se zobrazí zpráva, která uvádí, co je třeba opravit.
Umístíme vytvořené značky do formuláře a přidáme tlačítko pro odeslání formuláře:
HTML kód:
V předchozích příkladech již byly prvky formuláře nalezeny, takže handler znovu nevyhledává.
Pokud je formulář vyplněn správně, to znamená, že všechna pole mají alespoň dva znaky, prohlížeč se pokusí spustit soubor uvedený v atributu action a dojde k chybě, protože takový soubor neexistuje. V tom ale není žádné riziko, takže není třeba se bát skript otestovat. Pokud do jednoho z polí zadáte méně než dva znaky, zobrazí se zpráva a odeslání bude zrušeno. Pokud je kontrol hodně, můžete pro každou kontrolu zobrazit jinou zprávu a zrušit odeslání formuláře.