Atribúty udalosti HTML Top 5 atribútov udalostí HTML s príkladmi

Úvod do atribútov udalostí HTML

V tomto článku budeme podrobne diskutovať o atribútoch udalostí HTML. Udalosti sú akcie, ktoré sa vykonávajú v dôsledku akcie používateľa. Napríklad, keď používateľ stlačí kláves na klávesnici, aby prečítal údaje, hovorí sa o udalostiach na klávesnici. Tieto činnosti sa vykonávajú, keď sa používateľ pozrie na webovú stránku a vykoná kliknutie na tlačidlo alebo ak sa stránka načíta po stlačení tlačidla obnovenia, kde prehliadač na stránkach manipuluje, všetky tieto akcie sa označujú ako udalosť. Tu prejdeme základné znalosti o udalostiach a o tom, ako to funguje v prehliadači pri používateľských činnostiach. Vo všetkých oknách prehliadača sa vyskytuje iný typ udalostí, ktoré sú vysvetlené v nasledujúcich častiach.

Top 5 atribútov udalostí HTML

V HTML je k dispozícii iný variant udalostí. A všetky tieto udalosti majú malý blok kódu pomenovaný ako obsluha udalostí, ktorý sa spustí pri vykonávaní akcie. Sú pripojené k prvkom HTML. Obslužné programy udalostí alebo poslucháči udalostí hrajú dôležitú úlohu v atribútoch udalosti HTML. Pozrime sa na rôzne typy atribútov udalostí, ktoré sú globálne deklarované a aplikované na prvky HTML, a tiež na ich podrobnú prácu. Hlavne sa používajú štyri atribúty primárnych udalostí. Oni sú:

1. Okno Udalosť
2. Udalosti formulára
3. Udalosti myši
4. Udalosti klávesnice
5. Drag and drop Events

Všetky tieto atribúty opíšeme jeden po druhom príkladom. Najprv pôjdeme.

1. Okno Udalosť

• onafterprintEvent: Tento atribút je podporovaný všetkými značkami Html a funguje, keď sa stránka začala tlačiť a má skript s jednou hodnotou. Tu je príklad HTML kódu. Tento príklad ukazuje, že po stlačení tlačidla sa vytlačí správa vytlačená v dialógovom okne.

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



Výkon:

• onbeforeprint: Funguje to pred tlačou. Udalosť sa spustí po procese tlače. Nižšie je uvedený príklad kódu.

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


spustiť tlač.

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

Výkon:

• onerror: Táto funkcia sa aktivuje, keď sa vyvolá chyba, zatiaľ čo neexistuje žiadny prvok.

kód:






ahoj svet.

function myFun () (
výstraha („problém s načítaním obrázka“);
)

Výkon:

• onload: Táto funkcia pomáha pri načítaní objektu a dobre funguje, aby sa zistilo, či je webová stránka správne načítaná.

kód:



onload event demo


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



Výkon:

• onresize: Táto udalosť sa spustí, keď sa zmení veľkosť okna prehliadača a každý atribút sa dá spustiť pod atribútom resize.

kód:


onresize event

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

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


Výkon:

• onunload: Táto udalosť sa spustí, keď sa zatvorí okno webovej stránky alebo keď používateľ opustí webovú stránku. Nižšie uvedený kód uvoľní stránku, keď používateľ opustí stránku a upozorní vás vďaka vyhľadávaniu. Táto udalosť niekedy funguje vo všetkých prehľadávačoch.

kód:


Welcometo educba tutorial



Welcometo educba tutorial



Welcometo educba tutorial


Opustiť stránku.

function onfunc () (
výstraha („Ďakujem za hľadanie!“);
)

Výkon:

2. Formálne udalosti

Pracuje s formulárom Controls. Nasledujú atribúty, ktoré sa vyskytujú pri interakcii používateľa s prehliadačmi.

• onblur: Táto udalosť nastane, keď je pozornosť používateľa mimo okna formulára. Nasledujúci príklad berie vstup v malom písmene a po kliknutí na tlačidlo odoslania zmení výstup na veľké písmená.

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



Výkon:

• onchange: Táto udalosť nastane, keď užívateľ zmení existujúci prvok vo formulári. Stáva sa to, keď prvok stratí zameranie.

kód:



HTML onchange


select the dress color
pink
Yellow
White


Poznámka: Vyberte ľubovoľnú možnosť

V krátkosti opíšte:

Predložiť

Výkon:

• onfocus: Tento atribút je povolený, keď používateľ upozorní na prvok na webovej stránke alebo keď je zameraný vstup. Nižšie uvedený príklad sa zvýrazní, keď do poľa zadáme vstup.

kód:





Táto udalosť sa spustí, keď je prvok zameraný.

Názov:
miesto:
funkcia onfoc (a) (
document.getElementById (a) .style.background = "pink";
)

Výkon:

• oninput: Táto udalosť sa spustí po zadaní vstupu do vstupného poľa. Aktivuje sa pri zmene hodnoty v textovom poli. Odráža to, keď sa zmení hodnota prvku.



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ýkon:

• oninvalid: Tento atribút volá udalosti, keď je text zadaný v type vstupu neplatný alebo zostane prázdny. Tento atribút udalosti musí vyplniť vstupný prvok.

kód:



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



HTML sa používa na vytvorenie webovej stránky

Zadajte meno:

Výkon:

• onreset: Spustí sa, keď je formulár v pokoji. Nasledujúci príklad hovorí, že keď odošlete tlačidlo, formulár sa spracuje a znova, keď kliknete na obnovenie, formulár sa obnovuje.

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



Výkon:

• onsearch: Funguje to, keď používateľ stlačí tlačidlo Enter.

kód:





Napíšte do poľa.
function myF () (
var k = document.getElementById ("value1");
document.getElementById ("sample"). innerHTML = "hľadaný prvok je:" + k.value;
)

Výkon:

• onselect: Spustí sa, keď je vo vstupnom poli vybraný text. Vyvolá dialógové okno s tlačou výstražnej správy.

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:



Výkon:

• onsubmit: Účelom tejto udalosti je vykonať akciu vykonanú pri stlačení tlačidla Odoslať.

kód:



Onsubmit Example

Enter name:
Email :


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



Výkon:

3. Kľúčové atribúty rady

• OnKeyDown: Spustí sa, keď používateľ stlačí šípku nadol.

kód:





Príklad pre Onkeydown.

function mykedwn () (
výstraha („stlačenie tlačidla je aktivované“);
)

Výkon:

• OnKeyPress: Táto udalosť sa spustí, keď používateľ stlačí ľubovoľnú klávesu na klávesnici. Poznámka: Niektoré prehliadače nepodporujú stlačenie žiadnej klávesy.

kód:





Tento príklad ukazuje, kedy používateľ zadá textovú oblasť, ktorá spustí udalosť

>

Výkon:

• OnKeyUp: Tento atribút sa spustí, keď používateľ uvoľní kurzor z textového poľa. Nasleduje ukážka.

kód:





Tento príklad transformuje znak na malé písmená.

Vyplňte meno:
function mykey () (
var g = document.getElementById ("jjj");
g.value = g.value.toLowerCase ();
)

Výkon:

4. Atribúty udalosti myši

Táto akcia spustí udalosť myši, keď je myš stlačená z počítača alebo z akýchkoľvek externých zariadení, ako sú smartfóny alebo tablety. Niektoré z udalostí myši sú uvedené nižšie:

• onclick: Spustí sa, keď používateľ stlačí tlačidlo nad myšou. Nižšie je uvedený príklad vstupu, ktorý ukazuje udalosť pri kliknutí myšou.

kód:



HTML onclick Event




HTML onclick Event




HTML onclick Event


Udalosť hrá dôležitú úlohu v HTML.

cvaknutie

function oncf () (
document.getElementById ("sample"). internalHTML = "Hello World";
)

Výkon:

• onmousemove: Spustí sa, keď sa myš pohne po obrázku v ľubovoľnom smere.

kód:


Event onmousemove demo



Táto udalosť je aktivovaná, keď ukazovateľ smeruje smerom.

Vzorový text

Výkon:

• Onmouseup: Táto udalosť dáva upozornenie, keď používateľ uvoľní tlačidlo na výstupe.

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


kliknite pod objekt

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

Výkon:

• Onmouseover: Spustenie JavaScriptu, keď pohnete kurzorom myši na obrázok

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



Výkon:

5. Potiahnite atribúty udalosti

Táto aplikácia pomáha v okne HTML, keď používateľ vtiahne vstupný prvok. Nižšie sú uvedené rôzne posluchače udalostí používané v HTML na ukladanie pretiahnutých údajov.

• Ondrag: Používa sa, keď je prvok ťahaný z webovej stránky.
• Ondragstart : Toto sa spustí, keď používateľ začne ťahať zo vstupného poľa. Nižšie uvedený príklad ukazuje pretiahnutie oblasti s dvoma cieľmi.

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