Håndtering af hændelser
Håndtering af hændelser
Håndtering af hændelser er en gratis jQuery Academy-lektion på CoddyKit. Dette er lektion 1 af 1. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i jQuery Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. jQuery Academy-kurset indeholder 1 lektioner i alt.
Introduktion
Hej
Da vi introducerede jQuery, sagde vi, at det ikke kun handler om DOM-manipulation, men også om en vigtig funktion som hændelseshåndtering.
hvad er en hændelse
Lad os først lære, hvad en hændelse er.
Hændelser genereres for det meste af brugeren i webbrowseren.
Vi kan definere mange brugerudløste hændelser, f.eks. når mobilbrugere trykker på skærmen, webbrugere bevæger musen, klikker på en knap eller ruller med musen.
Da JavaScript er et programmeringssprog, styrer vi programmets flow ud fra de hændelser, der opstår.
klik
click()-metoden
Lad os begynde med den enkleste hændelse: knapklik-hændelsen.
click()-metoden bruges til at håndtere vores klikhændelser i HTML.
Vi kan lytte efter klikhændelsen med syntaksen nedenfor.
$(selector).click(handler);
- Med $(selector) vælger vi det element, der skal lyttes til.
- Handler repræsenterer callback-funktionen, der køres ved et klik.
Lad os lave et eksempel.
<button>Button</button>
<script>
/* Callback will run as son as
the DOM is loaded
*/
$(document).ready(function(){
$('button').click(function(){
alert('Button clicked');
});
})
</script>Advarsel
Click-metoden håndterer knapklikket med den anonyme funktion, som den tager som argument.
dobbeltklik
musehændelser
Nedenfor er nogle hændelser, som brugeren kan udløse med musen.
Lad os klikke på knappen!
<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>musehændelser
Bemærk, at nogle hændelser ikke kan testes i mobilappen, da hændelser som Hover ikke kan udføres på mobilenheder!
<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>tastaturhændelser
Nu lærer vi at håndtere tastaturhændelser.
Lad os først definere input og derefter håndtere de hændelser, som dette input genererer.
<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>formularhændelser
Med jQuery kan vi også håndtere hændelser, der opstår i formularer.
Handlinger som at indtaste data i et inputfelt eller vælge noget i en select-boks er alle formularhændelser.
eksempel på formularhændelser
I vores kode nedenfor vises mere end én formularhændelse som eksempel.
*
listen to the form with the coddyForm
id and run when submit button clicked
*/
$("#coddyForm").submit(
function(event){
});hændelser for vinduet
Lad os til sidst se på hændelser for vinduet.
Måske er den vigtigste hændelse for vinduet $(document).ready(), men da vi tidligere har lært om denne hændelse, lærer vi nu om andre hændelser for vinduet.
resize-metoden
resize()-metoden
Resize-metoden knyttes til browserens window-objekt og udløses, når vinduets størrelse ændres.
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-metoden
scroll()-metoden
scroll()-metoden knyttes til et element, der kan rulles, eller til et window-objekt og udløses, når brugeren ruller i den tilsvarende komponent.
$(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
});Tillykke
Tillykke 🎉
Vi har lært håndtering af hændelser i jQuery.
I næste afsnit lærer vi om lektionen om animationer med jQuery.
Lær JavaScript med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 22
- Lektioner
- 48
Ofte stillede spørgsmål
Er lektionen “Håndtering af hændelser” gratis?
Ja — alle 3 lektioner i læringssporet jQuery Academy, inklusive “Håndtering af hændelser”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. jQuery Academy-kurset indeholder 1 lektioner i alt.
Hvad lærer jeg i “Håndtering af hændelser”?
Håndtering af hændelser Du øver dig i jQuery Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på jQuery Academy?
Der kræves ingen tidligere erfaring. jQuery Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 1 af 1.
Hvor lang tid tager lektionen “Håndtering af hændelser”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne jQuery Academy-lektion?
Ja. Alle jQuery Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.