6.1 Ereignisobjekt
JavaScript bietet ein mächtiges Ereignissystem, das die Nachverfolgung verschiedener Benutzeraktionen und anderer Ereignisse im Browser ermöglicht. Ein wichtiger Aspekt bei der Arbeit mit Ereignissen ist das Ereignisobjekt, das Informationen über das Ereignis enthält und Methoden zu dessen Verarbeitung bereitstellt.
Wenn ein Ereignis eintritt, erstellt der Browser ein Ereignisobjekt, das Informationen über dieses Ereignis enthält. Dieses Objekt wird als Argument an den Ereignishandler übergeben.
Eigenschaften des Ereignisobjekts:
type: der Typ des Ereignisses (z.B.click,keydown).target: das Element, auf dem das Ereignis aufgetreten ist.currentTarget: das Element, an das der Ereignishandler gebunden ist.eventPhase: die Phase, in der sich das Ereignis befindet (capture, target, bubbling).bubbles: ein boolescher Wert, der angibt, ob das Ereignis ein Bubbling-Ereignis ist.cancelable: ein boolescher Wert, der angibt, ob das Ereignis abgebrochen werden kann.defaultPrevented: ein boolescher Wert, der angibt, ob die Standardaktion verhindert wurde.timeStamp: der Zeitpunkt, zu dem das Ereignis erstellt wurde.isTrusted: ein boolescher Wert, der angibt, ob das Ereignis vom Benutzer oder von einem Skript initiiert wurde.
Methoden des Ereignisobjekts:
preventDefault(): verhindert die Standardaktion, die mit dem Ereignis verknüpft ist.stopPropagation(): stoppt die Weitergabe des Ereignisses.stopImmediatePropagation(): stoppt die Weitergabe des Ereignisses und verhindert die Ausführung anderer Ereignishandler für das aktuelle Element.
Beispiel für die Verwendung eines Ereignisobjekts:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Event Object Beispiel</title>
</head>
<body>
<button id="myButton">Click me</button>
<script>
const button = document.getElementById('myButton');
button.addEventListener('click', function(event) {
console.log('Event type:', event.type); // Ausgabe: click
console.log('Event target:', event.target); // Ausgabe: <button id="myButton">Click me</button>
console.log('Current target:', event.currentTarget); // Ausgabe: <button id="myButton">Click me</button>
console.log('Event phase:', event.eventPhase); // Ausgabe: 2 (Zielphase)
console.log('Bubbles:', event.bubbles); // Ausgabe: true
console.log('Cancelable:', event.cancelable); // Ausgabe: true
console.log('Time stamp:', event.timeStamp); // Ausgabe der Zeit in Millisekunden
console.log('Is trusted:', event.isTrusted); // Ausgabe: true
});
</script>
</body>
</html>
6.2. Klick-Ereignisse (Mouse Events)
Mausereignisse werden generiert, wenn der Benutzer mit einem Element über die Maus interagiert:
click: Klick-Ereignisdblclick: Doppel-Klick-Ereignismousedown: Ereignis beim Drücken der Maustastemouseup: Ereignis beim Loslassen der Maustastemousemove: Mausbewegungsereignismouseover: Ereignis beim Überfahren des Elements mit der Mausmouseout: Ereignis beim Verlassen des Elements mit der Maus
Beispiel:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Mouse Events Beispiel</title>
</head>
<body>
<button id="myButton">Click Me</button>
<script>
const button = document.getElementById('myButton');
button.addEventListener('click', function(event) {
console.log('Button clicked');
console.log('Event type:', event.type);
console.log('Target element:', event.target);
});
</script>
</body>
</html>
6.3 Ladeereignisse (Load Events)
Ladeereignisse treten auf, wenn eine Ressource das Laden abgeschlossen hat:
load: Ereignis, das auftritt, wenn eine Ressource/Seite vollständig geladen istDOMContentLoaded: Ereignis, das auftritt, wenn das anfängliche HTML-Dokument ohne Abwarten des vollständigen Ladens von Stylesheets, Bildern und Frames geladen und geparst ist
Beispiel:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Load Events Beispiel</title>
</head>
<body>
<script>
window.addEventListener('load', function(event) {
console.log('Window fully loaded');
});
document.addEventListener('DOMContentLoaded', function(event) {
console.log('DOM fully loaded and parsed');
});
</script>
</body>
</html>
6.4 Fokus-Ereignisse (Focus Events)
Fokusereignisse werden generiert, wenn ein Element den Fokus erhält oder verliert.
focus: Ereignis, das auftritt, wenn ein Element den Fokus erhältblur: Ereignis, das auftritt, wenn ein Element den Fokus verliert
Beispiel:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Focus Events Beispiel</title>
</head>
<body>
<input type="text" id="textInput" placeholder="Type something...">
<script>
const input = document.getElementById('textInput');
input.addEventListener('focus', function(event) {
console.log('Input field focused');
});
input.addEventListener('blur', function(event) {
console.log('Input field lost focus');
});
</script>
</body>
</html>
6.5 Tastatur-Ereignisse (Keyboard Events)
Tastatur-Ereignisse werden generiert, wenn der Benutzer Tasten auf der Tastatur drückt:
keydown: Ereignis, das auftritt, wenn eine Taste gedrückt wirdkeyup: Ereignis, das auftritt, wenn eine Taste losgelassen wirdkeypress: Ereignis, das auftritt, wenn eine Taste gedrückt und losgelassen wird (veraltetes Ereignis, wird nicht zur Verwendung empfohlen)
Beispiel:
HTML
<html>
<head>
<title>Keyboard Events Beispiel</title>
</head>
<body>
<input type="text" id="textInput" placeholder="Type something...">
<script>
const input = document.getElementById('textInput');
input.addEventListener('keydown', function(event) {
console.log('Key down:', event.key);
});
input.addEventListener('keyup', function(event) {
console.log('Key up:', event.key);
});
</script>
</body>
</html>
GO TO FULL VERSION