Atributi dogodkov HTML - Prvih 5 atributov dogodkov HTML s primeri

Uvod v atribute HTML dogodkov

V tem članku bomo podrobno razpravljali o atributih HTML dogodkov. Dogodki so dejanja, ki se izvajajo kot posledica uporabnikovega delovanja. Na primer, ko uporabnik pritisne tipko na tipkovnici za branje podatkov, potem naj bi šlo za dogodke na tipkovnici. Te dejavnosti se opravijo, ko uporabnik pogleda na spletno mesto in izvede klik gumba ali ko se stran naloži na gumb za osvežitev, kjer brskalnik na straneh manipulira, so vsa ta dejanja dogodek. Tu bomo preučili osnovno razumevanje dogodkov in kako deluje v brskalniku na uporabnikovih dejanjih. V celotnem oknu brskalnika se dogajajo različne vrste dogodkov, ki so razloženi v naslednjih razdelkih.

Najboljših 5 atributov dogodkov HTML

V HTML je na voljo drugačna različica dogodkov. In vsi ti dogodki imajo majhen blok kode, imenovan kot upravljavec dogodkov, ki se sproži, ko se izvede dejanje dogodka. Ti so priloženi elementom HTML. Prireditelji dogodkov ali poslušalci dogodkov igrajo pomembno vlogo v atributih dogodkov HTML. Oglejmo si različne vrste atributov dogodkov, ki so globalno deklarirani in uporabljeni za elemente HTML, ki tudi podrobno delujejo. V glavnem se uporabljajo štirje atributi primarnih dogodkov. To so:

1. Dogodek okna
2. Dogodki v obliki
3. Dogodki z miško
4. Dogodki na tipkovnici
5. Povlecite dogodke

Vse te atribute bomo opisali enega za drugim s primerom. Najprej bomo šli.

1. Okenski dogodek

• onafterprintEvent: Ta atribut podpirajo vse oznake Html in deluje, ko se stran začne tiskati in ima skript z eno samo vrednostjo. Tu je primer kode HTML. Ta primer prikazuje, ko pritisnete gumb, natisne sporočilo v pogovornem oknu.

Koda:



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");
)



Izhod:

• onbeforeprint: deluje pred tiskanjem. Dogodek se odpusti po postopku tiskanja. Spodaj je primer kode.

Koda:



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


sprožilec za tiskanje.

funkcija get () (
document.body.style.background = "# 00BFFF";
)

Izhod:

• onerror: Ta funkcija se sproži, ko se napaka vrže, medtem ko noben element ne obstaja.

Koda:






Pozdravljen, svet.

funkcija myFun () (
opozorilo ("težava z nalaganjem slike.");
)

Izhod:

• onload: Ta funkcija pomaga pri nalaganju predmeta in dobro deluje, če je spletna stran pravilno naložena.

Koda:



onload event demo


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



Izhod:

• onresize: ta dogodek se sproži, ko spremenimo velikost okna brskalnika in pod atributom velikosti lahko sprožimo kateri koli element.

Koda:


onresize event

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

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


Izhod:

• onunload: Ta dogodek se sproži, ko je okno spletne strani zaprto ali ko uporabnik zapusti spletno stran. Spodnja koda odstrani stran, ko uporabnik zapusti in vrne opozorilo zahvaljujoč se iskanju. Ta dogodek včasih deluje v vseh brskalnikih.

Koda:


Welcometo educba tutorial



Welcometo educba tutorial



Welcometo educba tutorial


Zapustite stran.

funkcija onfunc () (
opozorilo ("Hvala za iskanje!");
)

Izhod:

2. Oblikujte prireditve

Deluje z obrazcem Controls. Sledijo atributi, ki se pojavijo pri interakciji uporabnika z brskalniki.

• onblur: Ta dogodek se zgodi, ko je uporabnikova pozornost oddaljena od okna obrazca. Naslednji primer upošteva vnos malih črk in ko kliknete gumb za oddajo, pretvori izhod v zgornjo črko.

Koda:



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();
)



Izhod:

• onchange: ta dogodek se zgodi, ko uporabnik spremeni obstoječi element v obrazcu. To se zgodi, ko element izgubi fokus.

Koda:



HTML onchange


select the dress color
pink
Yellow
White


Opomba: Izberite katero koli možnost

Opišite se na kratko:

Pošlji

Izhod:

• onfocus: Ta atribut je omogočen, ko uporabnik posveti pozornost elementu na spletni strani ali ko je fokusiran vnos. Spodnji primer poudarja, ko v polje vnesemo vnos.

Koda:





Ta dogodek se sproži, ko je element osredotočen.

Ime:
Kraj:
funkcija onfoc (a) (
document.getElementById (a) .style.background = "roza";
)

Izhod:

• oninput: Ta dogodek se sproži, ko se vnese vnos v polje za vnos. Aktivira se ob spremembi vrednosti v besedilnem polju. Odseva, ko se vrednost elementa spremeni.



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;
)



Izhod:

• oninvalid: Ta atribut kliče dogodke, ko je besedilo, vneseno v vrsto vnosa, neveljavno ali ostane prazno. Ta atribut dogodka mora zapolniti vhodni element.

Koda:



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



HTML se uporablja za ustvarjanje spletne strani

Vnesite ime:

Izhod:

• onreset: sproži se, ko obrazec počiva. Naslednji primer pravi, ko oddate gumb, se obrazec obdeluje in ko kliknete, da ponastavite obrazec, se ponastavi.

Koda:



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();
)



Izhod:

• onsearch: deluje, ko uporabnik pritisne tipko za vnos.

Koda:





V polje napišite.
funkcija myF () (
var k = document.getElementById ("vrednost1");
document.getElementById ("vzorec"). InternalHTML = "iskalni element je:" + k.value;
)

Izhod:

• onselect: sproži se, ko je v polju za vnos izbrano besedilo. V njega se vrže pogovorno okno, ki tiska opozorilno sporočilo.

Koda:



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:



Izhod:

• onsubmit: Namen tega dogodka je izvesti dejanje, izvedeno med pritiskom na gumb za pošiljanje.

Koda:



Onsubmit Example

Enter name:
Email :


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



Izhod:

3. Lastnosti ključne plošče

• OnKeyDown: Sproži se, ko uporabnik pritisne tipko puščice navzdol.

Koda:





Primer za Onkeydown.

funkcija mykedwn () (
opozorilo ("pritisk na tipko je aktiviran");
)

Izhod:

• OnKeyPress: Ta dogodek se sproži, ko uporabnik pritisne katero koli tipko na tipkovnici. Opomba: nekateri brskalniki ne podpirajo nobene tipke.

Koda:





Ta primer prikazuje, kdaj uporabnik v besedilnem območju sproži dogodek

>

Izhod:

• OnKeyUp: Ta atribut se sproži, ko uporabnik sprosti kurzor iz besedilnega polja. Spodaj sledi demonstracija.

Koda:





Ta primer pretvori znak v male črke.

Vnesite ime:
funkcija mykey () (
var g = document.getElementById ("jjj");
g.value = g.value.toLowerCase ();
)

Izhod:

4. Atributi miškega dogodka

To dejanje sproži dogodek miške, ko miško pritisnete bodisi iz računalnika ali katere koli zunanje naprave, kot je pametni telefon ali tablični računalnik. Spodaj so navedeni nekateri mišji dogodki:

• onclick: sproži se, ko uporabnik pritisne gumb preko miške. Spodaj je prikazan primer vnosa za prikaz dogodka med klikom miške.

Koda:



HTML onclick Event




HTML onclick Event




HTML onclick Event


Dogodek ima v HTML-ju ključno vlogo.

Kliknite

funkcija oncf () (
document.getElementById ("vzorec"). notranHTML = "Pozdravljeni svet";
)

Izhod:

• onmousemove: sproži se, ko miško premaknemo nad sliko v kateri koli smeri.

Koda:


Event onmousemove demo



Ta dogodek se aktivira, ko kazalec povleče svojo smer.

Vzorčno besedilo

Izhod:

• Onmouseup: Ta dogodek daje obvestilo, ko uporabnik sprosti gumb na izhodu.

Koda:



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


kliknite pod objekt

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

Izhod:

• Onmouseover: Ko premikate kazalec miške na sliko, izvedite JavaScript

Koda:



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";
)



Izhod:

5. Povlecite atribute dogodkov

Ta aplikacija pomaga v oknu HTML, ko uporabnik povleče vhodni element. Spodaj so različni poslušalci dogodkov, ki se uporabljajo v HTML za shranjevanje vlečenih podatkov.

• Ondrag: Uporablja se, ko element povlečete s spletne strani.
• Ondragstart : Ta sproži, ko se uporabnik začne vleči iz polja za vnos. Spodnji primer prikazuje vlečenje območja z dvema ciljema.

Koda:



#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