Atrybuty zdarzenia HTML - Top 5 atrybutów zdarzeń HTML z przykładami

Wprowadzenie do atrybutów zdarzeń HTML

W tym artykule omówimy szczegółowo atrybuty zdarzeń HTML. Zdarzenia to akcje wykonywane w wyniku akcji użytkownika. Na przykład, gdy użytkownik naciska klawisz na klawiaturze, aby odczytać dane, mówi się, że są to zdarzenia na klawiaturze. Te działania są wykonywane, gdy użytkownik przegląda witrynę internetową i wykonuje kliknięcie przycisku lub gdy strona ładuje się po naciśnięciu przycisku odświeżania, gdy przeglądarka wykonuje manipulację na stronach, wszystkie te działania są uważane za zdarzenie. Tutaj omówimy podstawową wiedzę na temat zdarzeń i tego, jak to działa w przeglądarce na działania użytkownika. Istnieje inny rodzaj zdarzeń, które występują w całych oknach przeglądarki, które wyjaśniono w poniższych sekcjach.

Top 5 atrybutów zdarzeń HTML

Istnieje inny wariant wydarzeń dostępny w HTML. Wszystkie te zdarzenia mają mały blok kodu o nazwie jako moduł obsługi zdarzeń, który jest uruchamiany podczas wykonywania akcji zdarzenia. Są one dołączone do elementów HTML. Procedury obsługi lub detektory zdarzeń odgrywają ważną rolę w atrybutach zdarzeń HTML. Zobaczmy różne typy atrybutów zdarzeń, które są globalnie deklarowane i stosowane do elementów HTML, a także ich szczegóły. Głównie wykorzystywane są cztery podstawowe atrybuty zdarzeń. Oni są:

1. Wydarzenie w oknie
2. Form Wydarzenia
3. Wydarzenia z myszką
4. Zdarzenia na klawiaturze
5. Przeciągnij i upuść Wydarzenia

Wszystkie te atrybuty opiszemy jeden po drugim na przykładzie. Najpierw pójdziemy.

1. Zdarzenie okna

• onafterprintEvent: ten atrybut jest obsługiwany przez wszystkie znaczniki HTML i działa, gdy strona rozpoczęła drukowanie i ma skrypt o pojedynczej wartości. Oto przykład kodu HTML. Ten przykład pokazuje, że naciśnięcie przycisku powoduje wydrukowanie komunikatu drukowanego w komunikacie dialogowym.

Kod:



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



Wynik:

• onbeforeprint: Działa przed drukowaniem. Zdarzenie zostanie uruchomione po procesie drukowania. Poniżej znajduje się przykładowy kod.

Kod:



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


wyzwalacz do drukowania.

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

Wynik:

• onerror: Ta funkcja jest uruchamiana, gdy zostanie zgłoszony błąd, gdy nie istnieje żaden element.

Kod:






Witaj świecie.

funkcja myFun () (
alert („problem z ładowaniem obrazu.”);
)

Wynik:

• onload: Ta funkcja pomaga w ładowaniu obiektu i działa dobrze, aby sprawdzić, czy strona internetowa jest poprawnie załadowana.

Kod:



onload event demo


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



Wynik:

• onresize: To zdarzenie jest wyzwalane, gdy zmienia się rozmiar okna przeglądarki, a dowolny element może być wyzwalany w ramach atrybutu resize.

Kod:


onresize event

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

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


Wynik:

• onunload: To zdarzenie jest wyzwalane, gdy okno strony internetowej zostanie zamknięte lub gdy użytkownik opuści stronę. Poniższy kod zwalnia stronę, gdy użytkownik wychodzi i rzuca alert dzięki za wyszukiwanie. To zdarzenie działa czasami we wszystkich przeglądarkach.

Kod:


Welcometo educba tutorial



Welcometo educba tutorial



Welcometo educba tutorial


Opuść stronę.

funkcja onfunc () (
alert („Dziękujemy za wyszukiwanie!”);
)

Wynik:

2. Form Wydarzenia

Działa z formantami formularza. Poniżej przedstawiono atrybuty występujące podczas interakcji użytkownika z przeglądarkami.

• onblur: To zdarzenie ma miejsce, gdy uwaga użytkownika jest z dala od okna formularza. W poniższym przykładzie dane wejściowe są pisane małymi literami, a po kliknięciu przycisku wysyłania zamienia dane wyjściowe na wielkie litery.

Kod:



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



Wynik:

• onchange: To zdarzenie występuje, gdy użytkownik zmienia istniejący element w formularzu. Dzieje się tak, gdy element traci skupienie.

Kod:



HTML onchange


select the dress color
pink
Yellow
White


Uwaga: Wybierz dowolną opcję

Opisz siebie krótko:

Zatwierdź

Wynik:

• onfocus: ten atrybut jest włączony, gdy użytkownik zwraca uwagę na element strony internetowej lub gdy fokus jest ustawiony. Poniższy przykład pokazuje, kiedy wprowadzamy dane w polu.

Kod:





To zdarzenie jest uruchamiane, gdy element jest skupiony.

Nazwa:
Lokalizacja:
funkcja onfoc (a) (
document.getElementById (a) .style.background = "pink";
)

Wynik:

• oninput: To zdarzenie jest uruchamiane, gdy dane wejściowe zostaną wprowadzone w polu wejściowym. Jest aktywowany, gdy zmienia się wartość w polu tekstowym. Odzwierciedla to po zmianie wartości elementu.



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



Wynik:

• oninvalid: Ten atrybut wywołuje zdarzenia, gdy tekst wprowadzony w typie wprowadzania jest nieprawidłowy lub pozostaje pusty. Ten atrybut zdarzenia musi wypełnić element wejściowy.

Kod:



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



HTML służy do tworzenia strony internetowej

Wprowadź nazwę:

Wynik:

• onreset: Jest uruchamiany, gdy formularz jest w spoczynku. Poniższy przykład pokazuje, że po przesłaniu przycisku formularz jest przetwarzany, a ponownie po kliknięciu, aby zresetować, formularz jest resetowany.

Kod:



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



Wynik:

• onsearch: Działa, gdy użytkownik naciśnie przycisk Enter.

Kod:





Napisz w polu.
funkcja myF () (
var k = document.getElementById („wartość1”);
document.getElementById („sample”). innerHTML = „elementem wyszukiwania jest:” + k.value;
)

Wynik:

• onselect: Jest uruchamiany, gdy tekst zostanie zaznaczony w polu wprowadzania. Wyświetla okno dialogowe drukowania komunikatu ostrzegawczego.

Kod:



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:



Wynik:

• onsubmit: Celem tego zdarzenia jest wykonanie akcji wykonanej podczas naciskania przycisku przesyłania.

Kod:



Onsubmit Example

Enter name:
Email :


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



Wynik:

3. Kluczowe atrybuty tablicy

• OnKeyDown: Uruchamia się, gdy użytkownik naciśnie klawisz strzałki w dół.

Kod:





Przykład dla Onkeydown.

funkcja mykedwn () (
alert („naciśnięcie klawisza jest aktywne”);
)

Wynik:

• OnKeyPress: To zdarzenie jest uruchamiane, gdy użytkownik naciśnie dowolny klawisz na klawiaturze. Uwaga: niektóre przeglądarki nie obsługują naciskania żadnego klawisza.

Kod:





Ten przykład pokazuje, kiedy użytkownik wpisze w polu tekstowym wyzwala zdarzenie

>

Wynik:

• OnKeyUp: ten atrybut jest wyzwalany, gdy użytkownik zwolni kursor z pola tekstowego. Poniżej znajduje się demonstracja.

Kod:





Ten przykład przekształca znak na małe litery.

Wpisz nazwę:
funkcja mykey () (
var g = document.getElementById („jjj”);
g.value = g.value.toLowerCase ();
)

Wynik:

4. Atrybuty zdarzeń myszy

Ta akcja wyzwala zdarzenie myszy po naciśnięciu myszy z komputera lub dowolnego urządzenia zewnętrznego, takiego jak smartfon lub tablet. Niektóre zdarzenia myszy podano poniżej:

• onclick: Uruchamia się, gdy użytkownik naciśnie przycisk myszy. Przykład wprowadzania podano poniżej, aby pokazać zdarzenie podczas klikania myszą.

Kod:



HTML onclick Event




HTML onclick Event




HTML onclick Event


Wydarzenie odgrywa istotną rolę w HTML.

Kliknij

funkcja oncf () (
document.getElementById („sample”). innerHTML = „Hello World”;
)

Wynik:

• onmousemove: Jest uruchamiany, gdy mysz przesuwa się nad obrazem w dowolnym kierunku.

Kod:


Event onmousemove demo



To zdarzenie jest aktywowane, gdy wskaźnik przesuwa się w swoim kierunku.

Przykładowy tekst

Wynik:

• Onmouseup: To zdarzenie daje powiadomienie, gdy użytkownik zwolni przycisk na wyjściu.

Kod:



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


kliknij poniżej obiektu

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

Wynik:

• Onmouseover: Wykonaj JavaScript podczas przesuwania wskaźnika myszy nad obrazem

Kod:



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



Wynik:

5. Przeciągnij atrybuty zdarzenia

Ta aplikacja pomaga w oknie HTML, gdy użytkownik przeciąga element wejściowy. Poniżej znajdują się różne detektory zdarzeń używane w HTML do przechowywania przeciągniętych danych.

• Ondrag: Jest używany, gdy element jest przeciągany ze strony internetowej.
• Ondragstart : Uruchamia się, gdy użytkownik zaczyna przeciągać z pola wprowadzania. Poniższy przykład pokazuje przeciąganie obszaru dwóch celów.

Kod:



#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