Eventhantering
Eventhantering
Eventhantering är en gratis lektion i jQuery Academy på CoddyKit. Detta är lektion 1 av 1. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för jQuery Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i jQuery Academy innehåller totalt 1 lektioner.
Introduktion
Hej!
När vi introducerade jQuery sade vi att det inte bara handlar om DOM-manipulation, utan även om en viktig funktion som händelsehantering.
vad är en händelse
Först ska vi lära oss vad en händelse är.
Händelser genereras oftast av användaren i webbläsaren.
Vi kan definiera många användarutlösta händelser, till exempel när mobilanvändare trycker på skärmen, webbanvändare flyttar musen, klickar på en knapp eller rullar med musen.
Eftersom Javascript är ett programmeringsspråk kommer vi att styra programmets flöde utifrån de händelser som inträffar.
klick
Metoden click()
Vi börjar med den enklaste händelsen, knappens klickhändelse.
Metoden click() används för att hantera våra klickhändelser i HTML.
Vi kan lyssna efter klickhändelsen med syntaxen nedan.
$(selector).click(handler);
- Med $(selector) väljer vi vilket element vi ska lyssna på.
- Handler representerar återanropsfunktionen som körs vid ett klick.
Vi skapar ett exempel.
<button>Button</button>
<script>
/* Callback will run as son as
the DOM is loaded
*/
$(document).ready(function(){
$('button').click(function(){
alert('Button clicked');
});
})
</script>Varning
Metoden click hanterar knappklicket med den anonyma funktion som skickas som argument.
dubbelklick
mushändelser
Nedan visas några händelser som användaren kan skapa med musen.
Klicka 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>mushändelser
Observera att vissa händelser inte kan testas i mobilappen, eftersom händelser som Hover inte kan utföras på mobila enheter!
<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>tangentbordshändelser
Nu ska vi lära oss hur man hanterar tangentbordshändelser.
Först definierar vi ett input-element och hanterar sedan händelserna som genereras av detta input-element.
<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>formulärhändelser
Med jQuery kan vi även hantera händelser som inträffar i formulär.
Åtgärder som att ange data i ett input-element eller göra ett val i en select-ruta är exempel på formulärhändelser.
exempel på formulärhändelse
I koden nedan visas flera formulärhändelser som exempel.
*
listen to the form with the coddyForm
id and run when submit button clicked
*/
$("#coddyForm").submit(
function(event){
});fönsterhändelser
Slutligen ska vi titta på fönsterhändelser.
Den kanske viktigaste fönsterhändelsen är $(document).ready(), men eftersom vi redan har lärt oss om den händelsen ska vi titta på andra fönsterhändelser.
metoden resize
Metoden resize()
Metoden resize kopplas till webbläsarens window-objekt och utlöses när fönstrets storlek ändras.
const window = {};
const $ = (obj) => ({
resize: (callback) => {
console.log("Resize event handler would be attached here.");
}
});
$(window).resize(function() {
//trigging when user change windows size
});metoden scroll
Metoden scroll()
Metoden scroll() kopplas till ett rullningsbart element eller ett window-objekt och utlöses när användaren rullar motsvarande 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
});Grattis
Grattis 🎉
Vi har lärt oss händelsehantering i jQuery.
I nästa avsnitt ska vi lära oss lektionen om att skapa animeringar med jQuery.
Lär dig JavaScript med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 22
- Lektioner
- 48
Vanliga frågor
Är lektionen ”Eventhantering” gratis?
Ja – du kan läsa vilka 3 lektioner som helst i lärvägen jQuery Academy, inklusive ”Eventhantering”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i jQuery Academy innehåller totalt 1 lektioner.
Vad lär jag mig i ”Eventhantering”?
Eventhantering Ni övar på jQuery Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig jQuery Academy?
Du behöver inga förkunskaper. Utbildningen i jQuery Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 1 av 1.
Hur lång tid tar lektionen ”Eventhantering”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här jQuery Academy-lektionen?
Ja. Varje jQuery Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.