HTML-hendelsesattributter - Topp 5 HTML-attributter med eksempler

Introduksjon til HTML-hendelsesattributter

I denne artikkelen skal vi diskutere i detalj om HTML-hendelsesattributter. Hendelser er handlingene som utføres som et resultat av brukerhandling. For eksempel, når en bruker trykker på en tast på et tastatur for å lese dataene, sies det å være tastaturhendelser. Disse aktivitetene gjøres når en bruker ser på et nettsted og utfører et knappeklikk, eller når en side lastes på ved å trykke på oppdateringsknappen der nettleseren manipulerer på sidene, alle disse handlingene sies å være en hendelse. Her vil vi gå gjennom en grunnleggende forståelse av hendelser og hvordan det fungerer i nettleseren på brukerhandlingene. Det er en annen type hendelser som oppstår i hele nettleservinduene som er forklart i de følgende seksjonene.

Topp 5 HTML-attributter

Det er en annen variant av hendelser tilgjengelig i HTML. Og alle disse hendelsene har en liten kode med navn som en hendelseshåndterer som avfyres når hendelseshandlingen utføres. Disse er knyttet til HTML-elementene. Arrangementsbehandlerne eller lytterne til hendelser spiller en viktig rolle i HTML-hendelsesattributtene. La oss se forskjellige typer hendelsesattributter som er deklarert over hele verden og brukes på HTML-elementer, også deres arbeider i detalj. Fire hovedbegivenhetsattributter brukes hovedsakelig. De er:

1. Vinduevent
2. Form hendelser
3. Mushendelser
4. Tastaturhendelser
5. Dra og slipp hendelser

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

1. Window-hendelse

• onafterprintEvent: Dette attributtet støttes av alle HTML-kodene og fungerer når en side begynte å skrive ut og har et enkeltverdiscript. Her kommer et eksempel på HTML-kode. Dette eksemplet viser når du trykker på en knapp, den skriver ut en melding som skrives ut i en dialogmelding.

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



Produksjon:

• onbeforeprint: Det fungerer før du skriver ut. Arrangementet blir avfyrt etter utskriftsprosessen. Nedenfor er eksempelkoden.

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 for å skrive ut.

funksjon få () (
document.body.style.background = "# 00BFFF";
)

Produksjon:

• onerror: Denne funksjonen utløses når en feil blir kastet mens ingen elementer eksisterer.

Kode:






Hei Verden.

funksjon myFun () (
alarm ("problem med lasting av bilder.");
)

Produksjon:

• onload: Denne funksjonen hjelper deg med å laste inn et objekt og fungerer bra for å se om en webside er riktig lastet.

Kode:



onload event demo


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



Produksjon:

• onresize: Denne hendelsen utløses når nettleservinduet endres, og ethvert element kan utløses under størrelsesattributtet.

Kode:


onresize event

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

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


Produksjon:

• onunload: Denne hendelsen utløses når et webside-vindu lukkes eller når en bruker forlater nettsiden. Koden nedenfor lader siden når en bruker forlater og kaster et varsel takk for at du har søkt. Denne hendelsen fungerer noen ganger i alle nettlesere.

Kode:


Welcometo educba tutorial



Welcometo educba tutorial



Welcometo educba tutorial


Forlat siden.

funksjon onfunc () (
alarm ("Takk for at du søkte!");
)

Produksjon:

2. Form hendelser

Det fungerer med skjemakontroller. Følgende er attributtene som oppstår når brukeren samhandler med nettleserne.

• onblur: Denne hendelsen oppstår når brukerens oppmerksomhet er borte fra skjemavinduet. Følgende eksempel tar innspill med små bokstaver, og når du sender inn knappen, blir det output til store bokstaver.

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



Produksjon:

• onchange: Denne hendelsen oppstår når en bruker endrer det eksisterende elementet i skjemaet. Det skjer når et element mister fokus.

Kode:



HTML onchange


select the dress color
pink
Yellow
White


Merk: Velg hvilket som helst alternativ

Beskriv deg selv kort:

Sende inn

Produksjon:

• onfocus: Dette attributtet er aktivert når brukeren gir oppmerksomhet til elementet på en webside eller når input er fokusert. Eksemplet nedenfor belyser når vi legger inn et innspill i feltet.

Kode:





Denne hendelsen blir utløst når et element er fokusert.

Navn:
Plassering:
funksjon onfoc (a) (
document.getElementById (a) .style.background = "rosa";
)

Produksjon:

• oninput: Denne hendelsen utløses når input blir lagt inn i inputfeltet. Den blir aktivert når verdien i tekstfeltet endres. Det gjenspeiler når verdien til elementet er endret.



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



Produksjon:

• oninvalid: Dette attributtet kaller hendelsene når teksten som er lagt inn i inndatatypen er ugyldig eller forblir tom. Denne hendelsesattributtet må fylle inngangselementet.

Kode:



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



HTML brukes til å lage en webside

Skriv inn navnet:

Produksjon:

• onreset: Det avfyres når et skjema er i ro. Følgende eksempel sier at når du sender inn knappen blir et skjema behandlet og igjen når du klikker for å tilbakestille skjemaet tilbakestilles.

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



Produksjon:

• onsearch: Det fungerer når en bruker trykker på en enter-knapp.

Kode:





Skriv i feltet.
funksjon myF () (
var k = document.getElementById ("verdi1");
document.getElementById ("sample"). innerHTML = "søkeelement er:" + k.value;
)

Produksjon:

• onselect: Den utløses når en tekst er valgt i en innmatingsboks. Den kaster en dialogboks som skriver ut en varselmelding.

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:



Produksjon:

• onsubmit: Hensikten med denne hendelsen er å utføre handlingen som er utført mens du trykker på send-knappen.

Kode:



Onsubmit Example

Enter name:
Email :


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



Produksjon:

3. Key Board Attributter

• OnKeyDown: Det utløses når en bruker trykker på en pil ned.

Kode:





Eksempel for Onkeydown.

funksjon mykedwn () (
alarm ("tastetrykk er aktivert");
)

Produksjon:

• OnKeyPress: Denne hendelsen blir utløst når brukeren trykker på en hvilken som helst tast på tastaturet. Merk: noen nettlesere støtter ikke å trykke på noen tast.

Kode:





Dette eksemplet viser når en brukertype i tekstområdet utløser en hendelse

>

Produksjon:

• OnKeyUp: Dette attributtet blir utløst når en bruker slipper en markør fra tekstfeltet. Nedenfor kommer demonstrasjonen.

Kode:





Dette eksemplet forvandler tegnet til små bokstaver.

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

Produksjon:

4. Mouse-hendelsesattributter

Denne handlingen utløser en musebegivenhet når en mus trykkes enten fra en datamaskin eller andre eksterne enheter som en smarttelefon eller nettbrett. Noen av musebegivenhetene er gitt nedenfor:

• onclick: Det utløses når en bruker trykker på knappen over musen. Nedenfor gis et innspilleksempel for å vise hendelsen mens du klikker på musen.

Kode:



HTML onclick Event




HTML onclick Event




HTML onclick Event


Arrangement spiller en viktig rolle i HTML.

Klikk

funksjon oncf () (
document.getElementById ("sample"). innerHTML = "Hello World";
)

Produksjon:

• onmousemove: Den avfyres når en mus beveges over et bilde i hvilken som helst retning.

Kode:


Event onmousemove demo



Denne hendelsen aktiveres når pekeren drar retningen.

Eksempeltekst

Produksjon:

• Onmouseup: Denne hendelsen gir et varsel når en bruker slipper en knapp på en utgang.

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


Klikk under objektet

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

Produksjon:

• Onmouseover: Utfør en JavaScript når du flytter musepekeren over et bilde

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



Produksjon:

5. Dra hendelsesattributter

Denne applikasjonen hjelper i HTML-vinduet når brukeren trekker inn elementet. Nedenfor er de forskjellige hendelseslytterne som brukes i HTML for å lagre dratt data.

• Ondrag: Dette brukes når et element blir dratt fra websiden.
• Ondragstart : Dette utløses når brukeren begynner å dra fra inputfeltet. Eksemplet nedenfor viser hvordan du drar det to-målte området.

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