DIV

,

Ugyanazok a kezelők, mint korábban, de ezúttal - a merítés szakaszában. Nos, az elfogás működés közbeni megtekintéséhez kattintson a benne lévő elemre

A kezelők felülről lefelé haladva fognak dolgozni: FORM → DIV → P.

A JS kód a következő:

varelems = document.querySelectorAll("form,div,p"); // minden elemre felakasztunk egy kezelőt az elfogás szakaszában (var i = 0; i< elems.length; i++) { elems[i].addEventListener("click", highlightThis, true); }

Senki sem zavarja, hogy mindkét szakaszhoz kezelőket rendeljen, például:

varelems = document.querySelectorAll("form,div,p"); for (var i = 0; i< elems.length; i++) { elems[i].addEventListener("click", highlightThis, true); elems[i].addEventListener("click", highlightThis, false); }

Kattintson a belső elemre

Az esemény átadási sorrendjének megtekintéséhez:
FORM → DIV → P → P → DIV → FORM legyen. Vegye figyelembe, hogy az elem

Mindkét szakaszon részt vesz.

Eredmények

• Amikor egy esemény bekövetkezik, az elem, amelyen az esemény bekövetkezett, esemény.célként lesz megjelölve.
• Az esemény először a dokumentumgyökértől az event.target-ig terjed, és közben meghívja az addEventListener(…., true) segítségével biztosított kezelőket.
• Az esemény az event.targettől a dokumentum elejéig terjed, miközben meghívja az addEventListener(…., false) által biztosított kezelőket.

Minden kezelő hozzáférhet az esemény tulajdonságaihoz:

• Az event.target az a legmélyebb elem, amelyen az esemény ténylegesen megtörtént.
• event.currentTarget (=this) az az elem, amelyen a Ebben a pillanatban az önfeldolgozó dolgozott (amihez „elérkezett” az esemény).
• event.eventPhase - melyik fázisban lőtt az eseménykezelő (merülés = 1, float = 3).

A bugyborékolás megállítható az event.stopPropagation() metódus meghívásával, de ez nem ajánlott, mivel váratlan célokra szükség lehet az eseményre.

Most áttekintünk néhány speciális dolgot az Event objektummal való munka során, nevezetesen: buborékolást és elfogást, valamint az esemény delegálását.

Esemény bugyborékolása

Képzelje el, hogy több beágyazott blokkja van:

Ha rákattint a legbelső blokkra, az eseményre kattintásra először fordul elő benne, majd aktiválódik a szülőjében, a szülő szülőjében stb., amíg el nem éri azt a címkét testés tovább a címkére html(majd hozzá dokumentumés azelőtt ablak).

És ez logikus, mert a belső blokkra kattintva egyszerre kattint az összes külsőre.

Lássuk ezt a következő példában: 3 blokkunk van, mindegyikhez egy onclick esemény kapcsolódik:

Kattintson a legbelső piros blokkra - és látni fogja, hogyan fog működni először a piros blokk onclick-je, majd a kék, majd a zöld:

Ezt a viselkedést ún felszínre kerülése események - egy légbuborék alulról való felemelkedésével analógiával. Csakúgy, mint a buborék, úgy tűnik, hogy a belső elemre való kattintásunk a tetejére úszik, és minden alkalommal magasabb blokkokon aktiválódik.

esemény.célpont

Tegyük fel, hogy két elemünk van: egy div és egy p bekezdés, amely ebben a divben található. Kössük onlicket dívává:

Ha erre a div-re kattintunk, egy bekezdéshez ugorhatunk, vagy olyan helyre, ahol ez a bekezdés nem létezik.

Hogyan lehet ez – nézze meg a következő példát: a zöld a div, a kék pedig a bekezdésünk:

Ha a zöld részre kattintunk, akkor a div-re kattintunk, ha pedig a kékre, akkor először a bekezdésen, majd a div-en történik a kattintás. De mivel az onclick kifejezetten a div-hez van csatolva, általában nem vesszük észre a bekezdés jelenlétét.

Néha azonban szeretnénk tudni, hogy a kattintás közvetlenül a div-re vagy annak leszármazott bekezdésére történt-e. Ebben segítségünkre lesz az Event objektum és annak tulajdona. esemény.célpont- pontosan azt az elemet tárolja, amelyben a kattintás történt.

A következő példában mi div, benne fekszik pés benne - span.

Kössük az onclick eseményt a legfelső elemhez (div), és kattintson a különböző elemekre: div, p, span. Használva esemény.célpont lekérni a legalsó elemet, ahol az esemény történt, és megjeleníteni a nevét a tagName segítségével.

Ha például rákattint a spanra, akkor az esemény elkapja a divünket (elvégre az onclick hozzá van csatolva), de esemény.célpont pontosan fog hazudni span:

Kattintson a különböző blokkra - látni fogja az eredményt:

Az emelkedés megszűnése

Tehát már tudja, hogy minden esemény felugrik a legtetejéig (akár html tag majd a dokumentumhoz, majd az ablakhoz). Néha meg kell állítani ezt az emelkedést. Ezt bármely elem megteheti, amelyen keresztül az esemény felbukkan. Ehhez az elem kódjában hívja meg a metódust event.stopPropagation().

A következő példában a piros blokkra kattintva magától működni fog, majd a kékre és ennyi - a kék blokk megállítja a további emelkedést, és a zöld blokk nem reagál semmilyen módon:

Kattintson a piros blokkra - látni fogja az eredményt:

elmerülés

Az események pezsgése mellett van még merülés(tudományos adatok szerint lehallgatási szakasz). Ez azt jelenti, hogy az esemény először fentről lefelé halad (elfogó szakasz), eléri elemünket (célstádium), és csak ezután kezd lebegni (buborékoló szakasz).

Eseménykezelőt az elfogás stádiumának figyelembe vételével csak a segítségével akaszthat fel addEventListener. Ehhez van egy harmadik paramétere: ha igaz, akkor az esemény az elfogási szakaszban indul, ha hamis, akkor a buborékolási szakaszban (ez alapértelmezés szerint):

Vargreen = document.getElementById("zöld"); green.addEventListener("click", func, true); funkció(esemény) ( )

A tulajdonság segítségével meghatározható, hogy melyik szakaszban történt egy esemény event.eventPhase. A következő értékeket veheti fel: 1 - elfogási szakasz, 2 - célszakasz, 3 - emelkedési szakasz.

Bevezetés a delegációba

Képzeljünk el egy helyzetet: hagyjuk ul Többekkel li. Minden li-hez a következő esemény kapcsolódik: ha rákattint, a "!" hozzáadódik a végéhez.

Valósítsuk meg a fentieket:

• 1. bekezdés
• 2. pont
• 3. pont
• 4. pont
• 5. pont

var li = document.querySelectorAll("#ul li"); //A ciklusban minden li-re felakasztjuk az addSign függvényt: for (var i = 0; i

Kattints a li-re - látni fogod, hogyan kerül a "!" a végére:

• 1. bekezdés
• 2. pont
• 3. pont
• 4. pont
• 5. pont

Legyen most egy gombunk is, amelyre kattintva egy új kerül az ul. végére li"tétel" szöveggel. Meglepetésben vagyunk: a mellékelt esemény nem fog működni újnak li! Győződjünk meg erről:

• 1. bekezdés
• 2. pont
• 3. pont
• 4. pont
• 5. pont

Adjunk hozzá li

Kattintson a gombra a li hozzáadásához, majd erre az új li-re - nem reagál:

• 1. bekezdés
• 2. pont
• 3. pont
• 4. pont
• 5. pont

Adjunk hozzá li

A probléma megoldásához az új li létrehozásakor függesszen rá egy függvényt addSign az addEventListeneren keresztül. Valósítsuk meg ezt:

• 1. bekezdés
• 2. pont
• 3. pont
• 4. pont
• 5. pont

Adjunk hozzá li var li = document.querySelectorAll("#ul li"); for (var i = 0; i

• 1. bekezdés
• 2. pont
• 3. pont
• 4. pont
• 5. pont

Adjunk hozzá li

Van egy másik út is a probléma megkerülésére – az esemény delegálása. Elemezzük.

Rendezvény delegáció

A delegálás lényege a következő: nem minden li-re, hanem a szülőjükre akasztunk fel egy eseményt ul.

Ugyanakkor meg kell őrizni a forgatókönyvünk teljesítményét: ahogy eddig is, a li-re kattintva a "!" felirat kerül a végére. Csak az esemény az új verzióban lesz függesztve az ul:

var ul = document.getElementById("ul"); //Az esemény felfüggesztése ul: ul.addEventListener("click", addSign); függvény addSign() ( )

Hogyan tegyük ezt: mivel az esemény az ul-ra van akasztva, a függvényen belül elkaphatjuk a li-t esemény.célpont. Hadd emlékeztesselek, mi az event.target – pontosan ez a címke, amelyben a kattintás történt, esetünkben az li.

Tehát itt van a megoldás a problémánkra delegálás útján:

• 1. bekezdés
• 2. pont
• 3. pont
• 4. pont
• 5. pont

A kód végrehajtásának eredménye:

• 1. bekezdés
• 2. pont
• 3. pont
• 4. pont
• 5. pont

Ebben az esetben a megoldásunk automatikusan működik akár új li, mert az esemény nem li, hanem ul-ra van kifüggesztve:

• 1. bekezdés
• 2. pont
• 3. pont
• 4. pont
• 5. pont

Adjunk hozzá li var ul = document.getElementById("ul"); ul.addEventListener("kattintás", addSign); function addSign() ( event.target.innerHTML = event.target.innerHTML + "!"; ) //A gomb megvalósítása új li hozzáadásához: var button = document.getElementById("button"); button.addEventListener("click", addLi); függvény addLi() ( var li = document.createElement("li"); li.innerHTML = "new li"; ul.appendChild(li); )

Kattintson a gombra a li hozzáadásához, majd erre az új li-re - reagál:

• 1. bekezdés
• 2. pont
• 3. pont
• 4. pont
• 5. pont

Adjunk hozzá li

A kódunk működik, de nem hibátlan. Elemezzük ezeket a hiányosságokat, és írjunk egy univerzálisabb megoldást.

Általános rendezvény-delegáció

Kódunk hátránya akkor nyilvánul meg, ha a li-ben van néhány beágyazott címke. Esetünkben legyen címkék én:

Ebben az esetben nyomja meg én felkiáltójelet ad hozzá vége i tag, nem címke li, ahogy szeretnénk (ha a dőlt betűn kívül a li-re kattintasz, akkor minden rendben lesz):

• bekezdés dőlt betűvel 1
• bekezdés dőlt betűvel 2
• bekezdés dőlt betűvel 3
• bekezdés dőlt betűvel 4
• bekezdés dőlt betűvel 5

var ul = document.getElementById("ul"); ul.addEventListener("kattintás", addSign); függvény addSign() ( event.target.innerHTML = event.target.innerHTML + "!"; )

Kattintson a dőlt betűre - látni fogja, hogyan "!" bekerül a végére (a dőlt betűn kívüli megnyomás jól működik):

A probléma megoldása a következőképpen történik (nem a leírt módszer az egyetlen, hanem a legegyszerűbb): a legközelebbi metódussal megtaláljuk a legközelebbi li-t, amely az event.target szülője, így: event.target.closest("li").

Hogyan működik: ha a kattintás be volt kapcsolva én, majd be esemény.célpont ebben hazudok, és benne event.target.closest("li")- mi li amiért az eseménynek tüzelnie kell.

Ha a kattintás a li, majd be esemény.célpont, és be event.target.closest("li") a mi li hazudni fog.

Nézzük meg:

• bekezdés dőlt betűvel 1
• bekezdés dőlt betűvel 2
• bekezdés dőlt betűvel 3
• bekezdés dőlt betűvel 4
• bekezdés dőlt betűvel 5

var ul = document.getElementById("ul"); ul.addEventListener("click", function(event) ( var li = event.target.closest("li"); if (li) ( //ellenőrizd, hogy nincs-e egyáltalán szülő li li.innerHTML = li.innerHTML + "!"; ) ));

A kód végrehajtásának eredménye:

Nem számít, milyen mély a beágyazás: tag én címkében lehet b, és a címkében található spanés csak azután be li- mindegy: építkezés event.target.closest("li") bármely fészkelő szintről megtalálja a szülőt.

Amikor egy esemény bekövetkezik, a kezelők először magát a beágyazott elemet aktiválják, majd a szülőt, majd a fölé, és így tovább, felfelé a beágyazott láncon.

Például 3 beágyazott elem van: FORM > DIV > P , mindegyikhez egy kezelő tartozik:

A kód: FORMA

A buborékolás biztosítja, hogy egy kattanás a belső

Először az onclick kezelőt hívja meg (ha van ilyen).

Ezért ha a fenti példában a P-re kattint, akkor a figyelmeztetés sorban jelenik meg: p → div → form.

Ezt a folyamatot buborékolásnak nevezik, mert az események a belső elemből felfelé bugyborékolnak a szülőkön keresztül, hasonlóan, mint egy légbuborék a vízben.

esemény.célpont

Bármelyik elemen is elkapjuk az eseményt, mindig megtudhatja, hogy pontosan hol történt.
Az eseményt elindító legmélyebb elemet "cél" vagy "forrás" elemnek nevezik, és event.target néven érhető el.

Különbségek ettől (=event.currentTarget):

• Az event.target az a forráselem, amelyen az esemény bekövetkezett, ez változatlan a buborékolási folyamat során.
• ez az az aktuális elem, amit a buborékolás elért, a kezelő éppen végrehajtja rajta.

Például, ha csak egy form.onclick kezelő van, akkor "elfog" minden kattintást az űrlapon belül. Ahol van egy kattanás belül – felugrik az elemhez

Az, amelyen a kezelő futni fog.

Ahol:

• ez (=event.currentTarget) mindig maga az űrlap lesz, mivel a kezelő rálőtt.
• Az event.target az űrlapon belül egy adott elemre mutató hivatkozást tartalmaz, a leginkább beágyazott elemre, amelyre kattintottak.

Az is előfordulhat, hogy az event.target és ez ugyanaz az elem, például ha nincs más címke az űrlapon, és magára az elemre történt a kattintás .

Hagyja abba az esemény buborékolását

Az emelkedés egyenesen felfelé halad. Általában az esemény felfelé és felfelé buborékol egészen az elemig , majd egészen a document , sőt néha az ablakig is, amely az összes kezelőt meghívja az útjába.

De bármely köztes szoftver eldöntheti, hogy az esemény teljesen feldolgozásra kerül, és megállíthatja a bugyborékolást.

A bugyborékolás megállításához meg kell hívni a módszert event.stopPropagation().

Például itt a gombra kattintva a kezelő body.onclick nem fog működni:

A kód:
Kattints ide

Esemény elfogás. event.stopImmediatePropagation()

Ha egy elemnek több kezelője van egy eseményhez, akkor még ha a buborékolás leáll, mindegyik végrehajtásra kerül.

vagyis stopPropagáció megakadályozza az esemény továbbhaladását, de az aktuális elemen minden kezelő működni fog.

A feldolgozás teljes leállításához, modern böngészők támogatási módszer event.stopImmediatePropagation(). Nemcsak a buborékolást akadályozza meg, hanem leállítja az eseményfeldolgozást is az aktuális elemen.

IE8 különbségek

A könnyebb eligazodás érdekében egy részbe gyűjtöttem az IE8-különbségeket, amelyek a buborékolással kapcsolatosak.

Tudásukra szükség lesz, ha úgy dönt, hogy tiszta JS-ben ír, keretrendszerek nélkül, és szüksége van IE8 támogatásra.

Nincs event.currentTarget tulajdonság

Vegyük figyelembe, hogy ha az on tulajdonságon keresztül rendelünk hozzá kezelőt, akkor ez van, így az event.currentTarget általában nem szükséges, viszont az attachEvent -en keresztül történő hozzárendeléskor a kezelő ezt nem kapja meg, így az aktuális elemet, ha szükséges, csak innen lehet átvenni. lezárások.

Az Event.srcElement az event.target helyett az IE8-ban használatos

Ha olyan kezelőt írunk, amely támogatja az IE8-at és a modern böngészőket is, akkor a következőképpen indíthatjuk el:

Kód: elem.onclick = function(event) (
esemény = esemény || ablak.esemény;
var target = event.target || event.srcElement;

// ... most van egy eseményobjektum és egy cél
...
}

A buborékolás leállításához használja az event.cancelBubble=true kódot

A felugró keresztböngészőt így állíthatja le:

Kód: event.stopPropagation ? event.stopPropagation() : (event.cancelBubble=true);

Teljes

• Amikor egy esemény bekövetkezik, az elem, amelyen az történt, „célként” (event.target) van megjelölve.
• Ezután az esemény először a dokumentumgyökértől az event.target-ig terjed, és közben meghívja az addEventListener(.... igaz) segítségével biztosított kezelőket.
• Az esemény ezután az event.target-től a dokumentumgyökérig terjed, és közben hívja a kezelőket, az on* és addEventListener(...., false) segítségével.

• Az event.target a legmélyebb elem, amelyen az esemény bekövetkezett.
• event.currentTarget (=this) – az az elem, amelyen a kezelő éppen aktiválva van (amelyhez az esemény „lebegett”).
• event.eventPhase - melyik fázisban működött (merülés = 1, emelkedés = 3).

Az események olyan műveletek vagy események, amelyek a programozott rendszerben történnek, és amelyekről a rendszer tájékoztat tudsz ha szükséges, válaszoljon rájuk valamilyen módon. Például, ha a felhasználó rákattint egy gombra egy weboldalon, akkor a műveletre egy információs mező megjelenítésével válaszolhat. Ebben a cikkben a környező események néhány fontos fogalmát tárgyaljuk, és megnézzük, hogyan működnek a böngészőkben. Ez nem lesz egy kimerítő tanulmány, csak annyit kell tudnia ebben a szakaszban.

Előfeltételek:	Alapvető számítógépes ismeretek, a HTML és a CSS alapvető ismerete, a JavaScript első lépései .
célkitűzés:	Megérteni az események alapvető elméletét, hogyan működnek a böngészőkben, és hogyan különbözhetnek az események a különböző programozási környezetekben.

Szerencsés események sorozata

mint fent, eseményeket olyan műveletek vagy események, amelyek a programozott rendszerben történnek - a rendszer valamilyen jelet produkál (vagy "kigyújt"), amikor egy esemény bekövetkezik, és egy olyan mechanizmust is biztosít, amellyel valamilyen művelet automatikusan végrehajtható (azaz , fut valamilyen kód), amikor az esemény bekövetkezik. Például egy repülőtéren, amikor a kifutópálya szabad a felszállás előtt, jelzést küldenek a pilótának, és ennek eredményeként megkezdik a gép vezetését.

A web esetében az események a böngészőablakon belül indulnak el, és általában egy adott elemhez kapcsolódnak, amely abban található - ez lehet egyetlen elem, elemkészlet, az aktuális lapon betöltött HTML-dokumentum, vagy a teljes böngészőablakot. Nagyon sokféle esemény fordulhat elő, például:

• A felhasználó rákattint az egeret egy adott elemre, vagy a kurzort egy bizonyos elem fölé viszi.
• A felhasználó megnyom egy billentyűt a billentyűzeten.
• A felhasználó átméretezi vagy bezárja a böngészőablakot.
• Űrlap benyújtása folyamatban.
• Videó lejátszása, szüneteltetése vagy a lejátszás befejezése.
• Hiba történt.

Ebből (és az MDN esemény referenciájára pillantva) megállapíthatja, hogy vannak nagyon események, amelyekre reagálni lehet.

Minden elérhető eseményhez tartozik egy eseménykezelő, amely egy kódblokk (általában egy JavaScript-függvény, amelyet programozóként hoz létre), amely az esemény aktiválásakor fut le. Amikor egy ilyen kódblokkot úgy határozunk meg, hogy egy esemény aktiválására válaszul lefusson, akkor azt mondjuk, hogy igen eseménykezelő regisztrálása. Vegye figyelembe, hogy az eseménykezelőket néha hívják eseményhallgatók- a mi céljainkra nagyjából felcserélhetők, bár szigorúan véve együtt működnek. A figyelő figyel az eseményre, és a kezelő a kód, amely válaszul lefut az eseményre.

jegyzet: A webes események nem részei a JavaScript alapnyelvének – a böngészőbe épített API-k részeként vannak meghatározva.

Egy egyszerű példa

Nézzünk meg egy egyszerű példát, hogy megmagyarázzuk, mire gondolunk. A kurzus számos példájában már láthatta az eseményeket és az eseménykezelőket, de nézzük meg újra, hogy megerősítsük tudásunkat. A következő példában egy single , amelynek megnyomásakor a háttér véletlenszerű színre változik:

Színét változtatni

Gomb ( margó: 10 képpont );

A JavaScript így néz ki:

Const btn = document.querySelector("button"); függvény random(szám) ( return Math.floor(Math.random() * (szám+1)); ) btn.onclick = function() ( const rndCol = "rgb(" + random(255) + "," + random(255) + "," + random(255) + ")"; document.body.style.backgroundColor = rndCol; )

Ebben a kódban a Document.querySelector() függvény segítségével egy btn nevű állandóban tárolunk egy hivatkozást a gombra. Definiálunk egy függvényt is, amely véletlen számot ad vissza. A kód harmadik része az eseménykezelő. A btn konstans a-ra mutat elemet, és az ilyen típusú objektumok számos eseményt aktiválhatnak, és ezért eseménykezelők is elérhetők. Figyeljük a kattintási esemény aktiválását úgy, hogy az onclick eseménykezelő tulajdonságot egy névtelen függvényre állítjuk, amely kódot tartalmaz, amely véletlenszerű RGB színt generál, és beállítja a háttérszín megegyezik vele.

Ez a kód minden alkalommal lefut, amikor a kattintási esemény aktiválódik a

elemet, vagyis amikor a felhasználó rákattint.

A példa kimenete a következő:

Nem csak weboldalakról van szó

Egy másik dolog, amit érdemes megemlíteni ezen a ponton, hogy az események nem egyediek a JavaScriptben – a legtöbb programozási nyelvnek van valamilyen eseménymodellje, és a modell működése gyakran eltér a JavaScripttől. Valójában az eseménymodell a JavaScriptben webhez oldalak eltérnek a JavaScript eseménymodelljétől, mivel azt más környezetekben használják.

Soron belüli eseménykezelők – ne használja ezeket

Egy ehhez hasonló mintát is láthat a kódjában:

Nyomja meg function bgChange() ( const rndCol = "rgb(" + random(255) + "," + random(255) + "," + random(255) + ")"; document.body.style.backgroundColor = rndCol; )

Az eseménykezelők regisztrálásának legkorábbi módja a weben megtalálható eseménykezelő HTML attribútumok(vagy soron belüli eseménykezelők), mint a fent látható - az attribútum értéke szó szerint az a JavaScript-kód, amelyet az esemény bekövetkeztekor futtatni szeretne. A fenti példa egy elemen belül definiált függvényt hív meg, amely végrehajtható kód beágyazására vagy hivatkozásra szolgál; ezt általában JavaScript kód beágyazására vagy hivatkozásra használják.">

A legtöbb eseménykezelő, amellyel találkozni fog, csak egy szabványos tulajdonság- és függvénykészlettel (metódussal) rendelkezik az eseményobjektumhoz; a teljes listát lásd az Eseményobjektum-referenciában. Néhány fejlettebb kezelő azonban olyan speciális tulajdonságokat ad hozzá, amelyek extra adatokat tartalmaznak. A Media Recorder API-nak például van egy dataavailable eseménye, amely akkor indul el, amikor hang- vagy videófelvételt rögzítenek, és elérhető a művelethez (például elmentéséhez vagy visszajátszásához). "s event objektum rendelkezik egy adattulajdonsággal, amely tartalmazza a rögzített hang- vagy videoadatokat, amelyek lehetővé teszik, hogy elérje azokat, és tegyen velük valamit.

Az alapértelmezett viselkedés megakadályozása

Néha olyan helyzetbe kerül, hogy meg akarja akadályozni, hogy egy esemény azt tegye, amit alapértelmezés szerint csinál. A leggyakoribb példa egy webes űrlap, például egy egyéni regisztrációs űrlap. Amikor kitölti a részleteket és a küldés gomb megnyomásával a természetes viselkedés az, hogy az adatok a szerveren egy megadott oldalra kerülnek feldolgozásra, és a böngésző átirányul valamilyen "sikerüzenet" oldalra (vagy ugyanarra az oldalra, ha másik nem meghatározott.)

A probléma akkor jelentkezik, ha a felhasználó nem megfelelően küldte be az adatokat – fejlesztőként szeretné megakadályozni a szervernek való elküldést, és hibaüzenetet szeretne adni, hogy mi a hiba, és mit kell tenni a dolgok javításához. Egyes böngészők támogatják automatikus űrlapadat-ellenőrzési funkciók, de mivel sokan nem, azt tanácsoljuk, hogy ne hagyatkozzon ezekre, és hajtsa végre a saját érvényesítési ellenőrzéseit. Nézzünk egy egyszerű példát.

Először is, egy egyszerű HTML űrlap, amely megköveteli a vezeték- és keresztnevének megadását:

Keresztnév:

Vezetéknév:

Div (margó-alsó: 10 képpont; )

Most egy kis JavaScript – itt egy nagyon egyszerű ellenőrzést valósítunk meg egy onsubmit eseménykezelőn belül (a küldési esemény elküldésekor elindul egy űrlapon), amely megvizsgálja, hogy a szövegmezők üresek-e. Ha igen, akkor meghívjuk a preventDefault() függvényt az eseményobjektumban – amely leállítja az űrlap elküldését –, majd hibaüzenetet jelenítünk meg az űrlapunk alatti bekezdésben, hogy elmondjuk a felhasználónak, hogy mi a hiba:

Const form = document.querySelector("form"); const fname = document.getElementById("fname"); const lname = document.getElementById("lname"); const para = document.querySelector("p"); form.onsubmit = function(e) ( if (fname.value === "" || lname.value === "") ( e.preventDefault(); para.textContent = "Mindkét nevet ki kell töltenie! ";))

Nyilvánvalóan ez elég gyenge űrlapellenőrzés - nem akadályozza meg, hogy a felhasználó például szóközökkel vagy számokkal érvényesítse az űrlapot a mezőkbe -, de például célra ez rendben van. A kimenet a következő:

Esemény bugyborékolása és rögzítése

Az utolsó téma, amivel itt nem fogsz találkozni, de nagyon fájdalmas lehet, ha nem érted. Az eseménybuborékolás és a rögzítés két olyan mechanizmus, amelyek leírják, mi történik, ha két azonos típusú eseménykezelőt aktiválnak egy elemen. Nézzünk egy példát, hogy ezt megkönnyítsük – nyissa meg a show-video-box.html példát egy új lapon (és egy másik lapon a példát). Az alábbiakban élőben is elérhető:

Rejtett videó példa

Videó megjelenítése

Ez egy nagyon egyszerű példa, amely megmutatja és elrejti a ) az áramlási tartalom általános tárolóját. Nincs hatással a tartalomra vagy az elrendezésre, amíg a CSS használatával nem stílusos.">