BESTE WEBSITE FÜR WEBENTWICKLER
HTML CSS JAVASCRIPT SQL PYTHON PHP JAVA KOTLIN GO C C++ C# Django WIE MAN W3.CSS AI Mehr 🔍 ◑ Bücher VERWEISE ÜBUNGEN

JS Lernprogramm

JS HEIM JS Einführung JS Wohin JS Ausgabe JS Aussagen JS Syntax JS Kommentare JS Variablen JS Let JS Const JS Betreiber JS Arithmetik JS Abtretung JS Datentypen JS Funktionen JS Objekte JS Veranstaltungen JS Strings JS String-Methoden JS String-Suche JS String-Vorlagen JS Zahlen JS Zahlenmethoden JS Arrays JS Array-Methoden JS Array-Sortierung JS Array-Iteration JS Array-Konst JS Termine JS Datumsformate JS Methoden zum Abrufen des Datums JS Methoden zur Datumsfestlegung JS Mathe JS Zufällig JS Boolesche Werte JS Vergleiche JS If Else JS Switch JS Schleife For JS Schleife For In JS Schleife For Of JS Schleife While JS Break JS Iterables JS Sets JS Karten JS Typeof JS Typkonvertierung JS Bitweise JS RegExp JS Fehler JS Umfang JS Heben JS Strikter modus JS this Stichwort JS Pfeilfunktion JS Klassen JS Module JS JSON JS Debuggen JS Gestaltungsrichtlinie JS Empfohlene Vorgehensweise JS Fehler JS Leistung JS Reservierte Wörter

JS Versionen

JS Versionen JS 2009 (ES5) JS 2015 (ES6) JS 2016 JS 2017 JS 2018 JS 2019 JS 2020 JS 2021/2022 JS IE / Edge JS Geschichte

JS Objekte

Objektdefinitionen Objekteigenschaften Objektmethoden Objektanzeige Objektzugriffsfunktionen Objektkonstruktoren Objektprototypen Objekt-Iterables Objektsätze Objektkarten Objektreferenz

JS Funktionen

Funktionsdefinitionen Funktionsparameter Funktionsaufruf Funktionsaufruf Funktion Anwenden Funktion binden Funktionsabschlüsse

JS Klassen

Klasseneinführung Klassenvererbung Klasse Static

JS Asynchron

JS Rückrufe JS Asynchron JS Versprechen JS Async/Await

JS HTML DOM

DOM Einführung DOM Methoden DOM Dokumentieren DOM Elemente DOM HTML DOM Formen DOM CSS DOM Animationen DOM Veranstaltungen DOM Ereignis-Listener DOM Navigation DOM Knoten DOM Sammlungen DOM Knotenlisten

JS Browser BOM

JS Fenster JS Bildschirm JS Standort JS Geschichte JS Navigator JS Popup-Benachrichtigung JS Zeitliche Koordinierung JS Cookies

JS Web APIs

Web API Einführung Web Formen API Web Geschichte API Web Lagerung API Web Arbeiter API Web Bringen API Web Geolokalisierung API

JS AJAX

AJAX Einführung AJAX XMLHttp AJAX Anfrage AJAX Antwort AJAX XML-Datei AJAX PHP AJAX ASP AJAX Datenbank AJAX Anwendungen AJAX Beispiele

JS JSON

JSON Einführung JSON Syntax JSON vs XML JSON Datentypen JSON Analysieren JSON Stringifizieren JSON Objekte JSON Arrays JSON Server JSON PHP JSON HTML JSON JSONP

JS vs jQuery

jQuery Selektoren jQuery HTML jQuery CSS jQuery DOM

JS Grafik

JS Grafik JS Canvas JS Plotly JS Chart.js JS Google Chart JS D3.js

JS Beispiele

JS Beispiele JS HTML DOM JS HTML Input JS HTML Objekte JS HTML Veranstaltungen JS Browser JS Editor JS Übungen JS Quiz JS Boot Camp JS Zertifikat

JS Verweise

JavaScript Objekte HTML DOM Objekte

JavaScript. W3Schools auf Deutsch. Unterricht für Anfänger

Ua En Es Fr

JavaScript -Ereignisse

❮ Prev Next ❯

HTML-Ereignisse sind "Dinge", die mit HTML-Elementen passieren.

Wenn JavaScript in HTML-Seiten verwendet wird, kann JavaScript auf diese Ereignisse "reagieren".

HTML-Ereignisse

Ein HTML-Ereignis kann etwas sein, was der Browser tut, oder etwas, was ein Benutzer tut.

Hier sind einige Beispiele für HTML-Ereignisse:

  • Eine HTML-Webseite wurde vollständig geladen
  • Ein HTML-Eingabefeld wurde geändert
  • Eine HTML-Schaltfläche wurde angeklickt

Wenn Ereignisse eintreten, möchten Sie oft etwas unternehmen.

Mit JavaScript können Sie Code ausführen, wenn Ereignisse erkannt werden.

HTML ermöglicht das Hinzufügen von Event-Handler-Attributen mit JavaScript-Code zu HTML-Elementen.

Mit einfachen Anführungszeichen:

<elementevent='some JavaScript'>

Mit doppelten Anführungszeichen:

<elementevent="some JavaScript">

Im folgenden Beispiel wird einem <button>-Element ein onclick-Attribut (mit Code) hinzugefügt:

Beispiel

<button onclick="document.getElementById('demo').innerHTML = Date()">The time is?</button>
Try it Yourself »

Im obigen Beispiel ändert der JavaScript-Code den Inhalt des Elements mit id="demo".

Im nächsten Beispiel ändert der Code den Inhalt seines eigenen Elements (mit this.innerHTML):

Beispiel

<button onclick="this.innerHTML = Date()">The time is?</button>
Try it Yourself »

JavaScript-Code ist oft mehrere Zeilen lang. Häufiger sieht man Ereignisattribute, die Funktionen aufrufen:

Beispiel

<button onclick="displayDate()">The time is?</button>
Try it Yourself »

Häufige HTML-Ereignisse

Hier ist eine Liste einiger häufiger HTML-Ereignisse:

Ereignis Beschreibung
onchange Ein HTML-Element wurde geändert
onclick Der Benutzer klickt auf ein HTML-Element
onmouseover Der Benutzer bewegt die Maus über ein HTML-Element
onmouseout Der Benutzer bewegt die Maus von einem HTML-Element weg
onkeydown Der Benutzer drückt eine Taste auf der Tastatur
onload Der Browser hat die Seite fertig geladen

Die Liste ist viel länger: W3Schools JavaScript Reference HTML DOM Events.

JavaScript-Ereignishandler

Ereignishandler können zum Verarbeiten und Überprüfen von Benutzereingaben, Benutzeraktionen und Browseraktionen verwendet werden:

  • Dinge, die jedes Mal ausgeführt werden sollen, wenn eine Seite geladen wird
  • Dinge, die ausgeführt werden sollen, wenn die Seite geschlossen wird
  • Aktion, die ausgeführt werden soll, wenn ein Benutzer auf eine Schaltfläche klickt
  • Inhalt, der überprüft werden soll, wenn ein Benutzer Daten eingibt
  • Und mehr ...

Um JavaScript mit Ereignissen arbeiten zu lassen, können viele verschiedene Methoden verwendet werden:

  • HTML-Ereignisattribute können JavaScript-Code direkt ausführen
  • HTML-Ereignisattribute können JavaScript-Funktionen aufrufen
  • Sie können HTML-Elementen Ihre eigenen Eventhandler-Funktionen zuweisen
  • Sie können verhindern, dass Ereignisse gesendet oder verarbeitet werden
  • Und mehr ...

In den HTML-DOM-Kapiteln erfahren Sie viel mehr über Ereignisse und Ereignishandler.

Testen Sie sich selbst mit Übungen

Übung:

Das Element <button> sollte etwas tun, wenn jemand darauf klickt. Versuchen Sie, das Problem zu beheben!

<button ="alert('Hello')">Click me.</button>

❮ Prev Next ❯