HTML-tapahtumamääritteet - 5 suosituinta HTML-tapahtumamääritettä esimerkillä

Johdanto HTML-tapahtumamääritteisiin

Tässä artikkelissa käsittelemme yksityiskohtaisesti HTML-tapahtumamääritteitä. Tapahtumat ovat toimintoja, jotka suoritetaan käyttäjän toiminnan seurauksena. Esimerkiksi, kun käyttäjä painaa näppäintä näppäimistössä lukeaksesi tietoja, sen sanotaan olevan näppäimistötapahtumia. Nämä toiminnot tehdään, kun käyttäjä tutkii verkkosivustoa ja suorittaa painikkeen napsautuksen tai kun sivu latautuu painamalla päivityspainiketta, jossa selain manipuloi sivuja, kaikkien näiden toimien sanotaan olevan tapahtuma. Täällä käydään läpi ymmärrys tapahtumista ja siitä, kuinka se toimii selaimessa käyttäjän toimien suhteen. Kaikissa selainikkunoissa tapahtuu erityyppisiä tapahtumia, jotka selitetään seuraavissa kohdissa.

5 suosituinta HTML-tapahtumamääritettä

HTML-muodossa on saatavana erilainen tapa tapahtumia. Ja kaikilla näillä tapahtumilla on pieni koodilohko, jota kutsutaan tapahtumakäsittelijäksi, joka laukeaa, kun tapahtumatoiminto suoritetaan. Ne on liitetty HTML-elementteihin. Tapahtumien käsittelijöillä tai tapahtuman kuuntelijoilla on tärkeä rooli HTML-tapahtumamääritteissä. Katsotaanpa myös erityyppisiä tapahtumamääritteitä, jotka on globaalisti ilmoitettu ja joita sovelletaan HTML-elementteihin, sekä heidän työnsä yksityiskohtaisesti. Neljää päätapahtumattribuuttia käytetään pääasiassa. He ovat:

1. Ikkunatapahtuma
2. Lomaketapahtumat
3. Hiiretapahtumat
4. Näppäimistötapahtumat
5. Vedä ja pudota -tapahtumat

Kuvailemme kaikki nämä ominaisuudet yksi kerrallaan esimerkillä. Ensinnäkin, mennään.

1. Ikkunatapahtuma

• onafterprintEvent: Tätä ominaisuutta tukee kaikki HTML-tunnisteet ja se toimii, kun sivu aloitettiin tulostaminen, ja sillä on yksi arvokomentosarja. Tässä on esimerkki HTML-koodista. Tämä esimerkki osoittaa, kun painiketta painetaan, se tulostaa valintaikkunassa tulostettavan viestin.

Koodi:



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



lähtö:

• onbeforeprint: Se toimii ennen tulostamista. Tapahtuma erottuu tulostusprosessin jälkeen. Alla on esimerkikoodi.

Koodi:



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


liipaisun tulostaminen.

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

lähtö:

• onerror: Tämä toiminto laukaistaan, kun virhe heitetään, kun mitään elementtiä ei ole.

Koodi:






Hei maailma.

toiminto myFun () (
hälytys ("ongelma kuvan lataamisessa.");
)

lähtö:

• onload: Tämä toiminto auttaa objektin lataamisessa ja näyttää hyvin, onko verkkosivu ladattu oikein.

Koodi:



onload event demo


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



lähtö:

• onresize: Tämä tapahtuma laukaistaan, kun selainikkunan kokoa muutetaan ja mikä tahansa elementti voidaan laukaista resize-määritteen alla.

Koodi:


onresize event

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

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


lähtö:

• onunload: Tämä tapahtuma laukaistaan, kun verkkosivun ikkuna suljetaan tai kun käyttäjä poistuu verkkosivulta. Alla oleva koodi purkaa sivun, kun käyttäjä poistuu ja heittää hälytyksen kiitos etsinnästä. Tämä tapahtuma toimii joskus kaikissa selaimissa.

Koodi:


Welcometo educba tutorial



Welcometo educba tutorial



Welcometo educba tutorial


Jätä sivu.

toiminto onfunc () (
hälytys ("Kiitos etsimisestä!");
)

lähtö:

2. Muodostapahtumat

Se toimii muodossa Ohjaimet. Seuraavat ovat määritteet, jotka ilmenevät, kun käyttäjä toimii vuorovaikutuksessa selainten kanssa.

• onblur: Tämä tapahtuma tapahtuu, kun käyttäjän huomio on poissa lomakeikkunasta. Seuraava esimerkki syöttää pienillä kirjaimilla ja kun lähetä-painiketta napsautetaan, se muuttaa lähdön isoksi kirjaimeksi.

Koodi:



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



lähtö:

• onchange: Tämä tapahtuma tapahtuu, kun käyttäjä muuttaa lomakkeen olemassa olevan elementin. Se tapahtuu, kun elementti menettää tarkennuksen.

Koodi:



HTML onchange


select the dress color
pink
Yellow
White


Huomaa: Valitse mikä tahansa vaihtoehto

Kuvaile itseäsi lyhyesti:

Lähetä

lähtö:

• onfocus: Tämä ominaisuus otetaan käyttöön, kun käyttäjä kiinnittää huomiota verkkosivun elementtiin tai kun syöttö on kohdistettu. Alla oleva esimerkki korostuu, kun syötetään syöte kenttään.

Koodi:





Tämä tapahtuma laukaistaan, kun elementti on keskitetty.

Nimi:
Sijainti:
toiminto onfoc (a) (
document.getElementById (a) .style.background = "vaaleanpunainen";
)

lähtö:

• oninput: Tämä tapahtuma laukaistaan, kun tulo syötetään syöttökenttään. Se aktivoidaan, kun tekstikentän arvo muuttuu. Se heijastaa, kun elementin arvo on muuttunut.



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



lähtö:

• ei kelpaa: Tämä ominaisuus kutsuu tapahtumia, kun syöttötyyppiin syötetty teksti on virheellinen tai pysyy tyhjänä. Tämän tapahtumamääritteen on täytettävä syöttöelementti.

Koodi:



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



HTML-koodia käytetään verkkosivun luomiseen

Kirjoita nimi:

lähtö:

• onreset: Se vapautetaan, kun muoto on levossa. Seuraavassa esimerkissä sanotaan, että kun lähetät painikkeen, lomake käsitellään ja kun napsautat uudelleen, lomake palautetaan.

Koodi:



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



lähtö:

• onsearch: Se toimii, kun käyttäjä painaa Enter-painiketta.

Koodi:





Kirjoita kenttään.
toiminto myF () (
var k = document.getElementById ("arvo1");
document.getElementById ("näyte"). innerHTML = "etsielementti on:" + k.arvo;
)

lähtö:

• onselect: Se laukaistaan, kun teksti on valittu syöttöruutuun. Se heittää valintaikkunan, joka tulostaa hälytysviestin.

Koodi:



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:



lähtö:

• lähetetty: Tämän tapahtuman tarkoituksena on suorittaa suoritettu toiminto samalla kun painat lähetä-painiketta.

Koodi:



Onsubmit Example

Enter name:
Email :


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



lähtö:

3. Avaintaidon määritteet

• OnKeyDown: Se laukaistaan, kun käyttäjä painaa nuolinäppäintä alas.

Koodi:





Esimerkki Onkeydownista.

toiminto mykedwn () (
hälytys ("näppäinpainike on aktivoitu");
)

lähtö:

• OnKeyPress: Tämä tapahtuma laukaistaan, kun käyttäjä painaa mitä tahansa näppäimistön näppäintä. Huomaa: jotkut selaimet eivät tue minkään näppäimen painamista.

Koodi:





Tämä esimerkki näyttää, kun käyttäjä kirjoittaa tekstialueelle, joka laukaisee tapahtuman

>

lähtö:

• OnKeyUp: Tämä ominaisuus laukaistaan, kun käyttäjä vapauttaa kohdistimen tekstikentästä. Alla on esittely.

Koodi:





Tämä esimerkki muuttaa merkin pieniksi kirjaimiksi.

Täytä nimi:
toiminto mykey () (
var g = document.getElementById ("jjj");
g.arvo = g.arvo.toLowerCase ();
)

lähtö:

4. Hiiren tapahtumamääritteet

Tämä toiminta laukaisee hiiretapahtuman, kun hiirtä painetaan joko tietokoneesta tai muista ulkoisista laitteista, kuten älypuhelimesta tai tablet-laitteesta. Jotkut hiiretapahtumista on annettu alla:

• onclick: Se laukaistaan, kun käyttäjä painaa painiketta hiiren päällä. Alla on syöte-esimerkki tapahtuman näyttämiseksi hiiren napsautuksen aikana.

Koodi:



HTML onclick Event




HTML onclick Event




HTML onclick Event


Tapahtumalla on tärkeä rooli HTML-muodossa.

Klikkaus

toiminto oncf () (
document.getElementById ("näyte"). innerHTML = "Hei maailma";
)

lähtö:

• onmousemove: Se laukeaa, kun hiiri siirretään kuvan päälle mihin tahansa suuntaan.

Koodi:


Event onmousemove demo



Tämä tapahtuma aktivoituu, kun osoitin vetää suuntaan.

Näyteteksti

lähtö:

• Onmouseup: Tämä tapahtuma antaa ilmoituksen, kun käyttäjä vapauttaa painikkeen ulostulossa.

Koodi:



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


napsauta objektin alapuolella

toiminto mupFn () (
document.querySelector ('. polygon'). style.transform = 'asteikko (2.2)';
)

lähtö:

• Hiiren päällä: Suorita JavaScript, kun siirrät hiiren osoittimen kuvan päälle

Koodi:



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



lähtö:

5. Vedä tapahtumamääritteet

Tämä sovellus auttaa HTML-ikkunassa, kun käyttäjä vetää syöttöelementin. Ohessa on erilaisia ​​tapahtumien kuuntelijoita, joita HTML: ssä käytetään vetämien tietojen tallentamiseen.

• Ondrag: Tätä käytetään, kun elementti vedetään verkkosivulta.
• Ondragstart : Tämä käynnistyy, kun käyttäjä alkaa vetää syöttökentästä. Alla oleva esimerkki kuvaa kahden kohdealueen vetämistä.

Koodi:



#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