Kenmerken HTML-gebeurtenis - Top 5 HTML-gebeurtenisattributen met voorbeelden

Inleiding tot HTML-gebeurtenisattributen

In dit artikel zullen we in detail bespreken over HTML-gebeurtenisattributen. Gebeurtenissen zijn de acties die worden uitgevoerd als gevolg van gebruikersacties. Wanneer een gebruiker bijvoorbeeld op een toets op een toetsenbord drukt om de gegevens te lezen, worden er toetsenbordgebeurtenissen genoemd. Deze activiteiten worden uitgevoerd wanneer een gebruiker een website bekijkt en op een knop klikt of wanneer een pagina wordt geladen met het indrukken van de knop Vernieuwen waarbij de browser de pagina's manipuleert, al deze acties worden als een gebeurtenis beschouwd. Hier zullen we een basiskennis van gebeurtenissen doornemen en hoe het in de browser op de gebruikersacties werkt. Er zijn verschillende soorten gebeurtenissen die plaatsvinden in de volledige browservensters die in de volgende secties worden uitgelegd.

Top 5 HTML-gebeurtenisattributen

Er is een andere variant van evenementen beschikbaar in de HTML. En al deze gebeurtenissen hebben een klein codeblok dat wordt genoemd als een gebeurtenishandler die wordt geactiveerd wanneer de gebeurtenisactie wordt uitgevoerd. Deze zijn gekoppeld aan de HTML-elementen. De gebeurtenishandlers of gebeurtenisluisteraars spelen een belangrijke rol in de HTML-gebeurteniskenmerken. Laten we verschillende soorten gebeurtenisattributen die globaal zijn gedeclareerd en toegepast op HTML-elementen, ook in detail bekijken. Vier primaire gebeurtenisattributen worden veel gebruikt. Zij zijn:

1. Window-evenement
2. Vorm evenementen
3. Muis evenementen
4. Toetsenbordgebeurtenissen
5. Evenementen slepen en neerzetten

We zullen al deze attributen één voor één beschrijven met een voorbeeld. Eerst gaan we mee.

1. Window-gebeurtenis

• onafterprintEvent: Dit kenmerk wordt ondersteund door alle HTML-tags en werkt wanneer een pagina is begonnen met afdrukken en heeft een script met één waarde. Hier komt een voorbeeld van HTML-code. In dit voorbeeld wordt getoond dat wanneer op een knop wordt gedrukt, een bericht wordt afgedrukt dat in een dialoogvenster wordt afgedrukt.

Code:



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



Output:

• onbeforeprint: het werkt voor het afdrukken. Het evenement wordt afgevuurd na het afdrukproces. Hieronder staat de voorbeeldcode.

Code:



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 om af te drukken.

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

Output:

• onerror: deze functie wordt geactiveerd wanneer een fout wordt gegenereerd terwijl er geen element bestaat.

Code:






Hallo Wereld.

function myFun () (
alert ("probleem met het laden van afbeeldingen.");
)

Output:

• onload: deze functie helpt bij het laden van een object en werkt goed om te zien of een webpagina correct is geladen.

Code:



onload event demo


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



Output:

• onresize: deze gebeurtenis wordt geactiveerd wanneer het formaat van het browservenster wordt gewijzigd en elk element kan worden geactiveerd onder het kenmerk resize.

Code:


onresize event

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

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


Output:

• onunload: deze gebeurtenis wordt geactiveerd wanneer een webpaginavenster wordt gesloten of wanneer een gebruiker de webpagina verlaat. De onderstaande code verwijdert de pagina wanneer een gebruiker vertrekt en geeft een waarschuwing, bedankt voor het zoeken. Deze gebeurtenis werkt soms in alle browsers.

Code:


Welcometo educba tutorial



Welcometo educba tutorial



Welcometo educba tutorial


Verlaat de pagina.

function onfunc () (
alert ("Bedankt voor het zoeken!");
)

Output:

2. Vorm evenementen

Het werkt met formulierbesturing. Hierna volgen de kenmerken die optreden wanneer de gebruiker interactie heeft met de browsers.

• onblur: deze gebeurtenis vindt plaats wanneer de aandacht van de gebruiker weg is van het formuliervenster. In het volgende voorbeeld wordt invoer in kleine letters gebruikt en wanneer op de verzendknop wordt geklikt, wordt de uitvoer omgezet in hoofdletters.

Code:



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



Output:

• onchange: deze gebeurtenis vindt plaats wanneer een gebruiker het bestaande element in het formulier wijzigt. Het gebeurt wanneer een element de focus verliest.

Code:



HTML onchange


select the dress color
pink
Yellow
White


Opmerking: selecteer een optie

Beschrijf jezelf in het kort:

voorleggen

Output:

• onfocus: dit kenmerk wordt ingeschakeld wanneer de gebruiker aandacht besteedt aan het element op een webpagina of wanneer invoer is gericht. Het onderstaande voorbeeld wordt gemarkeerd wanneer we een invoer in het veld invoeren.

Code:





Deze gebeurtenis wordt geactiveerd wanneer een element is gericht.

Naam:
Plaats:
function onfoc (a) (
document.getElementById (a) .style.background = "pink";
)

Output:

• oninput: deze gebeurtenis wordt geactiveerd wanneer de invoer in het invoerveld wordt ingevoerd. Het is geactiveerd wanneer de waarde in het tekstveld is gewijzigd. Het weerspiegelt zodra de waarde van het element is gewijzigd.



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



Output:

• oninvalid: dit kenmerk roept de gebeurtenissen aan wanneer de tekst die in het invoertype is ingevoerd ongeldig is of leeg blijft. Dit gebeurteniskenmerk moet het invoerelement vullen.

Code:



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



HTML wordt gebruikt om een ​​webpagina te maken

Voer de naam in:

Output:

• onreset: Het wordt afgevuurd wanneer een formulier rust is. Het volgende voorbeeld zegt dat wanneer u de knop verzendt, een formulier wordt verwerkt en wanneer u klikt om het formulier opnieuw in te stellen, wordt het formulier opnieuw ingesteld.

Code:



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



Output:

• onsearch: het werkt wanneer een gebruiker op een enter-knop drukt.

Code:





Schrijf in het veld.
function myF () (
var k = document.getElementById ("value1");
document.getElementById ("sample"). innerHTML = "zoekelement is:" + k.value;
)

Output:

• onselect: het wordt geactiveerd wanneer een tekst is geselecteerd in een invoervak. Hiermee wordt een dialoogvenster geopend dat een waarschuwingsbericht afdrukt.

Code:



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:



Output:

• onsubmit: het doel van deze gebeurtenis is om de uitgevoerde actie uit te voeren terwijl u op de verzendknop drukt.

Code:



Onsubmit Example

Enter name:
Email :


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



Output:

3. Toetsenbordkenmerken

• OnKeyDown: het wordt geactiveerd wanneer een gebruiker op een pijl-omlaag drukt.

Code:





Voorbeeld voor Onkeydown.

function mykedwn () (
waarschuwing ("indrukken van toetsen is geactiveerd");
)

Output:

• OnKeyPress: deze gebeurtenis wordt geactiveerd wanneer de gebruiker op een willekeurige toets op het toetsenbord drukt. Opmerking: sommige browsers ondersteunen het indrukken van een toets niet.

Code:





Dit voorbeeld laat zien wanneer een gebruikerstype in het tekstgebied een gebeurtenis activeert

>

Output:

• OnKeyUp: dit kenmerk wordt geactiveerd wanneer een gebruiker een cursor uit het tekstveld loslaat. Hieronder volgt de demonstratie.

Code:





In dit voorbeeld wordt het teken in kleine letters omgezet.

Vul de naam in:
function mykey () (
var g = document.getElementById ("jjj");
g.value = g.value.toLowerCase ();
)

Output:

4. Attributen van muisgebeurtenissen

Deze actie activeert een muisgebeurtenis wanneer een muis wordt ingedrukt vanaf een computer of externe apparaten zoals een smartphone of tablet. Enkele muisgebeurtenissen worden hieronder gegeven:

• onclick: het wordt geactiveerd wanneer een gebruiker op de knop drukt met de muis. Hieronder wordt een invoervoorbeeld gegeven om de gebeurtenis te tonen terwijl u met de muis klikt.

Code:



HTML onclick Event




HTML onclick Event




HTML onclick Event


Evenement speelt een cruciale rol in HTML.

Klik

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

Output:

• onmousemove: het wordt geactiveerd wanneer een muis in een willekeurige richting over een afbeelding wordt bewogen.

Code:


Event onmousemove demo



Deze gebeurtenis wordt geactiveerd wanneer de aanwijzer zijn richting sleept.

Voorbeeldtekst

Output:

• Onmouseup: deze gebeurtenis geeft een melding wanneer een gebruiker een knop op een uitgang loslaat.

Code:



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 onder object

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

Output:

• Onmouseover: voer een JavaScript uit wanneer u de muisaanwijzer over een afbeelding beweegt

Code:



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



Output:

5. Sleep gebeurtenisattributen

Deze toepassing helpt in het HTML-venster wanneer de gebruiker het invoerelement sleept. Hieronder staan ​​de verschillende gebeurtenislisteners die in HTML worden gebruikt om gesleepte gegevens op te slaan.

• Ondrag: dit wordt gebruikt wanneer een element van de webpagina wordt gesleept.
• Ondragstart : dit wordt geactiveerd wanneer de gebruiker vanuit het invoerveld begint te slepen. Het onderstaande voorbeeld laat zien hoe u het gebied met twee doelen sleept.

Code:



#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