Bevezetés a HTML eseményekbe
A HyperText Markup Language (HTML) egy hipertext nyelv, amely webdizájnt hoz létre. bármelyik böngészőben megjelenik. A HTML események cselekvés. minden kattintással rendelkező felhasználó reakciót kap a Művelet nevű böngészőből. Ezt a folyamatot eseménynek nevezik.
Tegyük fel, hogy ha a weboldalnak van egy űrlapja, akkor a felhasználó kitölti ezt az űrlapot, akkor a felhasználó két kulcsot kap, az egyiket elküldik, a másikat pedig törlik. Amikor a felhasználók megnyomják a beküldés gombot, az űrlapadatok mentésre kerülnek. A Mégse gombbal törölje az űrlapadatokat, és frissítse újra az űrlapot. Ezt a gombműveletet eseménynek hívják. ez az esemény a felhasználó intézkedéseitől függ.
Különböző típusú HTML események
A HTML5-ben számos eseményttribútum érhető el, amelyek elsősorban 6 különböző típusba sorolhatók. Ezek az attribútumok JavaScript nyelven működnek.
- Windows eseményttribútumok: Ez a Windows objektum műveletéhez szükséges. A testcímkében működik.
- Űrlap esemény-attribútumai: Ha a felhasználó valamilyen műveletet hajt végre az űrlapon, például bemeneti adatokként, akkor törölje, küldje el, akkor ezek az esemény-attribútumok működnek.
- Billentyűzet esemény attribútumai: Ez a billentyűzet esemény attribútuma, amelyet a billentyűzet műveletéhez és a felhasználói interakcióhoz használnak.
- Egér esemény attribútumai: Az egér esemény attribútuma az egér mozgatásához, kattintáshoz, görgetéséhez stb.
- Vágólap esemény-attribútumai: Ez az esemény-attribútum a vágólap műveletéhez használható. Példa kivágásra, másolásra, kártevőre.
- Média esemény attribútumai: Ez az esemény attribútum olyan médiafájlokon működik, mint a videó stb.
Esemény attribútumok leírása
Az alábbiakban részletesebben ismertetjük az eseményttribútumokat:
1. Windows eseményttribútumok
|
Tulajdonság |
Leírás |
| onafterprint | Ez a szkript működik, bár a dokumentum kinyomtatása után. |
| onbeforeprint | Ez a szkript cselekszik, még mielőtt egy dokumentumot kinyomtatnák. |
| onbeforeunload | Míg a ki nem töltött dokumentum előtt ez a szkript működik. |
| onerror | A dokumentumban a Hiba fordul elő, majd ez az esemény végrehajtódik. |
| onhashchange | Az URL-változás horgonyos része a dokumentumban, amelyet az időbeli esemény végrehajtott. |
| Feltöltés alatt | Az első weboldal teljes betöltésekor az esemény végrehajtásra kerül. |
| onmessage | A dokumentumban az üzenet akkor történt, amikor az esemény végrehajtásra került. |
| Onoffline | Ha a hálózati kapcsolat nem érhető el, és a böngésző offline állapotban van, akkor az esemény végrehajtódik. |
| ononline | Ha a hálózat elérhető a böngészőben, akkor az esemény végrehajtásra került. |
| onpagehide | Ez a szkript akkor működik, ha a felhasználó nem dolgozik egy aktuális weboldalon, akkor az aktuális oldal elrejthető. |
| onpageshow | Ez a szkript akkor működik, amikor a jelenlegi webhely betöltődik. |
| onpopstate | Ez a szkript automatikusan működik a böngészőben az előzmények állapotának megváltozása érdekében. |
| onresize | Ez a szkript akkor működik, amikor az ablak böngészője megváltoztatja a méretet. |
| onstorage | Amikor a felhasználók webtárhelyét frissítették, az esemény végrehajtásra került. |
| onunload | Vagy a felhasználó aktuális weboldala nincs betöltve, vagy az ablak bezáródik, majd az esemény végrehajtódik. |
2. Forgassa meg az esemény jellemzőit
| Tulajdonság | Leírás |
| onblur | Néhány űrlap-érvényesítési objektum ellazítja a fókuszt, majd az esemény kioldódik. |
| onChange | Az értékváltozás az űrlapon, majd az esemény kioldódott. |
| onfocus | Az űrlapban az objektum fókuszált. Ezen az objektumon dolgozva az esemény kirúgott. |
| oninput | A felhasználó megadja az érték bevitelét az űrlapon, majd ezt az eseményt kirúgták. |
| oninvalid | Az esemény akkor működik, ha az elem nem felel meg az előre meghatározott korlátozásoknak. |
| onreset | A felhasználó alaphelyzetbe állította az űrlap adatait, majd az esemény kirúgott. |
| onsearch | A felhasználók megkeresik a szükséges mezőt, majd az esemény elindul. |
| onSelect | A felhasználó kiválasztja a szöveget vagy a szövegterületet formában, majd az esemény kiürül. |
| onsubmit | A felhasználó a végén beküldi az űrlapot, majd az esemény kiürül. |
3. A billentyűzet esemény attribútumai
| Tulajdonság | Leírás |
| onkeydown | A felhasználó billentyűzet segítségével nyomja le a gombot, amikor az esemény működik |
| onkeypress | A billentyűzet segítségével a felhasználók megnyomják a gombot, és a képernyőn megjelenő karakterek akkor működnek. |
| onkeyup | A megnyomás után a kulcsfelhasználó elengedi a kulcsot, majd az esemény működik. |
4. Egér esemény attribútumai
| Tulajdonság | Leírás |
| kattintásra | A felhasználó rákattint az egérre a gombra, majd esemény történt. |
| ondblclick | A felhasználók kétszer kattintanak az egérrel, majd az esemény bekövetkezett. |
| onmousedown | A felhasználó megnyomja az egérgombot az elemre, majd az esemény bekövetkezett. |
| onMouseMove | A felhasználó az egérmutatót az elem fölé mozgatja, majd az esemény bekövetkezett. |
| onmouseout | A felhasználó az egeret az elem kívülről mozgatja, majd az esemény bekövetkezett. |
| onmouseover | A felhasználó az egérrel mozgatja az elemet, majd az esemény bekövetkezett. |
| onmouseup | A felhasználó elengedte az egérgombot, majd az esemény bekövetkezett. |
| onmousewheel | Az egér segítségével a felhasználó fel-le gördítheti az elemet, majd az esemény bekövetkezett. |
| onwheel | Egy egérkerék felhasználójával görgesse fel és le, majd az esemény bekövetkezett. |
5. A vágólap esemény attribútumai
| Tulajdonság | Leírás |
| oncopy | Az egér felhasználóival a tartalom másolásához az esemény bekövetkezett. |
| oncut | Az egér felhasználóival kivágták a tartalmat, majd az esemény bekövetkezett. |
| onpaste | Az egér felhasználói segítségével illessze be a tartalmat, majd esemény történt. |
6. A médiaesemények attribútumai
| Tulajdonság | Leírás |
| onabort | Ha a médiafájlok megszakítása a letöltéshez és az újbóli lejátszáshoz, akkor esemény történik. |
| oncanplay | Ha bármilyen médiafájl lejátszásra kész, akkor ez az eseményindító ki lesz kapcsolva. |
| oncanplaythrough | A lejátszásra kész médiafájl pufferolás és betöltése nélkül. |
| oncuechange | Az elem megváltoztatja az esemény kirúgását. |
| ondurationchange | A médiafájl megváltoztatja az indító idõtartamát. |
| onemptied | Ha a médiafájl nem érhető el és halálos hiba merül fel, akkor a trigger kioldásra kerül. |
| onended | A médiafájl a végponton jön, majd a trigger kioldásra kerül. |
| onerror | Ha hiba történt a médiafájl megszerzésekor, akkor az indító aktiválódik |
| onloadeddata | A médiafájl betölti az adatokat, majd aktiválódik. |
| onloadedmetadata | A médiafájl betölti a metaadatokat, majd az indító aktiválódik. |
| onloadstart | A médiafájl betöltése megkezdődik, majd a trigger kiürül. |
| onpause | A médiafájl újra lejátszása szüneteltetésre kerül, majd az indító aktiválódik. |
| onplay | A lejátszásra kész médiafájl, majd az indító indul. |
| onplaying | A médiafájl lejátszása elindul, majd a trigger kioldásra kerül. |
| Folyamatban | Ez a szkript akkor működik, amikor a böngésző kapcsolatba lép a médiaadatokkal. |
| onratechange | Ha a videók lejátszásának sebessége megváltozik, akkor a trigger kiold. |
| onseeked | A felhasználók az áthelyezést befejezték, különben kihagyják a videó új pozícióját. ez az attribútum hamisként van beállítva. |
| onseeking | A felhasználó mozgatni akar, különben kihagyja a videó új pozícióját. ez az attribútum igaz. |
| onstalled | Ha a böngésző hirtelen leáll az adatkapcsolathoz, akkor az esemény működik. |
| onsuspend | Ha a webböngésző szándékosan nem kap médiaadatokat, akkor az események működnek. |
| ontimeupdate | Amikor a felhasználó megváltoztatja a videó lejátszási helyzetét, például előre és hátra. |
| onvolumechange | A média hangerejének alacsonyra és magasra változtatása. |
| onwaiting | Ha az adatok betölti az információkat, akkor az aktuális videó leáll és pufferelés történik, majd az esemény működik. |
Következtetés
A HTML-események egyszerű módja annak, hogy cselekedjenek, és felületet készítsenek a böngészők és a felhasználók között. A felhasználók minden fellépés reakcióját könnyedén megkaphatják. Például; vágja és másolja a vágólapra, mozgassa és kattintson az egér, gombok az űrlapra. Az események valósidejűvé teszik a webes alkalmazásokat, és intelligens munkarendszereket készítenek.
Ajánlott cikkek
Ez egy útmutató a HTML eseményekhez. Itt tárgyaljuk a HTML események bevezetését és típusait, például a Windows, az űrlap, a billentyűzet és még sok más, valamint az attribútumok részletes magyarázatát. A következő cikkeket is megnézheti további információkért -
- Alapvető HTML címkék
- A HTML előnyei
- HTML formátumú címkék
- HTML stíluslapok
- HTML blokkok
- Az 5 legnépszerűbb HTML eseményttribútum példákkal
- Állítsa be a háttér színét HTML-ben a Példa segítségével
- Útmutató a különböző JavaScript eseményekhez
- HTML űrlap ellenőrzése | Példák