Események és eseménykezelők JavaScriptben. javascript onclick esemény és három módszer az események kezelésére javascript események

Egyes programokat használnak JavaScript esemény közvetlenül a felhasználói bevitellel dolgozhat. Az ilyen kölcsönhatások bekövetkezésének pillanatát és sorrendjét nem lehet előre megjósolni.

Eseménykezelők

A gombnyomásra úgy reagálhat, hogy folyamatosan leolvassa annak állapotát, hogy elkapja a gomb megnyomásának pillanatát, mielőtt ismét felengedné.

A primitív gépeken így kezelték az adatbevitelt. Fejlettebb a billentyűleütés észlelése és sorba állítása. A program ezután rendszeresen ellenőrizheti az új események sorát, és reagálhat arra, amit ott talál. Ebben az esetben a programnak emlékeznie kell a várólista vizsgálatára, és ezt gyakran meg kell tennie.

A gomb lenyomásától kezdve, amíg a program ezt az eseményt észleli, valójában nem válaszol a kérésekre. Ezt a megközelítést szavazásnak (polling) hívják.

A legtöbb programozó megpróbálja elkerülni, ha lehetséges.

A legjobb módszer egy olyan rendszer megvalósítása, amely lehetővé teszi a kódnak, hogy reagáljon az eseményekre, ahogy azok megtörténnek. A böngészők úgy valósítják meg, hogy lehetővé teszik kezelői funkciók regisztrálását meghatározott JavaScript-eseményekhez:

Kattintson erre a dokumentumra a kezelő aktiválásához.

addEventListener("kattintás", function() ( console.log("Te kattintottál!"); ));

Az addEventListener függvény regisztrálva van, így a második argumentuma minden alkalommal meghívásra kerül, amikor az első argumentum által leírt esemény bekövetkezik.

Események és DOM csomópontok

Minden böngésző eseménykezelő egy kontextussal van regisztrálva. Az addEventListener függvény meghívásakor a teljes ablak metódusaként kerül meghívásra, mivel a böngészőben a globális tartomány megegyezik az ablak objektummal. Minden DOM-elemnek megvan a saját addEventListener metódusa, amely lehetővé teszi az adott elemen lévő események figyelését:

Kattintson rám

Itt nincs felvezető.

varbutton = document.querySelector("button"); button.addEventListener("kattintás", function() ( console.log("Kattintott a gomb."); ));

BAN BEN ezt a példát a kezelő a gombcsomóponthoz van rögzítve. A JavaScript egéresemények aktiválják a kezelőt, de a dokumentum többi részében lévő kattintások nem.

A csomópont onclick attribútuma beállításával ugyanazt az eredményt kapjuk. De egy csomópontnak csak egy onclick attribútuma van, így csomópontonként csak egy kezelőt regisztrálhat. Az addEventListener metódus lehetővé teszi tetszőleges számú figyelő hozzáadását. Így biztosítva vagyunk a már regisztrált kezelő véletlen cseréjére.

A removeEventListener metódus ugyanazokkal az argumentumokkal kerül meghívásra, mint az addEventListener. Eltávolítja a kezelőt:

Egyszeri gomb var gomb = document.querySelector("button"); function Once() ( console.log("Kész."); button.removeEventListener("kattintás", egyszer); ) button.addEventListener("kattintás", egyszer);

Egy kezelő függvény törléséhez nevet adunk neki (például egyszer ). Így adjuk át mind az addEventListenernek, mind a removeEventListenernek.

Eseményobjektumok

Bár a fenti példákban nem említettük, egy argumentum kerül átadásra a JavaScript eseménykezelő függvénynek: az eseményobjektum. További információkkal szolgál az eseményről. Például, ha meg akarjuk tudni, hogy melyik egérgombot nyomták meg, akkor meg kell kapnunk az eseményobjektum melyik tulajdonságának értékét:

Kattintson rám bármelyik egérgombbal var button = document.querySelector("button"); button.addEventListener("mousedown", function(event) ( if (event.which == 1) console.log("Bal gomb"); else if (event.which == 2) console.log("Középső gomb" ); else if (event.which == 3) console.log("Jobb gomb"); ));

Az objektumban tárolt információk az esemény típusától függően eltérőek. Az objektum típus tulajdonsága mindig tartalmaz egy karakterláncot, amely azonosítja az eseményt (például "click" vagy "mousedown").

Terítés

A szülőcsomópontokhoz regisztrált eseménykezelők (például JavaScript érintési események ) a gyermekelemekben előforduló eseményeket is megkapják. Ha egy bekezdésen belüli gombra kattintottak, a bekezdés eseménykezelői is kapnak egy kattintási eseményt.

Az esemény attól a csomóponttól terjed, ahol megtörtént, a szülőcsomópontra és a dokumentumgyökérre. Miután egy adott csomóponton regisztrált összes kezelő felváltva tüzelt, a teljes ablakhoz regisztrált kezelők lehetőséget kapnak arra, hogy válaszoljanak az eseményre.

Az eseménykezelő bármikor meghívhatja a stopPropagation metódust az esemény objektumon, hogy megakadályozza az esemény további terjedését. Ez akkor lehet hasznos, ha van egy gomb egy másik kattintható elemen belül, és nem szeretné, hogy a külső elemek kattintási viselkedése aktiválódjon, amikor a gombra kattintanak.

A következő példában MouseDown kezelőket regisztrálunk mind a gombhoz, mind a bekezdéshez. Jobb kattintáskor (JavaScript egéresemények) a kezelő meghívja a stopPropagation metódust, amely megakadályozza a bekezdéskezelő futtatását. Ha a gombot egy másik egérgombbal megnyomja, mindkét kezelő elindul:

Egy bekezdés és egy gomb benne.

varpara = document.querySelector("p"); varbutton = document.querySelector("button"); para.addEventListener("mousedown", function() ( console.log("Bekezdés kezelője."); )); button.addEventListener("mousedown", function(event) ( console.log("Kezelője a gombhoz."); if (event.which == 3) event.stopPropagation(); ));

A legtöbb eseményobjektumnak van egy céltulajdonsága, amely arra a csomópontra mutat, amelyről származtak. Használhatja ezt a tulajdonságot, hogy elkerülje a csomópontból felfelé terjedő események véletlen kezelését.

Használhatja a JavaScript eseménycélját egy adott típusú esemény hatókörének kiterjesztésére is. Például, ha egy csomópontja hosszú gomblistát tartalmaz, kényelmesebb egy kattintáskezelőt regisztrálni a külső csomóponthoz, és a céltulajdonság segítségével nyomon követni, hogy a gombra kattintottak-e, ahelyett, hogy az összes gombhoz regisztrálná a kezelőpéldányokat. :

A B C document.body.addEventListener("kattintás", függvény(esemény) ( if (event.target.nodeName == "BUTTON") console.log("Kattintott", event.target.textContent; ));

Alapértelmezett műveletek

Sok eseményhez alapértelmezett műveletek tartoznak. Ha rákattint egy hivatkozásra, akkor a hivatkozás célelemére navigál. Ha a lefelé mutató nyílra kattint, a böngésző lefelé görgeti az oldalt. Ha jobb gombbal kattint, megnyílik egy helyi menü.

A legtöbb eseménytípus esetében a JavaScript eseménykezelők az alapértelmezett műveletek végrehajtása előtt kerülnek meghívásra. Ha nem szeretné, hogy az alapértelmezett viselkedés fusson, akkor meg kell hívnia a preventDefault metódust az eseményobjektumban.

Használja egyéni billentyűparancsok megvalósításához ill helyi menük. Vagy felülírja a felhasználók által elvárt viselkedést. Az alábbi link egy nem követhető:

MDN var link = document.querySelector("a"); link.addEventListener("kattintás", függvény(esemény) ( console.log("Nem."); event.preventDefault(); ));

Próbáld meg ne tenni ezt, hacsak nincs rá jó oka.

A böngészőtől függően előfordulhat, hogy egyes eseményeket nem lehet elkapni. A Google Chrome-ban például az aktuális lap bezárására szolgáló billentyűparancs (eseménybillentyűkód JavaScript ) (Ctrl-W vagy Command-W) nem kezelhető JavaScript.

Kulcs események

Amikor a felhasználó megnyom egy billentyűt a billentyűzeten, a böngésző elindítja a "billentyűleállítás" eseményt. Amikor elengedi a kulcsot, a "keyup" esemény elindul:

Ez az oldal lilára változik, ha megnyomja a V gombot.

addEventListener("keydown", function(event) ( if (event.keyCode == 86) document.body.style.background = "ibolya"; )); addEventListener("kulcs", function(event) ( if (event.keyCode == 86) document.body.style.background = ""; ));

Ez az esemény akkor is aktiválódik, ha a felhasználó megnyom és lenyomva tartja a billentyűt, vagy miközben a billentyűt lenyomva tartják. Például, ha egy játékban egy nyílbillentyű megnyomásával növelni szeretné egy karakter sebességét, majd a nyílbillentyű elengedésével ismét csökkenteni szeretné, akkor ügyeljen arra, hogy ne növelje a sebességet minden alkalommal, amikor a nyílbillentyűt lenyomja.

Az előző példa a JavaScript eseménykulcskód objektum tulajdonságot használja. Meghatározza, hogy melyik billentyűt nyomták meg vagy engedték el. Azonban nem mindig nyilvánvaló, hogyan lehet egy numerikus kulcskódot tényleges kulcsmá alakítani.

A Unicode karakterkód a betű- és számbillentyűk értékeinek olvasására szolgál. A levélhez kapcsolódik (in nagybetűs) vagy a kulcson feltüntetett szám. A karakterláncok charCodeAt metódusa lehetővé teszi a következő érték elérését:

console.log("Violet".charCodeAt(0)); // → 86 console.log("1".charCodeAt(0)); // → 49

Más kulcsokhoz kevésbé kiszámítható kulcskódok tartoznak. A legjobb mód a kívánt kód meghatározásához kísérletezni kell. Regisztráljon egy billentyűleütési eseménykezelőt, amely rögzíti a kapott billentyűkódokat, és nyomja meg a kívánt gombot.

Az olyan billentyűk, mint a Shift , a Ctrl , az Alt tűz események, mint a normál billentyűk. De a billentyűkombinációk nyomon követésekor a billentyűzet és a JavaScript egéresemények tulajdonságai alapján is meghatározhatja, hogy a billentyűket lenyomták-e: shiftKey , ctrlKey , altKey és metaKey :

A folytatáshoz nyomja meg a Ctrl-Szóköz billentyűket.

addEventListener("keydown", function(event) ( if (event.keyCode == 32 && event.ctrlKey) console.log("Folytatás!"); ));

A "keydown" és "keyup" események információt szolgáltatnak a tényleges billentyűleütésről. De mi van akkor, ha magát a bemeneti szöveget akarjuk? A kulcskódokból szövegek lekérése kényelmetlen. Erre van egy esemény, a "billentyűlenyomás", amely a "keydown" után azonnal elindul. Mindaddig ismétlődik, amíg a gombot lenyomva tartja. De csak azokra a billentyűkre, amelyekkel a karaktereket beírjuk.

Az eseményobjektum charCode tulajdonsága olyan kódot tartalmaz, amely Unicode karakterkódként értelmezhető. A String.fromCharCode függvény segítségével ezt a kódot egyetlen karakterláncra alakíthatjuk.

Állítsa a beviteli fókuszt erre az oldalra, és írjon be valamit.

addEventListener("billentyűnyomás", function(event) ( console.log(String.fromCharCode(event.charCode)); ));

A DOM-csomópont, amelyben az esemény bekövetkezik, attól függ, hogy melyik elem volt bemeneti fókuszban a billentyű lenyomásakor. A közönséges csomópontoknak nem lehet bemeneti fókusza (hacsak nem állítja be rajtuk a tabindex attribútumot), de az olyan elemeknek, mint a hivatkozások, gombok és űrlapmezők igen.

Ha nincs egy adott elemnek fókusza, akkor a kulcs- és JavaScript érintési események célcsomópontja a document.body .

Egérkattintások

Az egérgombra való kattintás is számos eseményt indít el. A „mousedown” és „mouseup” események hasonlóak a „keydown” és „keyup” eseményekhez. Az egérgomb lenyomásakor és felengedésekor futnak. Ezek az események ben történnek DOM csomópontok Az, hogy az egérmutató fölött volt az esemény bekövetkeztekor.

Olyan megosztott csomópontok esetében, amelyek egérlenyomást és egérfelengedést is tartalmaztak, a kattintási esemény az egérrel való felhúzás után indul el. Például, ha megnyomja az egérgombot egy elemen, majd a kurzort egy másik elemre viszi, és felengedi a gombot, akkor a kattintási esemény azon az elemen történik, amely mindkét elemet tartalmazza.

Ha két kattintás történik egymás közelében, a „dblclick” (dupla kattintás) esemény is elindul. A második kattintás után következik be. Az egéresemény pontos helyének meghatározásához meg kell kapnia a pageX és pageY tulajdonságok értékét, amelyek az esemény koordinátáit (pixelben) tartalmazzák a dokumentum bal felső sarkához viszonyítva.

Az alábbiakban egy primitív rajzprogram megvalósítása látható. Minden alkalommal, amikor az egérrel kattintanak a dokumentumban (a kurzor alatt), egy pont kerül hozzáadásra:

törzs ( magasság: 200 képpont; háttér: bézs; ) .dot ( magasság: 8 képpont; szélesség: 8 képpont; szegélysugár: 4 képpont; /* lekerekített sarkok */ háttér: kék; pozíció: abszolút; ) addEventListener("kattintás", függvény (esemény) ( var dot = document.createElement("div"); dot.className = "pont"; dot.style.left = (esemény.oldalX - 4) + "px"; dot.style.top = (esemény .pageY - 4) + "px";document.body.appendChild(pont); ));

A clientX és clientY tulajdonságok hasonlóak az X oldalhoz és az Y oldalhoz, de a dokumentum látható részére vonatkoznak. Használhatók az egér koordinátáinak összehasonlítására a getBoundingClientRect függvény által visszaadott koordinátákkal.

Az egér mozgása

Minden alkalommal, amikor az egér mozog, a JavaScript egéresemény-gyűjtemény „mousemove” eseménye aktiválódik. Segítségével nyomon követhető az egér pozíciója. Ez akkor használatos, ha megvalósítja az elemek egérrel történő húzásának lehetőségét.

A következő példában a program megjelenít egy panelt, és beállítja az eseménykezelőket, hogy a panel keskenyebb vagy szélesebb legyen húzáskor:

Húzza el a panel szélét a szélességének módosításához:

varlastX; // Nyomon követi az egér utolsó X pozícióját var rect = document querySelector("div"); rect.addEventListener("mousedown", function(event) ( if (event.which == 1) ( lastX = event.pageX; addEventListener("mousemove", moved); event.preventDefault(); // Kiválasztás megakadályozása ) ) ); function buttonPressed(event) ( if (event.buttons == null) return event.which != 0; else return event.buttons != 0; ) function moved(event) ( if (!buttonPressed(event)) ( removeEventListener( "mousemove", mozgatva); ) else ( var dist = esemény.oldalX - utolsóX; var newWidth = Math.max(10, rect.offsetWidth + dist); rect.style.width = newWidth + "px"; lastX = esemény .oldalX;) )

Vegye figyelembe, hogy a mousemove kezelő a teljes ablakhoz regisztrálva van. Még ha az egér kimozdul is a panelből az átméretezés során, akkor is frissítjük a panel szélességét, és leállítjuk a JavaScript érintési eseményeket az egérgomb felengedésekor.

Le kell állítanunk a panel átméretezését, amikor a felhasználó elengedi az egérgombot. Sajnos nem minden böngésző állítja be a melyik tulajdonságot a "mousemove" eseményeknél. Van egy szabványos gombtulajdonság, amely hasonló információkat nyújt, de szintén nem minden böngésző támogatja. Szerencsére minden nagyobb böngésző egy dolgot támogat: vagy gombokat, vagy melyik . A fenti példában a buttonPressed függvény először a buttons tulajdonságot próbálja meg használni, és ha nem elérhető, akkor melyikre ugrik.

Amikor az egérkurzor belép egy csomópontba, vagy elhagyja azt, az egérmutató vagy az egérrel való kilépés eseményei aktiválódnak. Használhatók lebegő effektusok létrehozására, feliratok megjelenítésére vagy egy elem stílusának megváltoztatására.

Egy ilyen effektus létrehozásához nem elég csak elindítani a megjelenítését, amikor az "egeret mozgatja" esemény bekövetkezik, és befejezni az "egeret kilépés" esemény után. Amikor az egér egy csomópontról az egyik gyermekére lép, a szülőcsomópont számára egy „egér kilépés” esemény indul el. Bár az egérmutató nem hagyta el a csomópont tartományát.

Tovább rontja a helyzetet, hogy ezek a JavaScript-események ugyanúgy terjednek, mint a többi esemény. Amikor az egér elhagyja az egyik utódcsomópontot, amelyhez kezelő van regisztrálva, a kilépési esemény elindul.

A probléma megkerüléséhez használhatja az eseményobjektum relatedTarget tulajdonságát. "Egéráthelyezés" esemény esetén jelzi, hogy előzőleg melyik elem fölé vitte az egeret. "Egérkihúzás" esetén pedig - melyik elemre mozog a mutató. Csak akkor változtatjuk meg a lebegési effektust, ha a relatedTarget a célcsomóponton kívül van.

Ebben az esetben megváltoztatjuk a viselkedést, mert az egérkurzor a csomóponton kívülről került a csomópont fölé (vagy fordítva):

Vigye az egeret a bekezdés fölé.

varpara = document.querySelector("p"); function isInside(node, target) ( for (; node != null; node = node.parentNode) if (node== target) return true; ) para.addEventListener("mouseover", function(event) ( if ( !isInside (event.relatedTarget, para)) para.style.color = "piros"; )); para.addEventListener("egeret", function(event) ( if (!isInside(event.relatedTarget, para)) para.style.color = ""; ));

Az isInside függvény nyomon követi az adott csomópont szülő kapcsolatait, vagy amíg el nem éri felső rész dokumentum (amikor a csomópont null ). Vagy a szükséges szülőelem nem található meg.

A lebegtetési effektust sokkal egyszerűbb létrehozni a CSS pszeudo-selector:hover segítségével, amint az a következő példában látható. Ha azonban a lebegtetési effektus valami bonyolultabb, mint a célcsomópont stílusának megváltoztatása, akkor a „mouseover” és „mouseout” eseményeket (JavaScript egéresemények) kell használnia:

Görgesse az eseményeket

Minden alkalommal, amikor az elem görget, a JavaScript görgetési esemény aktiválódik az elemen. Segítségével nyomon követhető, hogy a felhasználó éppen mit néz; a nézetablakon kívüli animáció letiltásához.

A következő példában egy folyamatjelző sávot jelenítünk meg a dokumentum jobb felső sarkában, és frissítjük, hogy a darabokat más színnel töltse ki, miközben lefelé görgetjük az oldalt:

.progress ( keret: 1 képpont, egyszínű kék; szélesség: 100 képpont; pozíció: rögzített; felül: 10 képpont; jobbra: 10 képpont; ) .progress > div ( magasság: 12 képpont; háttér: kék; szélesség: 0%; ) törzs ( magasság: 2000 képpont ;)

Görgess engem...

var bar = document.querySelector(.progress div"); addEventListener("scroll", function() ( var max = document.body.scrollHeight - innerHeight; var százalék = (pageYOffset / max) * 100; bar.style.width = százalék + "%"; ));

Az elem pozíciójának vagy rögzített tulajdonságának beállításával ugyanazt az eredményt kapjuk, mint a position:absolute beállításával. De így azt is blokkoljuk, hogy az elem a dokumentum többi részével együtt görgessen. Ennek eredményeként a folyamatjelző statikusan rögzítve lesz a felső sarokban. Belül van egy másik elem, melynek mérete az aktuális haladásnak megfelelően változik.

A szélesség beállításánál mértékegységként a px helyett a %-ot használjuk, hogy az elem a folyamatjelző sáv méretével arányosan átméreteződjön.

Az innerHeight globális változó az ablak magasságát tartalmazza, amelyet le kell vonnunk a dokumentum teljes görgethető magasságából. Nem görgetheti lefelé az ablakot, amikor eléri a dokumentum alját. Az innerHeight mellett az innerWidth is használható. Ha a pageYOffset-et (a görgetődoboz jelenlegi pozíciója) elosztjuk a maximálisan megengedett görgetési pozícióval, és megszorozzuk 100-zal, megkapjuk a folyamatjelző sáv százalékát.

A JavaScript scroll eseményben a preventDefault meghívása nem akadályozza meg a görgetést. Az eseménykezelő csak a görgetés után hívódik meg.

bemeneti fókusz események

Ha egy elem bemeneti fókuszban van, a böngésző "fókusz" eseményt indít rá. Ha a bemeneti fókuszt eltávolítja, az „elmosás” esemény aktiválódik.

Ennek a két eseménynek nincs elosztása. A szülőelem kezelője nem kap értesítést, ha egy gyermekelem bemeneti fókuszban van.

A következő példa egy elemleírást jelenít meg a jelenleg beviteli fókuszú szövegmezőhöz:

Név:

Kor:

Az ablakobjektum megkapja a „fókusz” és „elmosás” eseményeket, amikor a felhasználó navigál vagy elhagyja a lapot, a dokumentumot megjelenítő böngészőablakot.

Esemény betöltése

Amikor az oldal betöltése befejeződik, a „load” JavaScript esemény megjelenik a dokumentumtörzs és az ablak objektumoknál. A teljes dokumentum betöltését igénylő inicializálási műveletek ütemezésére szolgál. Ne felejtse el, hogy a tartalom azonnal elindul, amikor ezt a címkét találja. Néha túl korai. Például, ha egy szkriptnek tennie kell valamit a dokumentum olyan részeivel, amelyek a .

és a külső fájlokat betöltő szkriptcímkék is tartalmaznak egy "betöltés" eseményt. Azt jelzi, hogy a hozzájuk társított fájl betöltődött. A bemeneti fókusz eseményekhez hasonlóan a betöltési események sem terjednek tovább.

Amikor bezárunk egy oldalt, vagy átlépünk egy másik oldalra (például egy linkre kattintva), a „beforeunload” esemény aktiválódik. Arra szolgál, hogy a felhasználó ne veszítse el véletlenül azt, amivel a dokumentum bezárása után dolgozott.

Egy oldal kirakodásának megakadályozása nem történik meg a preventDefault metódussal. Ehelyett egy karakterláncot ad vissza a kezelő. Olyan párbeszédablakban használatos, amely megkérdezi a felhasználót, hogy szeretne-e az oldalon maradni, vagy elhagyni azt. Ez a mechanizmus biztosítja, hogy a felhasználó elhagyhassa az oldalt, még akkor is, ha egy rosszindulatú szkript fut, amelynek célja, hogy a látogatót az oldalon tartsa.

Szkript végrehajtási sorrend

Különféle tényezők indíthatják el a szkript végrehajtását: egy címke beolvasása, egy esemény előfordulása. A requestAnimationFrame metódus függvényhívást ad meg a következő oldal újbóli megjelenítése előtt. Ez egy másik módja a szkriptek futtatásának.

A JavaScript kiválasztási események és minden más bármikor lefuthat, de ugyanabban a dokumentumban két szkript soha nem fog futni egyszerre. Ha a szkript már fut, az eseménykezelőknek és a másik szkript által ütemezett kódrészleteknek ki kell várniuk a sorukat. Ez az oka annak, hogy a dokumentum lefagy, ha a szkript hosszú ideig fut. A böngésző nem reagál a kattintásokra és egyéb eseményekre, mert nem tudja aktiválni az eseménykezelőket, amíg az aktuális szkript le nem fut.

Egyes programozási környezetek lehetővé teszik több, egyidejűleg futó végrehajtási szál létrehozását. Több feladat egyidejű végrehajtásának lehetőségével növelheti a programvégrehajtás sebességét. De ha több olyan műveletünk van, amelyek egyszerre érintik a rendszer ugyanazt a részét, akkor a program nehezebbé válik ezek végrehajtása.

Ha folyamatokat kell futtatnunk a háttérben az oldal lefagyása nélkül, a böngészők biztosítanak nekünk valamit, amit webmunkásoknak neveznek. Ez egy JavaScript sandbox, amely a fő programmal együtt működik a dokumentumon, és csak üzenetek küldésével és fogadásával tud kommunikálni vele.

Tegyük fel, hogy a code/squareworker.js nevű fájlban a következő kód található:

addEventListener("üzenet", függvény(esemény) ( postMessage(event.data * esemény.adat); ));

Képzelje el, hogy a négyzetbe helyezendő szám nagyon nagy, számításilag fárasztó, és a számítást egy háttérszálon kell végrehajtani. Ez a kód elindítja a webdolgozókat , üzeneteket küld neki, és kinyomtatja a válaszokat:

var squareWorker = new Worker("code/squareworker.js"); squareWorker.addEventListener("üzenet", függvény(esemény) ( console.log("A dolgozó válaszolt:", event.data); )); squareWorker.postMessage(10); squareWorker.postMessage(24);

A postMessage funkció olyan üzenetet küld, amely elindítja az "üzenet" eseményt a vevőben. A webmunkásokat létrehozó szkript a Worker objektumon keresztül küld és fogad üzeneteket. Ennek az objektumnak a segítségével a környezet interakcióba lép az azt létrehozó szkripttel, információt küld és globálisan meghallgatja az eredeti szkripttel.

Időzítők beállítása

A setTimeout függvény hasonló a requestAnimationFrame függvényhez. A hívást egy másik függvényre állítja, amelyet később hív meg. De ahelyett, hogy az oldal következő megjelenítésekor meghívná a függvényt, vár egy bizonyos számú ezredmásodpercig. Ebben a JavaScript-eseménypéldában az oldal háttere két másodperc után kékről sárgára változik:

document.body.style.background = "kék"; setTimeout(function() ( document.body.style.background = "sárga"; ), 2000);

Néha le kell mondania egy általunk tervezett funkciót. Ez a setTimeout függvény visszatérési értékének tárolásával és a clearTimeout meghívásával történik:

var bombTimer = setTimeout(function() ( console.log("BOOM!"); ), 500); if(Math.random()< 0.5) { // 50% chance console.log("Defused."); clearTimeout(bombTimer); }

A cancelAnimationFrame függvény ugyanúgy működik, mint a clearTimeout . A requestAnimationFrame által visszaadott érték hívja meg a keret törléséhez (ha még nem hívták meg).

Hasonló függvénykészlet, a setInterval és a clearInterval egy olyan időzítő beállítására szolgál, amelynek X ezredmásodpercenként meg kell ismételnie a műveletet:

var kullancs = 0; var clock = setInterval(function() ( console.log("tick", tick++); if (tick == 10) ( clearInterval(clock); console.log("stop."); ) ), 200);

Szakítani

Egyes eseménytípusok rövid időn belül többször is aktiválhatók (például a „mousemove” és a javascript scroll event ). Az ilyen események kezelésekor ügyelni kell arra, hogy ne tartson túl sokáig, különben a kezelőnek olyan sokáig tart a művelet végrehajtása, hogy a dokumentummal való interakció lassú és szaggatott lesz.

Ha valami egyedit kell tennie egy ilyen kezelőben, a setTimeout segítségével győződjön meg arról, hogy ez nem tart túl sokáig. Ezt általában eseményfelosztásnak nevezik. A zúzódásnak többféle megközelítése létezik.

Az első példában tenni akarunk valamit, amikor a felhasználó gépel. De nem akarjuk ezt minden gombnyomás után megtenni. Ha a felhasználó gyorsan gépel, meg kell várnia, amíg szünet következik. Ahelyett, hogy azonnal végrehajtanánk a műveletet az eseménykezelőben, késleltetést állítunk be. Töröljük a korábbi késést is (ha volt). Ha az események rövid időközönként fordulnak elő (az általunk beállított késleltetésnél kisebb), akkor az előző esemény késleltetése törlődik:

Írjon ide valamit... var textarea = document.querySelector("textarea"); var timeout; textarea.addEventListener("keydown", function() ( clearTimeout(timeout); timeout = setTimeout(function()) ( console.log("A gépelést abbahagyta."); ), 500; ));

Ha nem definiált értéket ad át a clearTimeout-nak, vagy egy már futó késleltetésre hívja, annak nincs hatása. Már nem kell ügyelnünk arra, hogy mikor hívjuk fel, minden eseménynél ezt tesszük.

Használhat másik forgatókönyvet is, ha a válaszokat kis időre szeretné szétválasztani. De ugyanakkor egy rendezvénysorozat során kell elindítani őket, és nem csak utána. Például elküldheti az aktuális egérkoordinátákat válaszul az egérmozgatási eseményekre (JavaScript egéresemények), de csak 250 ezredmásodpercenként:

function displayCoords(event) ( document.body.textContent = "az egér az " + event.pageX + ", " + event.pageY pontban van; ) var ütemezett = false, lastEvent; addEventListener("mousemove", function(event) ( lastEvent = esemény; if (!scheduled) ( ütemezett = igaz; setTimeout(function() ( ütemezett = false; displayCoords(lastEvent); ), 250; ) ));

Következtetés

Az eseménykezelők lehetővé teszik számunkra, hogy olyan eseményeket észleljünk és reagáljunk azokra, amelyek felett nincs közvetlen irányításunk. Egy ilyen kezelő regisztrálásához használja az addEventListener metódust.

Minden eseménynek van egy meghatározott típusa ("billentyűlenyomás", "fókusz" és így tovább), amely azonosítja azt. A legtöbb esemény egy adott DOM-elemen aktiválódik, majd továbbterjed az elem szülőcsomópontjaira. Ez lehetővé teszi az elemekhez társított kezelők számára, hogy feldolgozzák azokat.

A kezelő meghívásakor egy eseményobjektumot ad át a művelettel kapcsolatos további információkkal. Ez az objektum módszereket is tartalmaz az esemény további terjedésének leállítására ( stopPropagation ), vagy megakadályozza, hogy az alapértelmezett böngésző feldolgozza az eseményt ( preventDefault ).

Egy billentyű lenyomása elindítja a "keydown", "keypress" és "keyup" eseményeket. Az egérkattintás elindítja a „mousedown”, „mouseup” és „click” eseményeket. Egér mozgatása - "mousemove", "mouseenter" és "mouseout".

A JavaScript scroll esemény a "scroll" eseménnyel definiálható, a fókusz pedig a "fókusz" és a "homályosítás" segítségével definiálható. Amikor a dokumentum betöltődik az ablakhoz, a "betöltés" esemény aktiválódik.

Egy JavaScript programnak egyszerre csak egy része futhat. Az eseménykezelőknek és más ütemezett szkripteknek meg kell várniuk, amíg a sorban lévő többi parancsfájl végrehajtása befejeződik.

Ez a kiadvány a "Handling Events" című cikk fordítása, amelyet a barátságos projektcsapat készített

Az események olyan műveletek, amelyeket a JavaScript nyomon tud követni.

Reakció egy eseményre

Az alábbi példa a gombra kattintás dátumát mutatja:

Események

A JavaScript segítségével lehetőségünk van dinamikus weboldalak létrehozására. Az események olyan műveletek, amelyeket a JavaScript képes észlelni és nyomon követni.

A weboldal minden eleme bizonyos eseményekkel rendelkezik, amelyek aktiválhatják a JavaScriptet. Használhatjuk például egy gombelem onClick eseményét egy függvény aktiválására, amikor a felhasználó rákattint az adott gombra. Az eseményeket HTML címkékben határozzuk meg.

Példák az eseményekre:

Mozgassa az egeret egy weboldal "forró zónája" fölé

Beviteli mező kiválasztása HTML űrlapon

Adatok küldése innen HTML űrlapok

Billentyűleütés

Megjegyzés: Az eseményeket általában függvényekkel együtt használjuk, és a függvény nem kerül végrehajtásra, amíg az esemény meg nem történik!

onLoad és onUnload

Az onLoad és onUnload események akkor következnek be, amikor a felhasználó belép az oldalra, vagy elhagyja azt.

Az onLoad eseményt gyakran használják a látogató böngészőjének típusának és verziójának ellenőrzésére, és ezen információk alapján a weboldal megfelelő verziójának betöltésére.

Mind az onLoad, mind az onUnload eseményeket gyakran használják akkor is, amikor cookie-kkal van dolgunk, amelyeket be kell állítani, amikor a felhasználó belép az oldalra, vagy elhagyja azt. Például létrehozhat egy felugró ablakot, amely felhasználónevet kér, amikor először látogat el az oldalára. A név gyakran cookie-ban tárolódik. Amikor legközelebb egy látogató felkeresi az oldalát, létrehozhat egy másik előugró ablakot, például "Üdvözöljük Vasya Ivanov!".

onFocus, onBlur és onChange

Az onFocus, onBlur és onChange eseményeket gyakran használják az űrlapmezők érvényesítésekor.

Az alábbiakban egy példa látható az onChange esemény használatára. A checkEmail() függvény meghívásra kerül, amint a felhasználó megváltoztatja a mező értékét:

onMouseOver

Az onmouseover esemény felhasználható egy függvény aktiválására, amikor a felhasználó az egeret egy HTML elem fölé viszi.

Az események témája nagyon fontos és nagyon érdekes. Hála neki, sok érdekes dolgot tehet, amivel a felhasználó el lesz ragadtatva. Az esemény a JavaScriptben egy adott művelet, amelyet a felhasználó vagy a böngésző indít el. Egy esemény lehet például egy egérkattintás egy gombra, az egér mozgatása, egy elemre fókuszálás, értékváltozás valamilyen szövegmezőben, a böngészőablak átméretezése stb.

Készítettem egy táblázatot az összes eseményről (amit legalább ismerek) JavaScriptben. Ebben megtalálja először az esemény nevét, azokat az elemeket, amelyek ezt az eseményt generálhatják, valamint magának a JavaScript-eseménynek a leírását.

Esemény	Egy tárgy	Ok
abortusz	Kép	Képfeltöltés megszakítása
Elhomályosít		Az elem fókusza elveszett
változás	FileUpload, Select, Text, Textarea	Értékváltozás
Kattintson	Terület, gomb, jelölőnégyzet, dokumentum, hivatkozás, rádió, visszaállítás, elküldés	Kattintson az egérrel egy elemre
DblClick	Terület, Dokumentum, Link	Kattintson duplán egy elemre
DragDrop	Ablak	Ugrás a böngészőablakba
Fókusz	Gomb, jelölőnégyzet, fájlfeltöltés, keret, réteg, jelszó, rádió, visszaállítás, kijelölés, elküldés, szöveg, szövegterület, ablak	Fókusz beállítása egy elemre
kulcs le		Egy billentyű lenyomása a billentyűzeten
gombnyomás	Dokumentum, kép, hivatkozás, szövegterület	Egy billentyűt tart a billentyűzeten
kulcs fel	Dokumentum, kép, hivatkozás, szövegterület	Egy billentyű elengedése a billentyűzeten
Betöltés	Dokumentum, kép, réteg, ablak
MouseDown	Gomb, Dokumentum, Link	Egér gomb lenyomva
MouseMove	Ablak	Egér mozgásban
egérkihúzás	Terület, réteg, link	Az egér túllép az elem határain
MouseOver	Terület, réteg, link	Az egér az elem felett van
egeret	Gomb, Dokumentum, Link	Az egérgomb felengedve
mozog	keret	Elem mozgatása
Visszaállítás	Forma	Űrlap visszaállítása
átméretezni	Keret, Ablak	Átméretezés
Válassza ki	Szöveg, Textarea	Szöveg kiválasztása
Beküldés	Forma	Adatátvitel
Kirak	Ablak	Az aktuális oldal feltöltése

Most nézzük meg, hogyan használhatjuk az eseményeket JavaScriptben. Vannak úgynevezett eseménykezelők. Az eseménykezelők csak azt határozzák meg, hogy mi fog történni, amikor egy adott esemény bekövetkezik. A JavaScript eseménykezelőinek általános formája a következő:

OnNameEvents

Vagyis először az "on" előtag, majd az esemény neve, például ilyen eseménykezelők: onFocus , onClick , onSubmit és így tovább. Szerintem itt semmi gond nincs. És most a fő kérdés: "Hogyan használjunk eseményeket a JavaScriptben?". Alkalmazási körük hatalmas, és most egy problémát fogunk megvizsgálni Önnel. Az oldalon három link található. Mindegyik hivatkozás más-más háttérszínért (mondjuk fehér, sárga és zöld) felelős. Kezdetben a háttér fehér. Ha az egeret egy adott link fölé viszi, a háttérszín megváltozik. Az egér elengedésekor a háttérszín visszaáll az alapértelmezett színre. Ha rákattint egy hivatkozásra, a háttérszín alapértelmezettként kerül mentésre.

a (
szín: kék;
szöveg-dekoráció: aláhúzás;
kurzor: pointer;
}

var default_color = "fehér";

függvény setTempColor(color) (
document.bgColor = szín;
}

függvény setDefaultColor(color) (
alapértelmezett_szín = szín;
}

függvény defaultColor() (
document.bgColor = alapértelmezett_szín;
}

fehér
Sárga
Zöld

Foglalkozzunk ezzel a szkripttel, vagy inkább egy teljes HTML oldallal JavaScript támogatásés CSS (más szóval ez egy DHTML példa). Először jöjjenek a szokásos HTML-címkék, amelyek bármely HTML-oldalt indítanak. Ezután létrehozunk egy stílust, amely megköveteli, hogy ezen az oldalon minden hivatkozás kék, aláhúzott legyen, és a rajtuk lévő egérmutató "mutató" formájú legyen. Lehet, hogy azt mondod: "Miért kell beállítani a stílust? Végül is a hivatkozások így is pontosan ugyanazok lesznek." Így van, linkek, de nálunk nincsenek linkek, mint olyanok (elvégre a címkében nincs href attribútum), így alapból sima fekete szövegek lesznek (bár rákattinthatsz a szövegre is). Tehát a stílus elengedhetetlen. Eltávolíthatod, és meglátod, mi történik. Még jobb, ha állítsa be a href attribútumot (bármilyen értékkel, akár üresen is), és magyarázza el, miért nem működik a szkript. Ezután jön a JavaScript. Létrehozunk egy default_color változót, amely felelős az alapértelmezett színért. Három funkció következik:

A setTempColor() függvény felelős a szín ideiglenes megváltoztatásáért.

A setDefaultColor() függvény felelős az alapértelmezett szín megváltoztatásáért.

A defaultColor() függvény beállítja az alapértelmezett háttérszínt.

Aztán vannak attribútumokkal való hivatkozások eseménykezelők formájában. Amikor az egeret a hivatkozás fölé viszi, a MouseOver esemény bekövetkezik, így az onMouseOver eseménykezelő meghívja a setTempColor() függvényt, és átadja a megfelelő paramétert. Amikor eltávolítjuk az egeret az elemről, a MouseOut esemény megemelkedik, majd meghívódik a defaultColor() függvény, amely a háttérszínt az alapértelmezett színre állítja. És végül, amikor az egér rákattint a hivatkozásra (az onClick kezelőre), a setDefaultColor() függvény meghívódik, amely a paraméterben megadott színt az alapértelmezett háttérszínre állítja. Mint látható, minden nagyon egyszerű.

Ez volt az események JavaScriptben való használatának elve, és akkor minden csak a fantázián múlik!

Ebben a leckében az események főbb típusait tekintjük át, amelyeket a JavaScript használatával elkaphat valamilyen kód végrehajtásához.

Esemény kategóriák

Minden JavaScript esemény a következő kategóriákba osztható: egéresemények (Egéresemények), billentyűzetesemények (Keyboard Events), objektum- és keretesemények (Frame/Object Events), űrlap- és vezérlőesemények (Űrlapesemények), húzási események (Drag Events) ).

Figyelem: a JavaScriptben minden esemény kisbetűvel (kis) van írva.

Egér események

mousedown - az esemény akkor következik be, amikor az egérgombot lenyomják valamelyik elem felett, de még nem engedik fel.
mouseup - az esemény akkor következik be, amikor az egér gombja valamelyik elem felett a lenyomott állapotból a feloldott állapotba került.
click - az esemény akkor indul el, amikor a felhasználó rákattint az elemre. A kattintási események aktiválásának sorrendje (a bal és a középső egérgomb esetében) a következő: egérlefelé -> egérfelfelé -> kattintás.
kontextusmenü – esemény akkor indul el, amikor a felhasználó jobb gombbal rákattint egy elemre. A kontextusmenühöz tartozó események előfordulási sorrendje (for jobb gomb egér): mousedown -> mouseup -> contextmenu .
dblclick – Az esemény akkor indul el, ha a felhasználó duplán kattint egy elemre. A dblclickhez kapcsolódó események előfordulási sorrendje a következő: mousedown -> mouseup -> click -> mousedown -> mouseup -> click -> dblclick .
mouseover - esemény akkor következik be, amikor az egérkurzor az elem vagy annak valamelyik gyermeke által birtokolt területre lép.
mouseout – Olyan esemény, amely akkor indul el, amikor az egérkurzor elhagyja az elem vagy annak gyermekei által birtokolt területet.
mousemove - az esemény akkor indul el, amikor az egérkurzor az elem által birtokolt területen belül mozog.
mouseenter – Az esemény akkor indul el, amikor az egér belép az elem által birtokolt területre. Ezt az eseményt gyakran használják a mouseleave eseménnyel együtt, amely akkor következik be, amikor az egérmutató elhagy egy elem tulajdonában lévő területet. A mouseenter esemény hasonló a mouseover eseményhez, azzal a különbséggel, hogy a mouseenter esemény nem buborékol (az eseménybuborékok fogalmára kicsit később térünk ki).
mouseleave – Az esemény akkor indul el, amikor az egér elhagyja az elem által birtokolt területet. A mouseave esemény hasonló a mouseave eseményhez, azzal a különbséggel, hogy az mouseleave esemény nem buborékol (az eseménybuborékok fogalmára kicsit később térünk ki).

Billentyűzet események

Az események előfordulási sorrendje: keydown -> keypress -> keyup .

keydown – az esemény akkor indul el, ha a billentyűzet egy billentyűjét lenyomják az elem felett, de még nem engedték el.
keyup - az esemény akkor indul el, amikor az elem feletti billentyűzet lenyomott billentyűje feloldott állapotba került.
gombnyomás – az esemény akkor indul el, amikor a felhasználó megnyom egy gombot a billentyűzeten az elem felett.

Tárgy- és keretesemények

beforeunload – az esemény a dokumentum kirakodása előtt aktiválódik. Ez az esemény lehetővé teszi egy további üzenet megjelenítését a „Biztosan elhagyja ezt az oldalt?” megerősítő párbeszédpanelen. A dokumentum bezárásakor megjelenő szabványos üzenet ettől függően eltérő lehet különböző böngészők. De nem módosíthatja vagy törölheti, csak ezzel a módszerrel adhatja hozzá saját üzenetét, amely az alapértelmezett üzenettel együtt jelenik meg.
hiba - az esemény akkor indul el, amikor hiba történik, amely külső fájl (például dokumentum vagy kép) betöltésekor következik be.
hashchange - az esemény akkor következik be, amikor az aktuális URL horgony része (a "#" karakterrel kezdődik) megváltozik.
load - az esemény akkor indul el, amikor az objektum betöltése befejeződött. A betöltési eseményt leggyakrabban a body elemen használják egy parancsfájl azonnali végrehajtására a weboldal teljes betöltése után.
unload - az esemény akkor következik be, amikor egy oldalt kiürítenek (például amikor a böngésző lapját (ablakát) bezárják).
pageshow - az esemény akkor indul el, amikor a felhasználó egy weboldalra navigál, pl. miután az oldal elérhetővé válik a felhasználó számára. Az oldalmegjelenítési esemény hasonló a betöltési eseményhez, azzal a különbséggel, hogy minden oldal betöltésekor aktiválódik, még akkor is, ha az a gyorsítótárból töltődik be. Az oldal első betöltésekor az oldalmegjelenítési esemény közvetlenül a betöltési esemény után indul el.
pagehide - az esemény akkor következik be, amikor a felhasználó elhagyja az oldalt (a pagehide esemény az unload esemény előtt következik be). Ezenkívül ez az esemény az unload eseménnyel ellentétben nem akadályozza meg az oldal gyorsítótárazását.
átméretezés – az esemény a böngészőablak átméretezésekor aktiválódik.
scroll – Az esemény akkor aktiválódik, amikor görgeti a görgetősávval rendelkező elem tartalmát.

Űrlap és ellenőrzési események

fókusz - az esemény akkor aktiválódik, amikor az elem fókuszba kerül. Ez az esemény nem jelenik meg.
elmosódás – olyan esemény, amely akkor indul el, amikor egy tárgy elveszti a fókuszt. Ez az esemény nem jelenik meg.
focusin – az esemény akkor indul el, amikor az elem fókuszba kerül. A fókusz esemény hasonló a fókusz eseményhez, de abban különbözik, hogy felbuborékol. Ezért akkor használható, ha ki kell derítenie, ki veszíti el a fókuszt: egy elem vagy a gyermeke?
focusout – olyan esemény, amely akkor indul, amikor egy elem elveszíti a fókuszt. A fókuszálási esemény hasonló az elmosódási eseményhez, de abban különbözik, hogy felbuborékol. Ezért akkor használható, ha ki kell derítenie, ki veszíti el a fókuszt: egy elem vagy a gyermeke?
változás - az esemény akkor következik be, amikor az elem értéke megváltozik, de miután az elem elvesztette a fókuszt. A JavaScript-ben a változási eseményen kívül van egy hasonló bemeneti esemény is, amely abban különbözik a változási eseménytől, hogy egy elem értékének megváltozása után azonnal bekövetkezik. A változásesemény a bemeneti eseménnyel ellentétben a keygen és a select elemeken is működik. A rádiógombok (rádiógombok) és a jelölőnégyzetek (jelölőnégyzetek) esetében a változási esemény akkor következik be, amikor ezen elemek állapota megváltozik.
input – Az esemény akkor aktiválódik, ha egy bemeneti elem vagy szövegterület elem értéke megváltozik.
érvénytelen – Az esemény akkor következik be, amikor egy bemeneti elem, amelynek adatait más űrlapadatokkal együtt el kell küldeni a szervernek, érvénytelen adatokat tartalmaz.
reset - az esemény az űrlap törlése előtt aktiválódik, amit egy type="reset" bemeneti elem hajt végre.
keresés – Az esemény akkor indul el, ha a felhasználó megnyomja az Enter billentyűt, vagy rákattint a "x" (mégse) gombra a type="search" beviteli elemen.
kijelölés - esemény, amely azután indul el, hogy kiválasztott egy szöveget egy elemben. A kiválasztási eseményt többnyire type="text" vagy textarea beviteli elemen használják.
benyújtás – az esemény az űrlap szervernek való elküldése előtt következik be.

Húzza az eseményeket

A húzható objektumhoz kapcsolódó események (húzható cél, forrásobjektum):

dragstart – az esemény akkor indul el, amikor a felhasználó elkezdi húzni egy elemet;
drag - az esemény akkor következik be, amikor a felhasználó elhúz egy elemet;
dragend - az esemény akkor indul el, amikor a felhasználó befejezte az elem húzását, pl. amikor az egérkurzort elengedjük.

A húzható objektumot (húzható célpont) fogadó objektumhoz (drop target) társított események:

dragenter - az esemény akkor aktiválódik, amikor egy húzható objektum (húzható célpont) olyan elem hatókörébe került (drop target), amely képes fogadni egy húzható objektumot (húzható célpont).
ragleave - az esemény akkor következik be, amikor a húzható objektum (húzható célpont) elhagyja az azt elfogadni képes elem (drop target) határait.
dragover - az esemény akkor indul el, amikor a húzható objektum (húzható célpont) elmozdul az azt fogadni képes elem (drop target) területén.
drop esemény akkor aktiválódik, amikor a felhasználó elenged egy húzható objektumot (húzható célpont) egy olyan elem (drop target) területére, amely képes elfogadni.

Animációs események

Három esemény történhet CSS-animáció futása közben:

animationstart – akkor indul el, amikor egy CSS-animáció elindult.
animationiteration – CSS-animáció megismétlésekor fordul elő.
animationend – Akkor aktiválódik, amikor a CSS-animáció véget ért.

Vágólap események

másolási esemény akkor következik be, amikor a felhasználó lemásolja az elem tartalmát. A másolási esemény akkor is elindul, ha a felhasználó egy elemet (például az img elemmel létrehozott képeket) másol. A másolási esemény elsősorban a type="text" beviteli elemekhez használatos.
cut - az esemény akkor indul el, amikor a felhasználó kivágja az elem tartalmát.
beillesztés – egy esemény akkor indul el, amikor a felhasználó valamilyen tartalmat beilleszt egy elembe.

Események nyomtatása

utónyomtatás – az esemény akkor indul el, amikor elkezdődik az oldal nyomtatása (vagyis a párbeszédpanel "Nyomtatás" gombjára való kattintás után), vagy ha a "Nyomtatás" párbeszédpanel bezárásra került.
beforeprint - az esemény az oldal kinyomtatása előtt következik be, azaz. mielőtt megnyitná a Nyomtatás párbeszédpanelt.

Átmeneti események

transferend – egy esemény, amely akkor indul el, amikor a CSS-átmenet befejeződött. Megjegyzés: ha az átmenetet a befejezés előtt eltávolítják (például ha css tulajdonságátmeneti tulajdonság eltávolításra kerül), akkor az átmeneti esemény nem fog aktiválódni.

A szerver által küldött események

hiba – az esemény akkor lép fel, ha hiba történik az eseményforrással. A hiba általában akkor fordul elő, ha a kapcsolat megszakad. Ha ez megtörténik, az EventSource objektum automatikusan megpróbál csatlakozni a szerverhez.
nyitott - az esemény akkor indul el, amikor az eseményforráshoz való kapcsolat meg van nyitva.
üzenet – az esemény akkor indul el, amikor üzenet érkezik az eseményforráson keresztül.
Az üzenetesemény eseményobjektuma a következő tulajdonságokat támogatja:
- adatok – tartalmazza az üzenetet.
- origin – az eseményt kiváltó dokumentum URL-je.
- lastEventId - az utolsó fogadott üzenet azonosítója (id).

Médiaesemények

Az audio/video betöltési folyamat során az események a következő sorrendben történnek: loadstart -> durationchange -> loadedmetadata -> loadeddata -> progress -> canplay -> canplaythrough .

megszakítás – az esemény akkor indul el, amikor az audio/video letöltés megszakad. Ez az esemény pontosan akkor következik be, amikor a médiaadatok letöltése megszakadt (megszakadt), és nem azért, mert hiba történt.
hiba – az esemény akkor indul el, amikor hiba történt az audio/videó betöltése közben.
leállt – az esemény akkor aktiválódik, amikor a böngésző megpróbál médiaadatokat lekérni, de az adatok nem érhetők el.
- az esemény akkor következik be, amikor a böngésző elkezdi keresni a megadott hangot/videót, pl. amikor a letöltési folyamat elindul.
Durationchange – az esemény akkor indul el, amikor az audio/video időtartam megváltozik. Hang/videó betöltése esetén az időtartam „NaN”-ról a hang/videó tényleges időtartamára változik.
loadedmetadata – Az esemény akkor aktiválódik, amikor a megadott audio/videó metaadatai betöltődnek. Az audio/videó metaadatok a következőkből állnak: időtartam, méret (csak videó) és szövegsáv.
loadeddata – Az esemény az adathordozó első keretének betöltése után indul el.
folyamat – esemény, amely akkor indul el, amikor a megadott hangot/videót betölti a böngésző.
canplay - az esemény akkor indul el, amikor a böngésző elkezdheti lejátszani a megadott hangot/videót (azaz amikor az audio/video adatfolyam elég pufferelt ahhoz, hogy a böngésző elkezdhesse lejátszani).
canplaythrough – Az esemény akkor indul el, amikor a böngésző le tudja játszani a megadott médiát a pufferelés megállítása nélkül.
véget ért – az esemény akkor indul el, amikor a hang-/videolejátszás véget ért (a végére ért). Ez az esemény használható olyan üzenetek megjelenítésére, mint "Köszönjük a figyelmet", "Köszönjük, hogy megnézte" stb.
szünet – az esemény akkor következik be, amikor az audio/video lejátszást a felhasználó vagy kód (programozottan) szünetelteti.
lejátszás – az esemény akkor indul el, amikor az audio/videó lejátszása elindul. Ez akkor is előfordul, ha egy hang/videó szüneteltetését feloldották, és elkezdődik a lejátszás.
lejátszás – az esemény akkor következik be, amikor egy hangot/videót lejátszanak, miután azt pufferelés céljából szüneteltették vagy leállították.
ratechange - az esemény akkor indul el, amikor az audio/video lejátszási sebesség megváltozik.
keresés – az esemény akkor következik be, amikor a felhasználó elkezdi mozgatni a csúszkát (átmenet) a lejátszott audio/videó új időbeli pozíciójába.
keresett – az esemény akkor következik be, amikor a felhasználó befejezte a csúszka mozgatását (áttérés) a lejátszott audio/videó új időpozíciójába. A keresett esemény a keresett esemény ellentéte. Az aktuális lejátszási pozíció meghatározásához használja az Audio/Video objektum currentTime tulajdonságát.
timeupdate – az esemény akkor következik be, amikor a lejátszott audio/videó időbeli pozíciója megváltozik.
Ez az esemény történik:
- audio/video adatfolyam lejátszásakor.
- amikor a csúszkát a lejátszott audio/videó új időpozíciójába állítja.
A timeupdate eseményt gyakran használják az Audio/Video objektum currentTime tulajdonságával együtt, amely visszaadja a lejátszott audio/videó aktuális pozícióját másodpercekben.
volumechange - az esemény minden alkalommal megtörténik, amikor a lejátszott videó/audió hangerejét módosítják.
Ez az esemény akkor következik be, ha:
- növelje vagy csökkentse a hangerőt;
- elnémítja vagy feloldja a hangot.
várakozás – az esemény akkor következik be, amikor a videót pufferelés céljából leállítják.

Vegyes események

kapcsoló – az esemény akkor aktiválódik, amikor a felhasználó megnyitja vagy bezárja a részletek elemet. A részletek elem célja további információk létrehozása, amelyeket a felhasználó szükség esetén megtekinthet vagy elrejthet.
kerék - az esemény akkor következik be, amikor az egér görgőjét előre vagy hátra görgetik az elem felett.

Feladatok

Trükkös a „Billentyű lenyomása a billentyűzeten (onkeypress)” esemény? És ha igen, akkor milyen egyszerű események hatására következik be?

Például van 2 p eleme, és a felhasználó mozgatja az egeret az egyik p elemhez tartozó területről egy másik p elemhez tartozó területre. Milyen események történnek ebben az esetben, és milyen elemek generálják ezeket?

Utolsó frissítés: 2015.11.1

Beépített kezelők

Az utolsó témakörben a beépített eseménykezelőket vettük figyelembe, amelyek az elemkódban vannak definiálva attribútumokkal:

Bár ez a megközelítés nagyszerűen működik, számos hátránya van:

A HTML kód keverve van JavaScript kóddal, ami megnehezíti az alkalmazás fejlesztését, hibakeresését és karbantartását

Eseménykezelők csak a weboldalon már létrehozott elemekhez állíthatók be. A dinamikusan létrehozott elemek ebben az esetben megfosztják az események kezelésének képességétől

Egy eseményhez csak egy kezelő csatolható egy elemhez

Nem távolíthat el egy kezelőt a kód megváltoztatása nélkül

Eseménykezelő tulajdonságai

A beépített kezelők használatakor felmerülő problémákat a kezelők tulajdonságaival kívánták megoldani. Ahogy a html elemeknek vannak attribútumai a kezelőknek, úgy a javascript kódban is DOM elemek attribútumoknak megfelelő kezelőtulajdonságokat kaphatunk:

function handler(e)( alert(e.type); ) document.getElementById("rect").onclick = kezelő;

Ennek eredményeként csak el kell fogadnunk az onclick tulajdonságot, és hozzá kell rendelnünk egy kezelőként használt funkciót. Ezáltal html kódot elválasztva a javascript kódtól.

Azt is érdemes megjegyezni, hogy a böngésző automatikusan átadja az Event objektumot az eseménykezelőnek, amely az eseménnyel kapcsolatos összes információt tárolja. Ezért ezt az objektumot a kezelő függvényben is megkaphatjuk paraméterként.

Eseményhallgatók

Bár a kezelő tulajdonságai megoldják az attribútumok használatával kapcsolatos problémák egy részét, ugyanakkor ez sem a legjobb megközelítés. Az eseménykezelők beállításának másik módja a figyelők használata.

Az eseményfigyelőkkel való együttműködéshez a JavaScript rendelkezik egy EventTarget objektummal, amely az addEventListener() (figyelő hozzáadásához) és a removeEventListener() metódusokat határozza meg a figyelő eltávolításához. És mivel a html DOM elemek egyben EventTarget objektumok is, ezek a metódusok is rendelkeznek. Valójában a hallgatók ugyanazokat a funkciókat képviselik, mint a kezelők.

Az addEventListener() metódus két paramétert vesz igénybe: az esemény nevét az on előtag nélkül, valamint az eseményhez tartozó eseménykezelő funkcióját. Például:

#rect(szélesség:50px; magasság:50px; háttérszín:kék; ) var rect = document.getElementById("rect"); rect.addEventListener("kattintás", függvény (e) ( alert(e.type); ));

Vagyis ebben az esetben a kattintási esemény újra feldolgozásra kerül. Második paraméterként a függvény nevét is használhatja:

Függvénykezelő(e)( alert(e.type); ) var rect = document.getElementById("rect"); rect.addEventListener("kattintás", kezelő);

A figyelő eltávolítása hasonló a hozzáadáshoz:

Rect.removeEventListener("kattintás", kezelő);

A hallgatók használatának előnye, hogy egy eseményhez több funkciót is beállíthatunk:

var kattintások = 0; function handlerOne(e)( alert(e.type); ) function handlerTwo(e)( clicks++; var newNode = document.createElement("p"); newNode.textContent = "kattintás történt" + kattintások; document.body.appendChild (newNode); ) var rect = document.getElementById("rect"); // csatolja az első kezelőt rect.addEventListener("click", handlerOne); // csatolja a második kezelőt rect.addEventListener("click", handlerTwo);

Tematikus anyagok: