HTML-Ereignisattribute - Top 5 HTML-Ereignisattribute mit Beispielen

• Einführung in HTML-Ereignisattribute
• 

Windows onafterprint Event

Windows onafterprint Event
This attribute works in IE and Mozilla

function myfun() (
alert("Document is being printed");
)


• 

body (
color: #9370DB;
background-color: #BC8F8F;
text-align: center;
padding: 20px;
)
p (
font-size: 2rem;
)

Attribute Demo

• 
Welcometo educba tutorial

• 

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


• 

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


• 

onselect demo
h1 (
color:magenta;
)
body (
text-align:center;
)

function eduhtml() (
alert("text highlighted!");
)

EDUCBA Online tutorial
Text Box:


• 

HTML onclick Event

• 

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

• 

Example demonstrating Onmouseover.
Mouse over
function A() (
document.getElementById("sample").style.color = "yellow";)
function B() (
document.getElementById("sample").style.color = "green";
)


• 

#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 dropdemo
drop the box.
ondragstart = "return dStart(e)">
Drag it
ondrop="drop(event)"
ondragover="allowDrop(event)">
welcome
dropzone



Einführung in HTML-Ereignisattribute

In diesem Artikel werden wir detailliert auf HTML-Ereignisattribute eingehen. Ereignisse sind die Aktionen, die als Ergebnis einer Benutzeraktion ausgeführt werden. Wenn ein Benutzer beispielsweise eine Taste auf einer Tastatur drückt, um die Daten zu lesen, spricht man von Tastaturereignissen. Diese Aktivitäten werden ausgeführt, wenn ein Benutzer auf eine Website zugreift und auf eine Schaltfläche klickt oder wenn beim Klicken auf die Schaltfläche "Aktualisieren" eine Seite geladen wird, auf der der Browser die Seiten bearbeitet. Alle diese Aktionen werden als Ereignis bezeichnet. Hier werden wir ein grundlegendes Verständnis der Ereignisse und wie es im Browser auf die Benutzeraktionen funktioniert. In den gesamten Browserfenstern treten verschiedene Arten von Ereignissen auf, die in den folgenden Abschnitten erläutert werden.

Top 5 HTML-Ereignisattribute

Im HTML ist eine andere Variante von Ereignissen verfügbar. Und all diese Ereignisse haben einen kleinen Codeblock, der als Ereignishandler bezeichnet wird und ausgelöst wird, wenn die Ereignisaktion ausgeführt wird. Diese sind an die HTML-Elemente angehängt. Die Ereignishandler oder Ereignis-Listener spielen eine wichtige Rolle in den HTML-Ereignisattributen. Sehen wir uns verschiedene Arten von Ereignisattributen an, die global deklariert und auf HTML-Elemente angewendet werden. Vier primäre Ereignisattribute werden hauptsächlich verwendet. Sie sind:

1. Fenster Ereignis
2. Formularereignisse
3. Mausereignisse
4. Tastaturereignisse
5. Ereignisse ziehen und ablegen

Wir werden alle diese Attribute einzeln mit einem Beispiel beschreiben. Zuerst gehen wir mit.

1. Fensterereignis

• onafterprintEvent: Dieses Attribut wird von allen Html-Tags unterstützt und funktioniert, wenn eine Seite gedruckt wird, und verfügt über ein Ein-Wert-Skript. Hier kommt ein Beispiel für HTML-Code. Dieses Beispiel zeigt, wenn eine Taste gedrückt wird, wird eine Nachricht gedruckt, die in einer Dialognachricht gedruckt wird.

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



Ausgabe:

• onbeforeprint: Funktioniert vor dem Drucken. Das Ereignis wird nach dem Druckvorgang ausgelöst. Unten ist der Beispielcode.

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


Auslöser zum Drucken.

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

Ausgabe:

• onerror: Diese Funktion wird ausgelöst, wenn ein Fehler ausgelöst wird, während kein Element vorhanden ist.

Code:






Hallo Welt.

Funktion myFun () (
alert ("Problem beim Laden des Bildes.");
)

Ausgabe:

• Onload: Diese Funktion hilft beim Laden eines Objekts und überprüft, ob eine Webseite korrekt geladen ist.

Code:



onload event demo


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



Ausgabe:

• onresize: Dieses Ereignis wird ausgelöst, wenn die Größe des Browserfensters geändert wird und jedes Element unter dem Größenänderungsattribut ausgelöst werden kann.

Code:


onresize event

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

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


Ausgabe:

• onunload: Dieses Ereignis wird ausgelöst, wenn ein Webseitenfenster geschlossen wird oder wenn ein Benutzer die Webseite verlässt. Der folgende Code entlädt die Seite, wenn ein Benutzer die Website verlässt, und gibt eine Warnung aus, danke für die Suche. Dieses Ereignis funktioniert manchmal in allen Browsern.

Code:


Welcometo educba tutorial



Welcometo educba tutorial



Welcometo educba tutorial


Verlasse die Seite.

Funktion onfunc () (
alert ("Danke fürs Suchen!");
)

Ausgabe:

2. Ereignisse bilden

Es funktioniert mit Formularsteuerelementen. Die folgenden Attribute treten auf, wenn der Benutzer mit den Browsern interagiert.

• Unschärfe: Dieses Ereignis tritt ein, wenn die Aufmerksamkeit des Benutzers nicht auf das Formularfenster gerichtet ist. Im folgenden Beispiel wird die Eingabe in Kleinbuchstaben vorgenommen. Wenn Sie auf die Schaltfläche "Senden" klicken, wird die Ausgabe in Großbuchstaben umgewandelt.

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



Ausgabe:

• onchange: Dieses Ereignis tritt ein, wenn ein Benutzer das vorhandene Element im Formular ändert. Es passiert, wenn ein Element den Fokus verliert.

Code:



HTML onchange


select the dress color
pink
Yellow
White


Hinweis: Wählen Sie eine beliebige Option

Beschreibe dich kurz:

einreichen

Ausgabe:

• onfocus: Dieses Attribut wird aktiviert, wenn der Benutzer auf das Element auf einer Webseite aufmerksam macht oder wenn die Eingabe fokussiert ist. Das folgende Beispiel zeigt, wann wir eine Eingabe in das Feld eingeben.

Code:





Dieses Ereignis wird ausgelöst, wenn ein Element fokussiert wurde.

Name:
Ort:
Funktion onfoc (a) (
document.getElementById (a) .style.background = "pink";
)

Ausgabe:

• oninput: Dieses Ereignis wird ausgelöst, wenn die Eingabe in das Eingabefeld eingegeben wird. Sie wird aktiviert, wenn der Wert im Textfeld geändert wird. Es wird angezeigt, sobald der Wert des Elements geändert wird.



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



Ausgabe:

• oninvalid: Dieses Attribut ruft die Ereignisse auf, wenn der in den Eingabetyp eingegebene Text ungültig ist oder leer bleibt. Dieses Ereignisattribut muss das Eingabeelement füllen.

Code:



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



HTML wird zum Erstellen einer Webseite verwendet

Geben Sie den Namen ein:

Ausgabe:

• onreset: Wird ausgelöst, wenn sich ein Formular im Ruhezustand befindet. Das folgende Beispiel besagt, dass beim Senden der Schaltfläche ein Formular verarbeitet wird und beim erneuten Klicken auf, um das Formular zurückzusetzen, das zurückgesetzt wird.

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



Ausgabe:

• onsearch: Dies funktioniert, wenn ein Benutzer eine Eingabetaste drückt.

Code:





Schreiben Sie in das Feld.
Funktion myF () (
var k = document.getElementById ("value1");
document.getElementById ("sample"). innerHTML = "Suchelement ist:" + k.value;
)

Ausgabe:

• onselect: Wird ausgelöst, wenn in einem Eingabefeld ein Text ausgewählt wurde. Es wird ein Dialogfeld angezeigt, in dem eine Warnmeldung gedruckt wird.

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:



Ausgabe:

• onsubmit: Der Zweck dieses Ereignisses besteht darin, die Aktion auszuführen, die ausgeführt wird, während die Submit-Taste gedrückt wird.

Code:



Onsubmit Example

Enter name:
Email :


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



Ausgabe:

3. Key Board Attribute

• OnKeyDown: Wird ausgelöst, wenn ein Benutzer eine Abwärtspfeiltaste drückt.

Code:





Beispiel für Onkeydown.

function mykedwn () (
alert ("Tastendruck ist aktiviert");
)

Ausgabe:

• OnKeyPress: Dieses Ereignis wird ausgelöst, wenn der Benutzer eine beliebige Taste auf der Tastatur drückt. Hinweis: Einige Browser unterstützen das Drücken einer Taste nicht.

Code:





Dieses Beispiel zeigt, wenn ein Benutzer im Textbereich ein Ereignis auslöst

>

Ausgabe:

• OnKeyUp: Dieses Attribut wird ausgelöst, wenn ein Benutzer einen Cursor aus dem Textfeld freigibt. Unten kommt die Demonstration.

Code:





In diesem Beispiel wird das Zeichen in Kleinbuchstaben umgewandelt.

Füllen Sie den Namen:
Funktion mykey () (
var g = document.getElementById ("jjj");
g.value = g.value.toLowerCase ();
)

Ausgabe:

4. Mausereignisattribute

Diese Aktion löst ein Mausereignis aus, wenn eine Maus von einem Computer oder einem externen Gerät wie einem Smartphone oder Tablet gedrückt wird. Einige der Mausereignisse sind nachfolgend aufgeführt:

• onclick: Wird ausgelöst, wenn ein Benutzer die Taste über der Maus drückt. Im Folgenden finden Sie ein Eingabebeispiel, um das Ereignis anzuzeigen, während Sie mit der Maus klicken.

Code:



HTML onclick Event




HTML onclick Event




HTML onclick Event


Ereignis spielt eine wichtige Rolle in HTML.

Klicken

Funktion oncf () (
document.getElementById ("sample"). innerHTML = "Hallo Welt";
)

Ausgabe:

• onmousemove: Es wird ausgelöst, wenn eine Maus in eine beliebige Richtung über ein Bild bewegt wird.

Code:


Event onmousemove demo



Dieses Ereignis wird aktiviert, wenn der Zeiger seine Richtung ändert.

Beispieltext

Ausgabe:

• Onmouseup: Dieses Ereignis gibt eine Benachrichtigung aus, wenn ein Benutzer eine Schaltfläche in einer Ausgabe freigibt.

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


Klicken Sie unter das Objekt

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

Ausgabe:

• Onmouseover: Führen Sie ein JavaScript aus, wenn Sie den Mauszeiger über ein Bild bewegen

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



Ausgabe:

5. Ziehen Sie die Ereignisattribute

Diese Anwendung hilft im HTML-Fenster, wenn der Benutzer das Eingabeelement zieht. Nachfolgend sind die verschiedenen Ereignis-Listener aufgeführt, die in HTML zum Speichern von gezogenen Daten verwendet werden.

• Ondrag: Wird verwendet, wenn ein Element von der Webseite gezogen wird.
• Ondragstart : Dies wird ausgelöst, wenn der Benutzer beginnt, aus dem Eingabefeld zu ziehen. Das folgende Beispiel veranschaulicht das Ziehen des Bereichs mit zwei Zielen.

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