Atributi HTML događaja - Top 5 atributa HTML događaja s primjerima

• Uvod u atribute HTML događaja
• 

Windows onafterprint Event

Windows onafterprint Event
This attribute works in IE and Mozilla

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


• 

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

Attribute Demo

• 
Welcometo educba tutorial

• 

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


• 

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


• 

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

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

EDUCBA Online tutorial
Text Box:


• 

HTML onclick Event

• 

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

• 

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


• 

#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 dropdemo
drop the box.
ondragstart = "return dStart(e)">
Drag it
ondrop="drop(event)"
ondragover="allowDrop(event)">
welcome
dropzone



Uvod u atribute HTML događaja

U ovom ćemo članku detaljno razgovarati o atributima HTML događaja. Događaji su radnje koje se izvode kao rezultat akcije korisnika. Na primjer, kada korisnik pritisne tipku na tipkovnici za čitanje podataka, tada se navodi da su to događaji na tipkovnici. Te se aktivnosti obavljaju kada korisnik pogleda na web mjesto i izvrši klik na gumb ili kad se stranica učita pritiskom na gumb za osvježavanje gdje preglednik vrši manipulacije na stranicama, a sve ove radnje kažu da su događaj. Ovdje ćemo proći kroz osnovno razumijevanje događaja i kako to djeluje u pregledniku na korisnikovim radnjama. Postoji različita vrsta događaja koji se događaju u čitavim prozorima preglednika, što je objašnjeno u sljedećim odjeljcima.

Top 5 atributa HTML događaja

U HTML-u je dostupna drugačija varijanta događaja. I svi ti događaji imaju mali blok koda nazvan kao alat za obradu događaja koji se aktivira kada se izvrši radnja događaja. Priloženi su HTML elementima. Voditelji događaja ili slušatelji događaja igraju važnu ulogu u atributima HTML događaja. Pogledajmo različite vrste atributa događaja koji su globalno deklarirani i primijenjeni na HTML elemente također detaljno rade. Četiri su atributa primarnog događaja uglavnom korištena. Oni su:

1. Događaj prozora
2. Događaji oblika
3. Događaji s mišem
4. Događaji na tipkovnici
5. Povucite i ispustite Događaji

Opisat ćemo sve ove osobine jedan po jedan s primjerom. Prvo ćemo krenuti.

1. Prozor događaja

• onafterprintEvent: Ovaj atribut podržavaju sve Html oznake i djeluje kada je stranica započela ispis i ima skriptu s jednom vrijednošću. Evo primjera HTML koda. Ovaj primjer pokazuje kada se pritisne gumb, ona ispisuje poruku koja se ispisuje u dijaloškoj poruci.

Kodirati:



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



Izlaz:

• onbeforeprint: Radi prije ispisa. Događaj se otpušta nakon procesa tiskanja. Ispod je kôd primjera.

Kodirati:



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


okidač za ispis.

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

Izlaz:

• onerror: Ova se funkcija pokreće kada se pogreška baci, a da ne postoji nijedan element.

Kodirati:






Pozdrav svijete.

funkcija myFun () (
upozorenje ("problem s učitavanjem slike.");
)

Izlaz:

• onload: Ova funkcija pomaže pri učitavanju objekta i dobro radi je li web stranica ispravno učitana.

Kodirati:



onload event demo


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



Izlaz:

• onresize: ovaj se događaj pokreće kada se promijeni veličina prozora preglednika i bilo koji element može pokrenuti pod atributom veličine.

Kodirati:


onresize event

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

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


Izlaz:

• onunload: Ovaj se događaj pokreće kada je prozor web stranice zatvoren ili kada korisnik napusti web stranicu. Kôd u nastavku istovara stranicu kada korisnik napusti i pošalje upozorenje zahvaljujući pretraživanju. Ovaj se događaj ponekad događa u svim preglednicima.

Kodirati:


Welcometo educba tutorial



Welcometo educba tutorial



Welcometo educba tutorial


Napustite stranicu.

funkcija onfunc () (
upozorenje ("Hvala što tražite!");
)

Izlaz:

2. Oblikujte događaje

Radi s kontrolama obrasca. Slijede atributi koji nastaju kada korisnik komunicira s preglednicima.

• onblur: Ovaj se događaj događa kada je pažnja korisnika udaljena od prozora forme. Sljedeći primjer uzima unos malih slova i kada se klikne gumb za slanje pretvara izlaz u gornji slučaj.

Kodirati:



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



Izlaz:

• onchange: Ovaj se događaj događa kada korisnik promijeni postojeći element u obrascu. To se događa kada element izgubi fokus.

Kodirati:



HTML onchange


select the dress color
pink
Yellow
White


Napomena: odaberite bilo koju opciju

Opišite se ukratko:

podnijeti

Izlaz:

• orijentacija: ovaj atribut omogućen je kada korisnik posveti pažnju elementu web stranice ili kada je fokusiran unos. Primjer u nastavku ističe se kada unesemo unos u polje.

Kodirati:





Ovaj se događaj pokreće kad se element fokusira.

Ime:
Mjesto:
funkcija onfoc (a) (
document.getElementById (a) .style.background = "ružičasta";
)

Izlaz:

• oninput: ovaj se događaj pokreće kad se unese unos u polje za unos. Aktivira se kada se vrijednost u tekstnom polju promijeni. Odražava jednom kada se promijeni vrijednost elementa.



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



Izlaz:

• oninvalid: Ovaj atribut poziva događaje kada je tekst unesen u vrstu unosa nevažeći ili ostaje prazan. Ovaj atribut događaja mora ispuniti ulazni element.

Kodirati:



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



HTML se koristi za izradu web stranice

Unesite ime:

Izlaz:

• onreset: Pokreće se kad je obrazac mirovan . Sljedeći primjer kaže da kada pošaljete gumb obrazac se obrađuje i kad kliknete za resetiranje obrasca se vraća.

Kodirati:



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



Izlaz:

• onsearch: Radi kada korisnik pritisne tipku za unos.

Kodirati:





Pišite u polju.
funkcija myF () (
var k = document.getElementById ("vrijednost1");
document.getElementById ("uzorak"). innerHTML = "element pretraživanja je:" + k.value;
)

Izlaz:

• onselect: aktivira se kad je u polju za unos odabran tekst. Baca se dijaloški okvir za ispis poruke upozorenja.

Kodirati:



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:



Izlaz:

• onsubmit: Svrha ovog događaja je izvršiti izvršenu radnju dok pritisnete gumb za slanje.

Kodirati:



Onsubmit Example

Enter name:
Email :


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



Izlaz:

3. Atributi ključnih ploča

• OnKeyDown: Aktivira se kada korisnik pritisne tipku sa strelicom prema dolje.

Kodirati:





Primjer za Onkeydown.

funkcija mykedwn () (
upozorenje ("pritiskanje tipke je aktivirano");
)

Izlaz:

• OnKeyPress: ovaj se događaj pokreće kada korisnik pritisne bilo koju tipku na tipkovnici. Napomena: neki preglednik ne podržava pritiskanje nijedne tipke.

Kodirati:





Ovaj primjer pokazuje kada vrsta korisnika u području teksta aktivira događaj

>

Izlaz:

• OnKeyUp: Ovaj se atribut aktivira kada korisnik pusti pokazivač iz tekstnog polja. Slijedi demonstracija.

Kodirati:





Ovaj primjer transformira lik u malim slovima.

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

Izlaz:

4. Atributi miša događaja

Ova radnja pokreće događaj miša kada se miš pritisne ili s računala ili bilo kojeg vanjskog uređaja poput pametnog telefona ili tableta. Neki od događaja s mišem navedeni su u nastavku:

• onclick: aktivira se kada korisnik pritisne gumb preko miša. Dolje je naveden primjer unosa za prikaz događaja dok se klikne mišem.

Kodirati:



HTML onclick Event




HTML onclick Event




HTML onclick Event


Događaj igra vitalnu ulogu u HTML-u.

Klik

funkcija oncf () (
document.getElementById ("uzorak"). innerHTML = "Pozdrav svijetu";
)

Izlaz:

• onmousemove: aktivira se kad miš pređe preko slike u bilo kojem smjeru.

Kodirati:


Event onmousemove demo



Ovaj se događaj aktivira kada pokazivač povuče svoj smjer.

Uzorak teksta

Izlaz:

• Onmouseup: ovaj događaj daje obavijest kada korisnik otpusti gumb na izlazu.

Kodirati:



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 ispod objekta

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

Izlaz:

• Onmouseover: izvršite JavaScript kada pomičete pokazivač miša preko slike

Kodirati:



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



Izlaz:

5. Povucite atribute događaja

Ova aplikacija pomaže u HTML prozoru kada korisnik povuče ulazni element. Ispod se nalaze različiti slušatelji događaja koji se u HTML-u koriste za spremanje povučenih podataka.

• Ondrag: koristi se kada se element povlači s web stranice.
• Ondragstart : aktivira se kad korisnik počne povlačiti iz polja za unos. Donji primjer pokazuje potezanje dvociljnog područja.

Kodirati:



#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