Ereignisverwaltung
Ereignisverwaltung
Ereignisverwaltung ist eine kostenlose jQuery Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 1. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des jQuery Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der jQuery Academy-Kurs umfasst insgesamt 1 Lektionen.
Einführung
Hallo,
Bei der Einführung in jQuery haben wir gesagt, dass es nicht nur zur DOM-Manipulation dient, sondern auch über eine wichtige Funktion wie die Ereignisverwaltung verfügt.
Was ist ein Ereignis
Lernen wir zunächst, was ein Ereignis ist.
Ereignisse werden im Webbrowser meistens durch den Benutzer ausgelöst.
Wir können viele benutzergesteuerte Ereignisse definieren, etwa das Berühren des Bildschirms durch mobile Benutzer, das Bewegen der Maus durch Webbenutzer, das Klicken auf eine Schaltfläche oder das Scrollen mit der Maus.
Da JavaScript eine Programmiersprache ist, steuern wir den Ablauf unseres Programms entsprechend den auftretenden Ereignissen.
Klick
click()-Methode
Beginnen wir mit dem einfachsten Ereignis: dem Klickereignis einer Schaltfläche.
Die click()-Methode wird verwendet, um unsere Klickereignisse in HTML zu verwalten.
Mit der folgenden Syntax können wir auf das Klickereignis reagieren.
$(selector).click(handler);
- Mit $(selector) wählen wir das Element aus, dessen Ereignis wir überwachen möchten.
- handler steht für die Callback-Funktion, die im Falle eines Klicks ausgeführt wird.
Erstellen wir ein Beispiel.
<button>Button</button>
<script>
/* Callback will run as son as
the DOM is loaded
*/
$(document).ready(function(){
$('button').click(function(){
alert('Button clicked');
});
})
</script>Warnung
Die click-Methode verarbeitet den Klick auf die Schaltfläche mit der anonymen Funktion, die sie als Argument erhält.
Doppelklick
Mausereignisse
Im Folgenden sehen Sie einige Ereignisse, die der Benutzer mit der Maus auslösen kann.
Klicken wir auf die Schaltfläche!
<button>Coddy Button</button>
<script>
// runs when button is click
$("button").click(function(){
$('button').text('Clicked')
});
// runs when button is double click
$("button").dblclick(function(){
$('button').text('Double Clicked')
});
</script>Mausereignisse
Beachten Sie, dass einige Ereignisse in der mobilen App nicht getestet werden können, da Ereignisse wie Hover auf mobilen Geräten nicht ausgeführt werden können!
<button>Coddy Button</button>
<script>
/* It runs when the mouse
hovers over the button
*/
$("button").hover(function(){
$('button').text('Hovering...')
});
/*
It runs when the mouse
enters an element
*/
$("button").mouseenter(function(){
$('button').text('Mouse enter...')
});
/*
It runs when the mouse leaves
an element
*/
$("button").mouseleave(function(){
$('button').text('Mouse Leave...')
});
</script>Tastaturereignisse
Nun lernen wir, wie man Tastaturereignisse verarbeitet.
Definieren wir zunächst ein Eingabefeld und verarbeiten anschließend die von dieser Eingabe ausgelösten Ereignisse.
<input type="text" id="name"
name="yourname"
placeholder="Enter your name" />
<p>Keyboard event: <span id="state"></span></p>
<script>
/*
Callback will run as son as
the DOM is loaded
*/
$(document).ready(function(){
/*
It runs every time we press
the keyboard key on the keyboard.
*/
$('#name').keydown(function(){
$('#state').text('Key down')
});
/*
It runs when we take our finger
off the keyboard key
*/
$('#name').keyup(function(){
$('#state').text('Key up')
});
// Runs when the user focuses on input.
$('#name').focus(function(){
$('#state').text('Focus')
});
/*
It works when we unfocus
from an input on the keyboard.
*/
$('#name').blur(function(){
$('#state').text('Blur')
});
})
</script>Formularereignisse
Mit jQuery können wir auch Ereignisse verarbeiten, die in Formularen auftreten.
Verhaltensweisen wie die Eingabe von Daten in ein Eingabefeld oder die Auswahl eines Eintrags aus einem Auswahlfeld sind allesamt Formulareignisse.
Beispiel für Formulareignisse
In unserem folgenden Code werden mehrere Formulareignisse veranschaulicht.
*
listen to the form with the coddyForm
id and run when submit button clicked
*/
$("#coddyForm").submit(
function(event){
});Window-Ereignisse
Sehen wir uns zum Schluss die Window-Ereignisse an.
Das vielleicht wichtigste Window-Ereignis ist $(document).ready(). Da wir dieses Ereignis jedoch bereits früher kennengelernt haben, beschäftigen wir uns nun mit anderen Window-Ereignissen.
resize-Methode
resize()-Methode
Die resize-Methode wird an das Window-Objekt des Browsers gebunden und ausgelöst, wenn sich die Fenstergröße ändert.
const window = {};
const $ = (obj) => ({
resize: (callback) => {
console.log("Resize event handler would be attached here.");
}
});
$(window).resize(function() {
//trigging when user change windows size
});scroll-Methode
scroll()-Methode
Die scroll()-Methode wird mit einem scrollbaren Element oder dem Window-Objekt verbunden und ausgelöst, wenn der Benutzer die entsprechende Komponente scrollt.
$(window).scroll(function() {
//Calling when user scroll the window
});
$('#my-scrollable-element').scroll(function() {
//Calling when user scroll the cursor
//that inside the #my-scrollable-element element
});Herzlichen Glückwunsch
Herzlichen Glückwunsch 🎉
Wir haben die Ereignisverwaltung in jQuery gelernt.
Im nächsten Abschnitt lernen wir die Lektion zum Erstellen von Animationen mit jQuery kennen.
Lerne JavaScript mit einem KI-Tutor — kostenlos
Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.
- Kurse
- 22
- Lektionen
- 48
Häufig gestellte Fragen
Ist die Lektion „Ereignisverwaltung“ kostenlos?
Ja — der vollständige Text von „Ereignisverwaltung“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des jQuery Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der jQuery Academy-Kurs umfasst insgesamt 1 Lektionen.
Was lerne ich in „Ereignisverwaltung“?
Ereignisverwaltung Du übst jQuery Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um jQuery Academy zu starten?
Keine Vorkenntnisse erforderlich. jQuery Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 1.
Wie lange dauert die Lektion „Ereignisverwaltung“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser jQuery Academy-Lektion Code schreiben und ausführen?
Ja. Jede jQuery Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.