HTML-i sündmuse atribuudid - 5 parimat HTML-i sündmuse atribuuti koos näidetega

Sissejuhatus HTML-i sündmuste atribuutidesse

Selles artiklis käsitleme üksikasjalikult HTML-i sündmuste atribuute. Sündmused on toimingud, mis sooritatakse kasutaja toimingu tagajärjel. Näiteks kui kasutaja vajutab andmete lugemiseks klaviatuuri klahvi, siis öeldakse, et see on klaviatuuri sündmus. Need toimingud tehakse siis, kui kasutaja otsib mõnda veebisaiti ja teeb nupul klõpsu või kui leht laaditakse, kui vajutate värskendamisnuppu, kus brauser lehtedel manipuleerib, siis öeldakse, et kõik need toimingud on sündmused. Siit saame ülevaate põhiteadmistest sündmuste ja nende toimimise kohta brauseris kasutaja toimingute kohta. Terves brauseriaknas toimub erinevat tüüpi sündmusi, mida selgitatakse järgmistes osades.

5 parimat HTML-i sündmuse atribuuti

HTML-is on saadaval erinevad sündmuste variandid. Kõigil neil sündmustel on väike koodiplokk, mida nimetatakse sündmuste käitlejaks ja mis käivitatakse sündmuse toimingu tegemisel. Need on lisatud HTML-i elementidele. HTML-i sündmuse atribuutides mängivad olulist rolli sündmuste käitlejad või sündmuste kuulajad. Vaatame erinevat tüüpi sündmuste atribuute, mis on ülemaailmselt deklareeritud ja rakendatud HTML-elementidele, ning ka nende tööd üksikasjalikult. Peamiselt kasutatakse nelja peamist sündmuse atribuuti. Nemad on:

1. Aknasündmus
2. Vormisündmused
3. Hiireüritused
4. Klaviatuuriüritused
5. Sündmuste lohistamine

Kirjeldame kõiki neid atribuute ükshaaval näitega. Esiteks läheme koos.

1. Aknasündmus

• onafterprintEvent: seda atribuuti toetavad kõik HTML-sildid ja see töötab siis, kui leht hakkas printima ning sellel on ühe väärtuse skript. Siin on näide HTML-koodist. See näide näitab, kui nuppu vajutatakse, see prindib dialoogisõnumina trükitava teate.

Kood:



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



Väljund:

• onbeforeprint: see töötab enne printimist. Sündmus vallandatakse pärast printimisprotsessi. Allpool on näidiskood.

Kood:



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


päästik printimiseks.

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

Väljund:

• onerror: see funktsioon aktiveeritakse, kui tõrkeveal pole ühtegi elementi.

Kood:






Tere, Maailm.

funktsioon myFun () (
Alert ("probleem pildi laadimisega.");
)

Väljund:

• onload: see funktsioon aitab objekti laadimisel ja töötab hästi, et vaadata, kas veebileht on õigesti laaditud.

Kood:



onload event demo


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



Väljund:

• onresize: see sündmus käivitatakse brauseriakna suuruse muutmisel ja atribuudi suuruse all saab käivitada mis tahes elemendi.

Kood:


onresize event

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

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


Väljund:

• onunload: see sündmus käivitatakse siis, kui veebilehe aken on suletud või kui kasutaja lahkub veebilehelt. Allpool olev kood laadib lehe lehelt maha, kui kasutaja lahkub, ja annab tänu otsimise eest märguandele. See sündmus töötab mõnikord kõigis brauserites.

Kood:


Welcometo educba tutorial



Welcometo educba tutorial



Welcometo educba tutorial


Jätke leht.

funktsioon onfunc () (
märguanne ("Aitäh otsimise eest!");
)

Väljund:

2. Vormisündmused

See töötab vormi juhtelementidega. Järgmised atribuudid ilmnevad kasutaja brauseritega suheldes.

• onblur: see sündmus ilmneb siis, kui kasutaja tähelepanu on vormiaknast eemal. Järgnevas näites sisestatakse väiketähed ja kui nuppu Edasta klõpsatakse, muudab see väljundi suurtäheks.

Kood:



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



Väljund:

• muutmine: see sündmus ilmneb siis, kui kasutaja muudab vormi olemasolevat elementi. See juhtub siis, kui element kaotab fookuse.

Kood:



HTML onchange


select the dress color
pink
Yellow
White


Märkus. Valige suvand

Kirjeldage ennast lühidalt:

Esita

Väljund:

• onfookus: see atribuut on lubatud, kui kasutaja pöörab tähelepanu veebilehe elemendile või kui sisend on fokuseeritud. Allpool toodud näide on esile toodud siis, kui sisestame väljale sisendi.

Kood:





See sündmus käivitatakse, kui element on fookuses.

Nimi:
Asukoht:
funktsioon onfoc (a) (
document.getElementById (a) .style.background = "roosa";
)

Väljund:

• oninput: See sündmus käivitub, kui sisend sisestatakse sisendväljale. See aktiveeritakse, kui tekstivälja väärtust muudetakse. See kajastub, kui elemendi väärtus on muutunud.



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



Väljund:

• oninvalid: see atribuut kutsub sündmusi, kui sisenditüübi sisestatud tekst on vale või jääb tühjaks. See sündmuse atribuut peab täitma sisendielemendi.

Kood:



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



Veebilehe loomiseks kasutatakse HTML-i

Sisestage nimi:

Väljund:

• onreset: see vallandatakse, kui vorm puhkab. Järgnevas näites öeldakse, et kui nupule saadate, töödeldakse vormi ja uuesti, kui klõpsate vormi lähtestamisel, lähtestatakse vorm.

Kood:



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



Väljund:

• otsimine: see töötab siis, kui kasutaja vajutab sisestusnuppu.

Kood:





Kirjutage väljale.
funktsioon myF () (
var k = document.getElementById ("väärtus1");
document.getElementById ("proov"). innerHTML = "otsinguelement on:" + k.väärtus;
)

Väljund:

• onselect: see käivitatakse, kui sisestuskasti on valitud tekst. See viskab dialoogiboksi, kus prinditakse hoiatusteade.

Kood:



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:



Väljund:

• onsubmit: selle sündmuse eesmärk on toiming, mis teostatakse samal ajal, kui vajutate esitamise nuppu.

Kood:



Onsubmit Example

Enter name:
Email :


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



Väljund:

3. Võtmekogu atribuudid

• OnKeyDown: see käivitatakse, kui kasutaja vajutab nooleklahvi alla.

Kood:





Näide Onkeydowni kohta.

funktsioon mykedwn () (
märguanne ("klahvivajutus on aktiveeritud");
)

Väljund:

• OnKeyPress: see sündmus käivitatakse, kui kasutaja vajutab klaviatuuri suvalist klahvi. Märkus. Mõni brauser ei toeta ühegi klahvi vajutamist.

Kood:





See näide näitab, millal kasutaja tipib tekstiväljale sündmuse

>

Väljund:

• OnKeyUp: see atribuut käivitatakse, kui kasutaja vabastab kursori tekstiväljalt. Allpool on toodud demonstratsioon.

Kood:





See näide muudab tähemärgi väiketäheks.

Täitke nimi:
funktsioon mykey () (
var g = document.getElementById ("jjj");
g.value = g.value.toLowerCase ();
)

Väljund:

4. Hiire sündmuse atribuudid

See toiming käivitab hiire sündmuse, kui hiirt vajutatakse kas arvutist või muudest välistest seadmetest nagu nutitelefon või tahvelarvuti. Mõned hiire sündmused on toodud allpool:

• onklik: see aktiveeritakse, kui kasutaja vajutab nuppu hiire kohal. Allpool on toodud sisestusnäide sündmuse kuvamiseks hiireklõpsuga.

Kood:



HTML onclick Event




HTML onclick Event




HTML onclick Event


Sündmus mängib HTML-is olulist rolli.

Klõpsake nuppu

funktsioon oncf () (
document.getElementById ("proov"). innerHTML = "Tere maailm";
)

Väljund:

• onmousemove: see vallandatakse, kui hiirt liigutatakse pildi kohal igas suunas.

Kood:


Event onmousemove demo



See sündmus aktiveeritakse, kui kursor suunab oma suuna.

Näidistekst

Väljund:

• Onmouseup: see sündmus annab märku, kui kasutaja vabastab väljundi nupu.

Kood:



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


klõpsake objekti all

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

Väljund:

• Üleminek hiirekursorile: kui hiirekursor pildi kohal liigutatakse, käivitage JavaScripti

Kood:



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



Väljund:

5. Lohistage sündmuse atribuute

See rakendus aitab HTML-aknas, kui kasutaja lohistab sisendielemendi. Allpool on toodud erinevad sündmuste kuulajad, mida HTML-is lohistatud andmete salvestamiseks kasutatakse.

• Ondrag: Seda kasutatakse elemendi lohistamisel veebilehelt.
• Ondragstart : see käivitub, kui kasutaja hakkab sisendväljalt lohistama. Allpool toodud näide näitab kahe sihtmärgi piirkonna lohistamist.

Kood:



#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