Atribute de eveniment HTML - Top 5 Atribute de eveniment HTML cu exemple

Introducere în atributele evenimentului HTML

În acest articol, vom discuta în detaliu despre atributele evenimentului HTML. Evenimentele sunt acțiunile care sunt efectuate ca urmare a acțiunii utilizatorului. De exemplu, când un utilizator apasă o tastă de pe o tastatură pentru a citi datele, atunci se spune că este vorba de evenimente de la tastatură. Aceste activități sunt făcute atunci când un utilizator se uită pe un site web și execută un clic pe buton sau când o pagină se încarcă pe apăsarea butonului de actualizare în care browserul face manipulare în pagini, se spune că toate aceste acțiuni sunt un eveniment. Aici vom parcurge o înțelegere de bază a evenimentelor și modul în care funcționează în browser cu privire la acțiunile utilizatorului. Există un tip diferit de evenimente care apar în întregul ferestre al browserului, care sunt explicate în secțiunile următoare.

Top 5 atribute eveniment HTML

Există o variantă diferită de evenimente disponibile în HTML. Și toate aceste evenimente au un bloc mic de cod numit ca un manager de evenimente care se declanșează atunci când se efectuează acțiunea evenimentului. Acestea sunt atașate la elementele HTML. Manipulatorii de evenimente sau ascultătorii de evenimente joacă un rol important în atributele evenimentului HTML. Haideți să vedem diferite tipuri de atribute de eveniment care sunt declarate și aplicate la elemente HTML, de asemenea, lucrează în detaliu. Patru atribute de evenimente principale sunt utilizate în principal. Sunt:

1. Evenimentul ferestrei
2. Formați evenimente
3. Evenimente de mouse
4. Evenimente pentru tastatură
5. Trageți și fixați evenimentele

Vom descrie toate aceste atribute unul câte unul cu un exemplu. În primul rând, vom merge cu.

1. Evenimentul ferestrei

• onafterprintEvent: Acest atribut este acceptat de toate etichetele Html și funcționează atunci când o pagină a început tipărirea și are un script cu o singură valoare. Iată un exemplu de cod HTML. Acest exemplu arată când este apăsat un buton, acesta imprimă un mesaj care este tipărit într-un mesaj de dialog.

Cod:



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



ieşire:

• înainte de imprimare : funcționează înainte de imprimare. Evenimentul este tras după procesul de imprimare. Mai jos este prezentat codul de exemplu.

Cod:



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


declanșator pentru a imprima.

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

ieşire:

• onerror: Această funcție este declanșată atunci când o eroare este aruncată în timp ce nu există niciun element.

Cod:






Salut Lume.

function myFun () (
alertă („problemă cu încărcarea imaginii.”);
)

ieşire:

• onload: Această funcție ajută la încărcarea unui obiect și funcționează bine pentru a vedea dacă o pagină web este încărcată corect.

Cod:



onload event demo


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



ieşire:

• onresize: Acest eveniment este declanșat atunci când fereastra browserului este redimensionată și orice element poate fi declanșat sub atributul redimensionare.

Cod:


onresize event

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

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


ieşire:

• onunload: Acest eveniment este declanșat atunci când o fereastră a paginii web este închisă sau când un utilizator părăsește pagina web. Codul de mai jos descarcă pagina când un utilizator pleacă și aruncă o alertă mulțumind căutării. Acest eveniment funcționează uneori în toate browserele.

Cod:


Welcometo educba tutorial



Welcometo educba tutorial



Welcometo educba tutorial


Lasă pagina.

function onfunc () (
alertă („Vă mulțumim căutarea!”);
)

ieşire:

2. Formați evenimente

Funcționează cu Controale de formă. Următoarele sunt atributele care apar atunci când utilizatorul interacționează cu browserele.

• onblur: Acest eveniment are loc atunci când atenția utilizatorului este departe de fereastra formularului. Exemplul următor intră cu litere mici și când se face clic pe butonul de trimitere transformă ieșirea în majuscule.

Cod:



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



ieşire:

• onchange: Acest eveniment are loc atunci când un utilizator schimbă elementul existent în formular. Se întâmplă atunci când un element pierde focalizarea.

Cod:



HTML onchange


select the dress color
pink
Yellow
White


Notă: Selectați orice opțiune

Descrieți-vă pe scurt:

Trimite

ieşire:

• onfocus: Acest atribut este activat atunci când utilizatorul acordă atenție elementului de pe o pagină web sau atunci când este focalizată introducerea. Exemplul de mai jos evidențiază când introducem o intrare în câmp.

Cod:





Acest eveniment este declanșat atunci când un element a fost focalizat.

Nume:
Locație:
funcție onfoc (a) (
document.getElementById (a) .style.background = "roz";
)

ieşire:

• oninput: Acest eveniment se declanșează atunci când intrarea este introdusă în câmpul de intrare. Acesta este activat atunci când valoarea în câmpul de text este modificată. Se reflectă odată modificată valoarea elementului.



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



ieşire:

• oninvalid: Acest atribut apelează la evenimente când textul introdus în tipul de intrare nu este valabil sau rămâne gol. Acest atribut de eveniment trebuie să completeze elementul de intrare.

Cod:



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



HTML este utilizat pentru a crea o pagină web

Introduceți numele:

ieşire:

• onreset: este tras atunci când o formă este odihnită . Următorul exemplu spune când trimiteți butonul un proces este procesat și din nou când faceți clic pentru a reseta formularul este resetat.

Cod:



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



ieşire:

• onsearch: funcționează atunci când un utilizator apasă un buton Enter.

Cod:





Scrieți în câmp.
function myF () (
var k = document.getElementById ("valoare1");
document.getElementById ("eșantion"). insideHTML = "elementul de căutare este:" + k.value;
)

ieşire:

• onselect: Este declanșat atunci când un text a fost selectat într-o casetă de introducere. Acesta aruncă o casetă de dialog imprimând un mesaj de alertă.

Cod:



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:



ieşire:

• onsubmit: Scopul acestui eveniment este de a executa acțiunea efectuată în timp ce apăsați butonul Trimite.

Cod:



Onsubmit Example

Enter name:
Email :


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



ieşire:

3. Atribute ale comisiei cheie

• OnKeyDown: Se declanșează atunci când un utilizator apasă o tastă săgeată în jos.

Cod:





Exemplu pentru Onkeydown.

function mykedwn () (
alertă („apăsarea tastei este activată”);
)

ieşire:

• OnKeyPress: Acest eveniment se declanșează atunci când utilizatorul apasă orice tastă de pe tastatură. Notă: un anumit browser nu acceptă apăsarea niciunei taste.

Cod:





Acest exemplu arată când un tip de utilizator din zona de text declanșează un eveniment

>

ieşire:

• OnKeyUp: Acest atribut este declanșat atunci când un utilizator eliberează un cursor din câmpul de text. Mai jos vine demonstrația.

Cod:





Acest exemplu transformă caracterul în minuscule.

Completați numele:
function mykey () (
var g = document.getElementById ("jjj");
g.value = g.value.toLowerCase ();
)

ieşire:

4. Atributele evenimentului mouse-ului

Această acțiune declanșează un eveniment al mouse-ului atunci când un mouse este apăsat fie de la un computer, fie de pe orice dispozitive externe, cum ar fi un smartphone sau o tabletă. Unele dintre evenimentele mouse-ului sunt prezentate mai jos:

• onclick: Se declanșează atunci când un utilizator apasă butonul peste mouse. Un exemplu de intrare este dat mai jos pentru a afișa evenimentul în timp ce faceți clic pe mouse.

Cod:



HTML onclick Event




HTML onclick Event




HTML onclick Event


Evenimentul joacă un rol vital în HTML.

Clic

funcție oncf () (
document.getElementById ("eșantion"). insideHTML = "Hello World";
)

ieşire:

• onmousemove: este tras când un mouse este mutat peste o imagine în orice direcție.

Cod:


Event onmousemove demo



Acest eveniment este activat atunci când indicatorul își trage direcția.

Text mostră

ieşire:

• Onmouseup: Acest eveniment oferă o notificare atunci când un utilizator eliberează un buton pe o ieșire.

Cod:



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


faceți clic sub obiect

function mupFn () (
document.querySelector ('. poligon'). style.transform = 'scale (2.2)';
)

ieşire:

• Onmouseover: Executați JavaScript când mutați indicatorul mouse-ului peste o imagine

Cod:



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



ieşire:

5. Trageți atributele evenimentului

Această aplicație ajută în fereastra HTML când utilizatorul trage elementul de intrare. Mai jos sunt diferiți ascultători de evenimente folosiți în HTML pentru stocarea datelor târâte.

• Ondrag: Acesta este utilizat atunci când un element este târât de pe pagina web.
• Ondragstart : Aceasta se declanșează atunci când utilizatorul începe să tragă din câmpul de intrare. Exemplul de mai jos demonstrează despre tragerea zonei cu două ținte.

Cod:



#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