HTML - Ereignisse Referenz: Ein Anfängerleitfaden zur Interaktivität Ihrer Webseiten

Hallo da draußen, zukünftige Webentwickler! Ich freue mich sehr, Ihr Guide auf dieser aufregenden Reise in die Welt der HTML-Ereignisse zu sein. Als jemand, der seit über einem Jahrzehnt Informatik unterrichtet, kann ich Ihnen sagen, dass das Verständnis von Ereignissen wie das Lernen der geheimen Sprache der Webinteraktivität ist. Also tauchen wir ein und öffnen wir gemeinsam dieses magische Reich!

HTML - Events Reference

Was sind HTML-Ereignisse?

Bevor wir uns den Details zuwenden, lassen Sie uns verstehen, was HTML-Ereignisse sind. Stellen Sie sich vor, Sie sind auf einer Party (einer Webseite), und jedes Mal, wenn Sie etwas tun - wie jemanden auf die Schulter tippen (einen Knopf klicken) oder ein Geheimnis flüstern (Text eingeben) - das ist ein Ereignis. In der Webwelt sind Ereignisse Aktionen oder Vorfälle, die in Ihrem Browser passieren, die Ihr HTML erkennt und darauf reagiert. Cool, oder?

Nun lassen Sie uns verschiedene Arten von Ereignissen erkunden und deren Verwendung.

Fenster Ereignisse Attribute

Fensterereignisse sind wie das Klingelschild vor dem Haus Ihrer Webseite. Sie informieren Sie, wenn jemand ankommt oder abreist.

Hier ist eine Tabelle mit häufigen Fensterereignissen:

Ereignis	Beschreibung
onload	Wird ausgelöst, wenn die Seite vollständig geladen ist
onunload	Wird ausgelöst, wenn der Benutzer die Seite verlässt
onresize	Wird ausgelöst, wenn das Browserfenster verändert wird
onscroll	Wird ausgelöst, wenn der Benutzer die Seite scrollt

Sehen wir uns ein Beispiel an:

<body onload="alert('Willkommen auf meiner Seite!')">
<h1>MeineAwesomeWebsite</h1>
</body>

In diesem Beispiel sehen Sie, sobald die Seite lädt, eine freundliche Alert-Nachricht. Es ist, als ob Sie Ihre Gäste begrüßen, wenn sie hereinkommen!

Formular Ereignisse

Formulare sind, wo die echte Interaktion stattfindet. Es ist wie ein Gespräch mit Ihren Nutzern.

Hier ist eine Tabelle mit Formularereignissen:

Ereignis	Beschreibung
onsubmit	Wird ausgelöst, wenn das Formular abgesendet wird
onreset	Wird ausgelöst, wenn das Formular zurückgesetzt wird
onchange	Wird ausgelöst, wenn der Wert einer Eingabe geändert wird
onfocus	Wird ausgelöst, wenn ein Element den Fokus erhält
onblur	Wird ausgelöst, wenn ein Element den Fokus verliert

Sehen wir uns ein Beispiel an:

<form onsubmit="alert('Formular abgesendet!'); return false;">
<input type="text" onchange="this.style.backgroundColor='gelb'">
<input type="submit" value="Absenden">
</form>

In diesem Formular wird die Texteingabe gelb, wenn Sie sie ändern, und Sie erhalten eine Alert-Nachricht, wenn Sie absenden. Es ist, als ob das Formular zu Ihnen spricht!

Tastatur Ereignisse

Tastaturereignisse drehen sich um das, was passiert, wenn Ihre Finger über die Tastatur tanzen.

Hier ist eine Tabelle mit Tastaturereignissen:

Ereignis	Beschreibung
onkeydown	Wird ausgelöst, wenn eine Taste gedrückt wird
onkeyup	Wird ausgelöst, wenn eine Taste losgelassen wird
onkeypress	Wird ausgelöst, wenn eine Taste gedrückt und losgelassen wird

Probieren wir ein Beispiel aus:

<input type="text" onkeypress="document.body.style.backgroundColor='hellesblau'">

Jedes Mal, wenn Sie eine Taste in dieser Eingabe drücken, ändert sich der Hintergrund der Seite in helles Blau. Es ist, als ob Sie ein Klavier spielen, das malt!

Maus Ereignisse

Mausereignisse drehen sich um Klicks und Bewegungen.

Hier ist eine Tabelle mit Mausereignissen:

Ereignis	Beschreibung
onclick	Wird ausgelöst, wenn ein Element angeklickt wird
ondblclick	Wird ausgelöst, wenn ein Element doppelt angeklickt wird
onmouseover	Wird ausgelöst, wenn die Maus über ein Element bewegt wird
onmouseout	Wird ausgelöst, wenn die Maus ein Element verlässt

Sehen wir uns sie in Aktion an:

<button onclick="this.innerHTML='Geklickt!'"
onmouseover="this.style.color='rot'"
onmouseout="this.style.color='schwarz'">
Klicke mich!
</button>

Dieser Knopf ändert die Farbe, wenn Sie darüber hinwegbewegen, und ändert den Text, wenn Sie ihn klicken. Es ist, als ob der Knopf ein Chamäleon ist!

Ziehen Ereignisse

Ziehereignisse machen Ihre Elemente beweglich, wie Teile auf einem Schachbrett.

Hier ist eine Tabelle mit Ziehereignissen:

Ereignis	Beschreibung
ondrag	Wird ausgelöst, wenn ein Element gezogen wird
ondragstart	Wird ausgelöst, wenn der Benutzer anfängt, ein Element zu ziehen
ondragend	Wird ausgelöst, wenn der Benutzer das Ziehen beendet

Hier ist ein einfaches Beispiel:

<div draggable="true" ondragstart="alert('Ziehen gestartet!')">
Ziehe mich!
</div>

Wenn du anfangen, dieses div zu ziehen, bekommst du eine Alert-Nachricht. Es ist, als ob das Element sagt, "Wheee! Ich fliege!"

Zwischenablage Ereignisse

Zwischenablageereignisse drehen sich um Kopieren, Schneiden und Einfügen.

Hier ist eine Tabelle mit Zwischenablageereignissen:

Ereignis	Beschreibung
oncopy	Wird ausgelöst, wenn der Benutzer Inhalte kopiert
oncut	Wird ausgelöst, wenn der Benutzer Inhalte schneidet
onpaste	Wird ausgelöst, wenn der Benutzer Inhalte einfügt

Sehen wir uns ein Beispiel an:

<textarea oncopy="alert('Kopiert!')" oncut="alert('Geschnitten!')" onpaste="alert('Eingefügt!')">
Probieren Sie das Kopieren, Schneiden oder Einfügen hier aus!
</textarea>

Diese Textarea informiert Sie, wenn Sie Zwischenablageaktionen ausführen. Es ist, als ob Sie ein gesprächiges Notizbuch hätten!

Medien Ereignisse

Medienereignisse sind für das Abspielen von Audio oder Video auf Ihrer Seite.

Hier ist eine Tabelle mit Medienereignissen:

Ereignis	Beschreibung
onplay	Wird ausgelöst, wenn die Medienwiedergabe startet
onpause	Wird ausgelöst, wenn die Medienwiedergabe pausiert wird
onended	Wird ausgelöst, wenn die Medienwiedergabe beendet ist

Hier ist ein schnelles Beispiel:

<audio src="song.mp3" controls onplay="alert('Genieße die Musik!')" onended="alert('Hoffentlich hat Ihnen das gefallen!')"></audio>

Dieses Audioelement begrüßt Sie, wenn Sie anfangen zu spielen, und bittet um Feedback, wenn es endet. Es ist, als ob ein DJ sich um Ihre Meinung kümmert!

Verschiedene Ereignisse

Es gibt viele andere Ereignisse, die nicht in Kategorien passen. Hier sind einige:

Ereignis	Beschreibung
onerror	Wird ausgelöst, wenn ein Fehler auftritt
oncontextmenu	Wird ausgelöst, wenn der Benutzer die rechte Maustaste drückt
onwheel	Wird ausgelöst, wenn das Mausrad gedreht wird

Sehen wir uns eines in Aktion an:

<img src="image.jpg" onerror="this.src='default.jpg'">

Wenn das Bild nicht geladen wird, wird es automatisch durch ein Standardbild ersetzt. Es ist, als ob ein Backup-Tänzer bereit ist, einzuspringen!

Und das war's, Leute! Sie haben gerade Ihre ersten Schritte in die Welt der HTML-Ereignisse unternommen. Denken Sie daran, dass der Schlüssel zum Beherrschen von Ereignissen die Übung ist. Versuchen Sie, verschiedene Ereignisse zu kombinieren, experimentieren Sie mit neuen Ideen und vor allem: haben Sie Spaß!

Wie ich meinen Schülern immer sage, Coden ist wie Kochen - am Anfang machen Sie vielleicht einen Schmutz, aber mit der Übung werden Sie bald Meisterwerke zaubern. Also los, fangen Sie an, mit diesen Ereignissen zu spielen, und schauen Sie zu, wie Ihre Webseiten zum Leben erwachen!

Credits: Image by storyset

Vorheriges Tutorial:

HTML - Referenz für Attribute

Nächstes Tutorial:

HTML - Schriften Referenz