HTML-hændelsesattributter - Top 5 HTML-attributter med eksempler

• Introduktion til HTML-hændelsesattributter
• 

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



Introduktion til HTML-hændelsesattributter

I denne artikel diskuterer vi detaljeret om HTML-hændelsesattributter. Begivenheder er de handlinger, der udføres som et resultat af brugerhandling. For eksempel, når en bruger trykker på en tast i et tastatur for at læse dataene, siges det at det er tastaturhændelser. Disse aktiviteter udføres, når en bruger kigger ind på et websted og udfører et knappeklik, eller når en side indlæses ved at trykke på opdateringsknappen, hvor browseren manipulerer på siderne, siges alle disse handlinger at være en begivenhed. Her vil vi gennemgå en grundlæggende forståelse af begivenheder og hvordan det fungerer i browseren på brugerhandlinger. Der er en anden type begivenheder, der forekommer i hele browservinduerne, som er forklaret i de følgende sektioner.

Top 5 HTML-hændelsesattributter

Der er en anden variant af begivenheder tilgængelige i HTML. Og alle disse begivenheder har en lille kodeblok kaldet en begivenhedshåndterer, der skyder, når begivenhedshandlingen udføres. Disse er knyttet til HTML-elementerne. Begivenhedshåndterere eller begivenhedslyttere spiller en vigtig rolle i HTML-begivenhedsattributterne. Lad os se forskellige typer begivenhedsattributter, der er deklareret overalt og anvendt på HTML-elementer, også deres arbejde i detaljer. Fire primære begivenhedsattributter bruges hovedsageligt. De er:

1. Vinduehændelse
2. Form begivenheder
3. Musbegivenheder
4. Tastaturbegivenheder
5. Træk og slip begivenheder

Vi skal beskrive alle disse attributter en efter en med et eksempel. Først vil vi gå med.

1. Vinduehændelse

• onafterprintEvent: Denne attribut understøttes af alle Html-tags og fungerer, når en side begyndte udskrivning og har et enkelt værdi-script. Her kommer et eksempel på HTML-kode. Dette eksempel viser, når der trykkes på en knap, det udskriver en meddelelse, der udskrives i en dialogbesked.

Kode:



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



Produktion:

• onbeforeprint: Det fungerer inden udskrivning. Begivenheden fyres op efter udskrivningsprocessen. Nedenfor er eksemplekoden.

Kode:



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 til udskrivning.

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

Produktion:

• onerror: Denne funktion udløses, når der kastes en fejl, mens der ikke findes noget element.

Kode:






Hej Verden.

funktion myFun () (
alarm ("problem med indlæsning af billeder.");
)

Produktion:

• onload: Denne funktion hjælper med at indlæse et objekt og fungerer godt til at se, om en webside er indlæst korrekt.

Kode:



onload event demo


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



Produktion:

• onresize: Denne begivenhed udløses, når browservinduet ændres til størrelse, og ethvert element kan udløses under attributten til størrelse.

Kode:


onresize event

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

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


Produktion:

• onunload: Denne begivenhed udløses, når et websidesvindue lukkes, eller når en bruger forlader websiden. Nedenstående kode fjerner siden, når en bruger forlader og kaster en advarsel tak for at have søgt. Denne begivenhed fungerer undertiden i alle browsere.

Kode:


Welcometo educba tutorial



Welcometo educba tutorial



Welcometo educba tutorial


Forlad siden.

funktion onfunc () (
alarm ("Tak for din søgning!");
)

Produktion:

2. Form begivenheder

Det fungerer med formkontroller. Følgende er de attributter, der opstår, når brugeren interagerer med browsere.

• onblur: Denne begivenhed opstår, når brugerens opmærksomhed er væk fra formvinduet . Følgende eksempel indtaster små bogstaver, og når der klikkes på indsenderknappen, bliver det output til store bogstaver.

Kode:



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



Produktion:

• onchange: Denne begivenhed opstår, når en bruger ændrer det eksisterende element i formen. Det sker, når et element mister fokus.

Kode:



HTML onchange


select the dress color
pink
Yellow
White


Bemærk: Vælg en vilkårlig mulighed

Beskriv dig selv kort:

Indsend

Produktion:

• onfocus: Denne attribut er aktiveret, når brugeren er opmærksom på elementet på en webside eller når input er fokuseret. Nedenstående eksempel fremhæver, når vi indtaster et input i feltet.

Kode:





Denne begivenhed bliver udløst, mens et element er fokuseret.

Navn:
Beliggenhed:
funktion onfoc (a) (
document.getElementById (a) .style.background = "pink";
)

Produktion:

• oninput: Denne begivenhed udløses, når inputen indtastes i inputfeltet. Det aktiveres, når værdien i tekstfeltet ændres. Det afspejler, når værdien af ​​elementet er ændret.



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



Produktion:

• oninvalid: Denne attribut kalder begivenhederne, når den indtastede tekst er ugyldig eller forbliver tom. Denne hændelsesattribut skal udfylde inputelementet.

Kode:



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



HTML bruges til at oprette en webside

Indtast navnet:

Produktion:

• onreset: Det affyres, når en formular er hvile. Følgende eksempel siger, når du indsender knappen, en formular behandles og igen, når du klikker for at nulstille formularen nulstilles.

Kode:



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



Produktion:

• onsearch: Det fungerer, når en bruger trykker på en enter-knap.

Kode:





Skriv i feltet.
funktion myF () (
var k = document.getElementById ("værdi1");
document.getElementById ("sample"). innerHTML = "Søgeelement er:" + k.value;
)

Produktion:

• onselect: Den udløses, når der er valgt en tekst i et inputfelt. Det kaster en dialogboks, der udskriver en alarmmeddelelse.

Kode:



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:



Produktion:

• onsubmit: Formålet med denne begivenhed er at udføre handlingen, der udføres, mens du trykker på knappen Send.

Kode:



Onsubmit Example

Enter name:
Email :


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



Produktion:

3. Key Board Attributter

• OnKeyDown: Det udløses, når en bruger trykker på en pil ned.

Kode:





Eksempel på Onkeydown.

funktion mykedwn () (
alarm ("tastetryk er aktiveret");
)

Produktion:

• OnKeyPress: Denne begivenhed bliver udløst, når brugeren trykker på en vilkårlig tast på tastaturet. Bemærk: nogle browsere understøtter ikke at trykke på nogen tast.

Kode:





Dette eksempel viser, når en brugertype i tekstområdet udløser en begivenhed

>

Produktion:

• OnKeyUp: Denne attribut bliver udløst, når en bruger frigiver en markør fra tekstfeltet. Nedenfor kommer demonstrationen.

Kode:





Dette eksempel omdanner tegnet til små bogstaver.

Udfyld navnet:
funktion mykey () (
var g = document.getElementById ("jjj");
g.value = g.value.toLowerCase ();
)

Produktion:

4. Attributter for musebegivenhed

Denne handling udløser en musebegivenhed, når der trykkes på en mus enten fra en computer eller eksterne enheder som en smartphone eller tablet. Nogle af musebegivenheder er givet nedenfor:

• onclick: Det udløses, når en bruger trykker på knappen over musen. Et inputeksempel er vist nedenfor for at vise begivenheden, mens du klikker på musen.

Kode:



HTML onclick Event




HTML onclick Event




HTML onclick Event


Begivenhed spiller en vigtig rolle i HTML.

Klik

funktion oncf () (
document.getElementById ("sample"). innerHTML = "Hej verden";
)

Produktion:

• onmousemove: Den affyres, når en mus flyttes over et billede i en hvilken som helst retning.

Kode:


Event onmousemove demo



Denne begivenhed aktiveres, når markøren trækker sin retning.

Eksempel tekst

Produktion:

• Onmouseup: Denne begivenhed giver en anmeldelse, når en bruger frigiver en knap på en output.

Kode:



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


Klik under objekt

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

Produktion:

• Onmouseover: Udfør en JavaScript, når du flytter musemarkøren over et billede

Kode:



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



Produktion:

5. Træk begivenhedsattributter

Denne applikation hjælper i HTML-vinduet, når brugeren trækker inputelementet. Nedenfor er de forskellige begivenhedslyttere, der bruges i HTML til at gemme trækkede data.

• Ondrag: Dette bruges, når et element trækkes fra websiden.
• Ondragstart : Dette udløses, når brugeren begynder at trække fra inputfeltet. Nedenstående eksempel viser, hvordan man trækker området med to mål.

Kode:



#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