HTML esemény-attribútumok - Az 5 legnépszerűbb HTML eseményttribútum példákkal

Bevezetés a HTML eseményttribútumokba

Ebben a cikkben részletesen tárgyaljuk a HTML eseményttribútumokat. Az események azok a műveletek, amelyeket a felhasználói művelet eredményeként hajtanak végre. Például, amikor egy felhasználó megnyom egy gombot a billentyűzeten az adatok elolvasásához, akkor azt állítják, hogy ez a billentyűzet eseménye. Ezeket a tevékenységeket akkor hajtják végre, amikor a felhasználó belép egy webhelyre, és egy gomb kattintást hajt végre, vagy amikor egy oldal betöltődik a frissítő gomb megnyomásával, ahol a böngésző manipulálja az oldalakat, ezeket a műveleteket eseménynek kell tekinteni. Itt áttekintjük az események alapvető megértését és annak működését a böngészőben a felhasználói műveletek során. Különböző típusú események fordulnak elő a teljes böngészőablakban, amelyeket a következő szakaszok ismertetnek.

A legnépszerűbb HTML eseményttribútumok

Az eseményeknek más változata is elérhető a HTML-ben. És ezeknek az eseményeknek van egy kis kódblokkja, amelyet eseménykezelőnek neveznek, amely az eseményművelet végrehajtásakor indul. Ezeket a HTML elemekhez csatolják. Az eseménykezelők vagy esemény-hallgatók fontos szerepet játszanak a HTML eseményttribútumokban. Lássuk különféle típusú eseményttribútumokat, amelyeket globálisan deklarálunk és alkalmazunk a HTML elemekre, valamint a munkájukat is részletesen. Négy elsődleges eseményttribútumot használnak főként. Ők:

1. Ablak esemény
2. Forma események
3. Egér események
4. Billentyűzet események
5. Húzza az eseményeket

Mindezen tulajdonságokat egyenként, példával írjuk le. Először együtt megyünk.

1. Ablak esemény

• onafterprintEvent: Ezt az attribútumot az összes Html címke támogatja, és akkor működik, amikor egy oldal nyomtatni kezdett, és egyetlen érték parancsfájllal rendelkezik. Itt jön egy példa a HTML kódra. Ez a példa egy gomb megnyomásakor egy párbeszéd üzenetben kinyomtatott üzenetet nyomtat.

Kód:



Windows onafterprint Event

Windows onafterprint Event
This attribute works in IE and Mozilla

function myfun() (
alert("Document is being printed");
)





Windows onafterprint Event

Windows onafterprint Event
This attribute works in IE and Mozilla

function myfun() (
alert("Document is being printed");
)





Windows onafterprint Event

Windows onafterprint Event
This attribute works in IE and Mozilla

function myfun() (
alert("Document is being printed");
)





Windows onafterprint Event

Windows onafterprint Event
This attribute works in IE and Mozilla

function myfun() (
alert("Document is being printed");
)





Windows onafterprint Event

Windows onafterprint Event
This attribute works in IE and Mozilla

function myfun() (
alert("Document is being printed");
)



Kimenet:

• onbeforeprint: A nyomtatás előtt működik. Az esemény a nyomtatási folyamat után kirúgódik. Az alábbiakban látható a példakód.

Kód:



body (
color: #9370DB;
background-color: #BC8F8F;
text-align: center;
padding: 20px;
)
p (
font-size: 2rem;
)

Attribute Demo




body (
color: #9370DB;
background-color: #BC8F8F;
text-align: center;
padding: 20px;
)
p (
font-size: 2rem;
)

Attribute Demo




body (
color: #9370DB;
background-color: #BC8F8F;
text-align: center;
padding: 20px;
)
p (
font-size: 2rem;
)

Attribute Demo


trigger a nyomtatáshoz.

függvény get () (
document.body.style.background = "# 00BFFF";
)

Kimenet:

• onerror: Ezt a funkciót akkor indítják el, amikor hiba lép fel, miközben nincs elem.

Kód:






Helló Világ.

funkció myFun () (
figyelmeztetés ("probléma a kép betöltésekor");
)

Kimenet:

• onload: Ez a funkció segít egy objektum betöltésében, és jól működik annak ellenőrzésében, hogy a weboldal megfelelően van-e betöltve.

Kód:



onload event demo


function ldImg() (
alert("image loaded without error");
)



Kimenet:

• onresize: Ez az esemény akkor vált ki, amikor a böngészőablak átméretezésre kerül, és bármilyen elem kiváltható az átméretezés attribútum alatt.

Kód:


onresize event

function cmg() (
alert('welcome to educba');
)
window.onresize = cmg;

onclick="alert(window.onresize);">


Kimenet:

• onunload: Ez az esemény akkor vált ki, amikor egy weboldal ablaka bezáródik, vagy amikor a felhasználó elhagyja a weboldalt. Az alábbi kód kicsomagolja az oldalt, amikor a felhasználó elhagyja, és riasztást küld, köszönet a keresésért. Ez az esemény néha működik az összes böngészőben.

Kód:


Welcometo educba tutorial



Welcometo educba tutorial



Welcometo educba tutorial


Hagyja el az oldalt.

onfunc függvény () (
figyelmeztetés ("Köszönjük, hogy megkereste!");
)

Kimenet:

2. Formanyomtatványok

A Vezérlőkkel működik. A következő attribútumok akkor fordulnak elő, amikor a felhasználó interakciót folytat a böngészőkkel.

• onblur: Ez az esemény akkor fordul elő, ha a felhasználó figyelme távol van az űrlap ablaktól. A következő példa kisbetűket ír be, és amikor a benyújtás gombra kattint, a kimenetet nagybetűvé alakítja.

Kód:



Form onblur
body (
text-align:center;
)
h1 (
color:pink;
)

EDUCBA
onblur="myfunc()">
Submit
function myfunc() (
var a = document.getElementById("aaa");
a.value = a.value.toUpperCase();
)





Form onblur
body (
text-align:center;
)
h1 (
color:pink;
)

EDUCBA
onblur="myfunc()">
Submit
function myfunc() (
var a = document.getElementById("aaa");
a.value = a.value.toUpperCase();
)





Form onblur
body (
text-align:center;
)
h1 (
color:pink;
)

EDUCBA
onblur="myfunc()">
Submit
function myfunc() (
var a = document.getElementById("aaa");
a.value = a.value.toUpperCase();
)



Kimenet:

• onchange: Ez az esemény akkor fordul elő, amikor a felhasználó megváltoztatja az űrlap meglévő elemét. Ez akkor fordul elő, amikor egy elem elveszíti a fókuszt.

Kód:



HTML onchange


select the dress color
pink
Yellow
White


Megjegyzés: Válasszon bármelyik lehetőséget

Ismertesse röviden:

Beküldés

Kimenet:

• onfocus: Ez az attribútum akkor engedélyezett, ha a felhasználó figyelmet fordít egy weboldal elemére, vagy ha a bemenet fókuszált. Az alábbi példa kiemeli, ha bemeneti mezőt írunk be a mezőbe.

Kód:





Ez az esemény aktiválódik, amikor egy elem fókuszálódik.

Név:
Elhelyezkedés:
onfoc függvény (a) (
document.getElementById (a) .style.background = "rózsaszín";
)

Kimenet:

• oninput: Ez az esemény akkor indul el, amikor a bemenetet beírják a beviteli mezőbe. Akkor aktiválódik, amikor a szövegmezőben megváltozik az érték. Ez az elem értékének megváltozásakor tükrözi.



HTML oninput

body (
text-align:center;
)
h1 (
color:red;
)

Event Attribute
Enter the text:

function myon()
(
var x = document.getElementById("EDUCBA").value;
document.getElementById("sid").innerHTML = "Enter the text : " +x;
)





HTML oninput

body (
text-align:center;
)
h1 (
color:red;
)

Event Attribute
Enter the text:

function myon()
(
var x = document.getElementById("EDUCBA").value;
document.getElementById("sid").innerHTML = "Enter the text : " +x;
)





HTML oninput

body (
text-align:center;
)
h1 (
color:red;
)

Event Attribute
Enter the text:

function myon()
(
var x = document.getElementById("EDUCBA").value;
document.getElementById("sid").innerHTML = "Enter the text : " +x;
)



Kimenet:

• oninvalid: Ez az attribútum hívja az eseményeket, ha a beviteli típusba beírt szöveg érvénytelen vagy üres marad. Ennek az eseményttribútumnak ki kell töltenie a bemeneti elemet.

Kód:



example oninvalid Event
p (
color:orange;
)
body (
text-align:center;
)



A HTML egy weboldal létrehozására szolgál

Írja be a nevet:

Kimenet:

• onreset: akkor kerül ki, amikor az űrlap pihen. A következő példa azt mondja, hogy amikor elküldi a gombot, egy űrlap feldolgozásra kerül, és ismét, amikor rákattint a visszaállításra, az űrlap visszaáll.

Kód:



body (font-family:calibri;)
label (font-variant:small-caps;)
ol (background-color:#610000; margin-top:35px;)
li (margin-top:3px; padding:3px; background-color:rose; font-size:15px;)
div (position:absolute;top:250px;left:70px; font-size:1.5em;
)

Form with input to reset and submit

Enter input:



function onInva() (
alert("Input field cannot be empty!");
)
function onInp() (
var input_value = document.getElementById("iv").value;
document.getElementById("a_box").innerHTML = "Input value:
" + iv;
)
function onRes() (
alert("form is reset!");
)
function onSubmitEvent() (
alert("Form is loading");
location.reload();
)





body (font-family:calibri;)
label (font-variant:small-caps;)
ol (background-color:#610000; margin-top:35px;)
li (margin-top:3px; padding:3px; background-color:rose; font-size:15px;)
div (position:absolute;top:250px;left:70px; font-size:1.5em;
)

Form with input to reset and submit

Enter input:



function onInva() (
alert("Input field cannot be empty!");
)
function onInp() (
var input_value = document.getElementById("iv").value;
document.getElementById("a_box").innerHTML = "Input value:
" + iv;
)
function onRes() (
alert("form is reset!");
)
function onSubmitEvent() (
alert("Form is loading");
location.reload();
)


1. 

body (font-family:calibri;)
label (font-variant:small-caps;)
ol (background-color:#610000; margin-top:35px;)
li (margin-top:3px; padding:3px; background-color:rose; font-size:15px;)
div (position:absolute;top:250px;left:70px; font-size:1.5em;
)

Form with input to reset and submit

Enter input:



function onInva() (
alert("Input field cannot be empty!");
)
function onInp() (
var input_value = document.getElementById("iv").value;
document.getElementById("a_box").innerHTML = "Input value:
" + iv;
)
function onRes() (
alert("form is reset!");
)
function onSubmitEvent() (
alert("Form is loading");
location.reload();
)




body (font-family:calibri;)
label (font-variant:small-caps;)
ol (background-color:#610000; margin-top:35px;)
li (margin-top:3px; padding:3px; background-color:rose; font-size:15px;)
div (position:absolute;top:250px;left:70px; font-size:1.5em;
)

Form with input to reset and submit

Enter input:



function onInva() (
alert("Input field cannot be empty!");
)
function onInp() (
var input_value = document.getElementById("iv").value;
document.getElementById("a_box").innerHTML = "Input value:
" + iv;
)
function onRes() (
alert("form is reset!");
)
function onSubmitEvent() (
alert("Form is loading");
location.reload();
)





body (font-family:calibri;)
label (font-variant:small-caps;)
ol (background-color:#610000; margin-top:35px;)
li (margin-top:3px; padding:3px; background-color:rose; font-size:15px;)
div (position:absolute;top:250px;left:70px; font-size:1.5em;
)

Form with input to reset and submit

Enter input:



function onInva() (
alert("Input field cannot be empty!");
)
function onInp() (
var input_value = document.getElementById("iv").value;
document.getElementById("a_box").innerHTML = "Input value:
" + iv;
)
function onRes() (
alert("form is reset!");
)
function onSubmitEvent() (
alert("Form is loading");
location.reload();
)



Kimenet:

• onsearch: akkor működik, amikor a felhasználó megnyom egy enter gombot.

Kód:





Írja be a mezőbe.
funkció myF () (
var k = document.getElementById ("érték1");
document.getElementById ("minta"). innerHTML = "keresési elem:" + k.érték;
)

Kimenet:

• onselect: akkor indul el, amikor a szöveg beviteli mezőben van kiválasztva. Ezzel egy párbeszédpanelt figyelmeztető üzenet nyomtat.

Kód:



onselect demo
h1 (
color:magenta;
)
body (
text-align:center;
)

function eduhtml() (
alert("text highlighted!");
)

EDUCBA Online tutorial
Text Box:





onselect demo
h1 (
color:magenta;
)
body (
text-align:center;
)

function eduhtml() (
alert("text highlighted!");
)

EDUCBA Online tutorial
Text Box:





onselect demo
h1 (
color:magenta;
)
body (
text-align:center;
)

function eduhtml() (
alert("text highlighted!");
)

EDUCBA Online tutorial
Text Box:



Kimenet:

• onsubmit: Ennek az eseménynek a célja a végrehajtás végrehajtása a benyújtás gomb megnyomása közben.

Kód:



Onsubmit Example

Enter name:
Email :


function myF() (
alert("The form was submitted");
)



Kimenet:

3. Kulcstartó attribútumok

• OnKeyDown: Akkor indul el, amikor a felhasználó lefelé mutató nyílbillentyűt nyom meg.

Kód:





Példa az Onkeydown-ra.

funkció mykedwn () (
riasztás ("gombnyomás be van kapcsolva");
)

Kimenet:

• OnKeyPress: Ez az esemény akkor vált ki, amikor a felhasználó megnyomja a billentyűzet bármelyik gombját. Megjegyzés: néhány böngésző nem támogatja egyetlen gomb megnyomását sem.

Kód:





Ez a példa megmutatja, mikor írja be a felhasználó a szöveget az esemény kiváltásához

>

Kimenet:

• OnKeyUp: Ez az attribútum akkor aktiválódik, amikor a felhasználó kurzort enged a szövegmezőből. Az alábbiakban bemutatjuk a demonstrációt.

Kód:





Ez a példa a karaktert kisbetűvé alakítja.

Töltse ki a nevet:
funkció mykey () (
var g = document.getElementById ("jjj");
g.érték = g.érték.toLowerCase ();
)

Kimenet:

4. Egér esemény attribútumai

Ez a művelet egér eseményt vált ki, amikor az egeret megnyomják akár a számítógépről, akár bármilyen külső eszközről, például okostelefonról vagy táblagépről. Az egér eseményeinek néhánya az alábbiakban található:

• onclick: Ez akkor vált ki, amikor a felhasználó az egér felett megnyomja a gombot. Az alábbiakban egy bemeneti példa látható az esemény megjelenítéséhez az egér kattintása közben.

Kód:



HTML onclick Event




HTML onclick Event




HTML onclick Event


Az esemény alapvető szerepet játszik a HTML-ben.

kettyenés

oncf () (
document.getElementById ("minta"). innerHTML = "Hello World";
)

Kimenet:

• onmousemove: akkor indul, amikor az egeret bármelyik irányba mozgatják a kép fölött.

Kód:


Event onmousemove demo



Ez az esemény akkor aktiválódik, amikor a mutató elhúzza az irányát.

Minta szöveg

Kimenet:

• Onmouseup: Ez az esemény értesítést ad, ha a felhasználó egy gombot kiad egy kimeneten.

Kód:



body (
color: "#ff0000";
height: 120vh;
background-color: #610000;
text-align: center;
)
.polygon (
float: right;
shape-inside: polygon(0 0, 0 200px, 100px 200px);
clip-path: polygon(0 0, 0 250px, 100px 300px);
height: 200px;
width: 200px;
background: linear-gradient(to bottom left, #7CFC00, #8B008B);
)
p (
margin: 30px auto;
)

HTML onmouseup Demo




body (
color: "#ff0000";
height: 120vh;
background-color: #610000;
text-align: center;
)
.polygon (
float: right;
shape-inside: polygon(0 0, 0 200px, 100px 200px);
clip-path: polygon(0 0, 0 250px, 100px 300px);
height: 200px;
width: 200px;
background: linear-gradient(to bottom left, #7CFC00, #8B008B);
)
p (
margin: 30px auto;
)

HTML onmouseup Demo




body (
color: "#ff0000";
height: 120vh;
background-color: #610000;
text-align: center;
)
.polygon (
float: right;
shape-inside: polygon(0 0, 0 200px, 100px 200px);
clip-path: polygon(0 0, 0 250px, 100px 300px);
height: 200px;
width: 200px;
background: linear-gradient(to bottom left, #7CFC00, #8B008B);
)
p (
margin: 30px auto;
)

HTML onmouseup Demo


kattintson az objektum alatt

mupFn () (
document.querySelector ('. polygon'). style.transform = 'scale (2.2)';
)

Kimenet:

• Onmouseoverover: Hajtsa végre a JavaScript-et, amikor az egérmutatót egy kép fölé viszi

Kód:



Example demonstrating Onmouseover.
Mouse over
function A() (
document.getElementById("sample").style.color = "yellow";)
function B() (
document.getElementById("sample").style.color = "green";
)





Example demonstrating Onmouseover.
Mouse over
function A() (
document.getElementById("sample").style.color = "yellow";)
function B() (
document.getElementById("sample").style.color = "green";
)





Example demonstrating Onmouseover.
Mouse over
function A() (
document.getElementById("sample").style.color = "yellow";)
function B() (
document.getElementById("sample").style.color = "green";
)



Kimenet:

5. Húzza az esemény attribútumait

Ez az alkalmazás segít a HTML ablakban, amikor a felhasználó húzza a bemeneti elemet. Az alábbiakban bemutatjuk azokat a különböző eseményfigyelőket, amelyeket a HTML a húzott adatok tárolására használ.

• Ondrag: Ezt akkor használják, amikor egy elemet húznak a weboldalról.
• Ondragstart : Ez akkor fordul elő, amikor a felhasználó elkezdi húzni a beviteli mezőből. Az alábbi példa bemutatja a két célterület húzását.

Kód:



#b1, #b2 (
float:left;padding:11px;margin:11px; -moz-user-select:none;
)
#b1 ( background-color: #FF6699; width:65px; height:85px; )
#b2 ( background-color: #808000; width:180px; height:180px; )

function dStart(e) (
e.dataTransfer.effectAllowed = 'move';
e.dataTransfer.setData("Text", e.target.getAttribute('id'));
e.dataTransfer.setDragImage(e.target, 0, 0);
return true;
)


Drag demo
Drag the box.
ondragstart = "return dStart(e)">
Drag it
welcome





#b1, #b2 (
float:left;padding:11px;margin:11px; -moz-user-select:none;
)
#b1 ( background-color: #FF6699; width:65px; height:85px; )
#b2 ( background-color: #808000; width:180px; height:180px; )

function dStart(e) (
e.dataTransfer.effectAllowed = 'move';
e.dataTransfer.setData("Text", e.target.getAttribute('id'));
e.dataTransfer.setDragImage(e.target, 0, 0);
return true;
)


Drag demo
Drag the box.
ondragstart = "return dStart(e)">
Drag it
welcome





#b1, #b2 (
float:left;padding:11px;margin:11px; -moz-user-select:none;
)
#b1 ( background-color: #FF6699; width:65px; height:85px; )
#b2 ( background-color: #808000; width:180px; height:180px; )

function dStart(e) (
e.dataTransfer.effectAllowed = 'move';
e.dataTransfer.setData("Text", e.target.getAttribute('id'));
e.dataTransfer.setDragImage(e.target, 0, 0);
return true;
)


Drag demo
Drag the box.
ondragstart = "return dStart(e)">
Drag it
welcome