HTML-händelseattribut - Topp 5 HTML-händelseattribut med exempel

Introduktion till HTML-händelseattribut

I den här artikeln ska vi diskutera i detalj om HTML-händelseattribut. Händelser är de åtgärder som utförs som ett resultat av användaråtgärder. Till exempel, när en användare trycker på en tangent på ett tangentbord för att läsa data, sägs det vara tangentbordshändelser. Dessa aktiviteter utförs när en användare tittar in på en webbplats och utför ett knappklick eller när en sida laddas på att trycka på uppdateringsknappen där webbläsaren manipulerar på sidorna, alla dessa åtgärder sägs vara en händelse. Här kommer vi att gå igenom en grundläggande förståelse av händelser och hur det fungerar i webbläsaren på användarens handlingar. Det finns en annan typ av händelser som inträffar i hela webbläsarfönstren som förklaras i följande avsnitt.

Topp 5 HTML-händelsesattribut

Det finns en annan variant av händelser tillgängliga i HTML. Och alla dessa händelser har ett litet kodblock namngivet som en händelsehanterare som avfyras när händelseaktionen utförs. Dessa är kopplade till HTML-elementen. Eventhanterarna eller evenemangets lyssnare spelar en viktig roll i HTML-evenemangets attribut. Låt oss se olika typer av händelsegenskaper som är deklarerade över hela världen och tillämpas på HTML-element, även deras arbete i detalj. Fyra primära händelseattribut används huvudsakligen. Dom är:

1. Fönsterhändelse
2. Forma händelser
3. Mushändelser
4. Tangentbordshändelser
5. Dra och släpp händelser

Vi ska beskriva alla dessa attribut en och en med ett exempel. Först kommer vi att gå med.

1. Fönsterhändelse

• onafterprintEvent: Det här attributet stöds av alla Html-taggar och fungerar när en sida började skriva ut och har ett enda värdeskript. Här kommer ett exempel på HTML-kod. Det här exemplet visar när en knapp trycks in, det skriver ut ett meddelande som skrivs ut i ett dialogmeddelande.

Koda:



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 fungerar innan du skriver ut. Händelsen avfyras efter utskriftsprocessen. Nedan är exemplskoden.

Koda:



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 för att skriva ut.

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

Produktion:

• onerror: Denna funktion utlöses när ett fel kastas medan inget element finns.

Koda:






Hej världen.

funktion myFun () (
alert ("problem med inläsning av bilder.");
)

Produktion:

• onload: Den här funktionen hjälper till att ladda ett objekt och fungerar bra för att se om en webbsida har laddats korrekt.

Koda:



onload event demo


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



Produktion:

• onresize: Denna händelse utlöses när webbläsarfönstret ändras och alla element kan utlösas under attributets storlek.

Koda:


onresize event

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

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


Produktion:

• onunload: Den här händelsen utlöses när ett webbsidafönster stängs eller när en användare lämnar webbsidan. Koden nedan lossar sidan när en användare lämnar och kastar ett varning tack för att du sökt. Den här händelsen fungerar ibland i alla webbläsare.

Koda:


Welcometo educba tutorial



Welcometo educba tutorial



Welcometo educba tutorial


Lämna sidan.

funktion onfunc () (
alert ("Tack för att du sökte!");
)

Produktion:

2. Forma händelser

Det fungerar med formkontroller. Följande är de attribut som uppstår när användaren interagerar med webbläsarna.

• onblur: Den här händelsen inträffar när användarens uppmärksamhet är borta från formfönstret. Följande exempel tar in små och små bokstäver och när du klickar på skicka-knappen förvandlas utgången till versaler.

Koda:



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: Den här händelsen inträffar när en användare ändrar det befintliga elementet i formen. Det händer när ett element tappar fokus.

Koda:



HTML onchange


select the dress color
pink
Yellow
White


Obs: Välj valfritt alternativ

Beskriv dig själv i korthet:

Skicka in

Produktion:

• onfocus: Detta attribut är aktiverat när användaren uppmärksammar elementet på en webbsida eller när inmatningen är inriktad. Exemplet nedan belyser när vi anger en inmatning i fältet.

Koda:





Den här händelsen får utlösas när ett element fokuseras.

Namn:
Plats:
funktion onfoc (a) (
document.getElementById (a) .style.background = "pink";
)

Produktion:

• oninput: Den här händelsen utlöses när ingången matas in i inmatningsfältet. Det aktiveras när värdet i textfältet ändras. Det återspeglar när värdet på elementet har ändrats.



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: Detta attribut kallar händelserna när texten som matats in i ingångstypen är ogiltig eller förblir tom. Detta händelseattribut måste fylla inmatningselementet.

Koda:



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



HTML används för att skapa en webbsida

Ange namnet:

Produktion:

• onreset: Det avfyras när ett formulär är vila. Följande exempel säger när du skickar in en knapp behandlas ett formulär och igen när du klickar för att återställa formuläret återställs.

Koda:



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 fungerar när en användare trycker på en enter-knapp.

Koda:





Skriv i fältet.
funktion myF () (
var k = document.getElementById ("värde1");
document.getElementById ("sample"). innerHTML = "sökelement är:" + k.value;
)

Produktion:

• onselect: Den utlöses när en text har valts i en inmatningsruta. Det kastar en dialogruta som skriver ut ett varningsmeddelande.

Koda:



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: Syftet med denna händelse är att utföra åtgärden som utförs medan du trycker på skicka-knappen.

Koda:



Onsubmit Example

Enter name:
Email :


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



Produktion:

3. Key Board Attribut

• OnKeyDown: Det utlöses när en användare trycker på en pil ned-knapp.

Koda:





Exempel för Onkeydown.

funktion mykedwn () (
varning ("knapptryckning är aktiverad");
)

Produktion:

• OnKeyPress: Den här händelsen aktiveras när användaren trycker på valfri tangent på tangentbordet. Obs! Vissa webbläsare stöder inte att trycka på någon knapp.

Koda:





Detta exempel visar när en användartyp i textområdet utlöser en händelse

>

Produktion:

• OnKeyUp: Detta attribut aktiveras när en användare släpper en markör från textfältet. Nedan kommer demonstrationen.

Koda:





Detta exempel omvandlar karaktären till små bokstäver.

Fyll i namnet:
funktion mykey () (
var g = document.getElementById ("jjj");
g.value = g.value.toLowerCase ();
)

Produktion:

4. Attribut för mushändelse

Denna åtgärd utlöser en mushändelse när en mus trycks antingen från en dator eller externa enheter som en smartphone eller surfplatta. Några av mushändelserna ges nedan:

• onclick: Det utlöses när en användare trycker på knappen över musen. Ett inmatningsexempel ges nedan för att visa händelsen medan du klickar på musen.

Koda:



HTML onclick Event




HTML onclick Event




HTML onclick Event


Event spelar en viktig roll i HTML.

Klick

funktion oncf () (
document.getElementById ("sample"). innerHTML = "Hej världen";
)

Produktion:

• onmousemove: Den avfyras när en mus flyttas över en bild i vilken riktning som helst.

Koda:


Event onmousemove demo



Den här händelsen aktiveras när pekaren drar sin riktning.

Exempeltext

Produktion:

• Onmouseup: Den här händelsen ger ett meddelande när en användare släpper en knapp på en utgång.

Koda:



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


klicka nedanför objektet

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

Produktion:

• Onmouseover: Kör en JavaScript när du flyttar muspekaren över en bild

Koda:



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. Dra händelsesattribut

Den här applikationen hjälper till i HTML-fönstret när användaren drar in elementet. Nedan visas de olika händelselister som används i HTML för att lagra dragen data.

• Ondrag: Detta används när ett element dras från webbsidan.
• Ondragstart : Detta avfyras när användaren börjar dra från inmatningsfältet. Exemplet nedan visar hur du drar två-målområdet.

Koda:



#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