Många webbapplikationer förlitar sig på någon form av evenemang för att utföra sina funktioner. Vid någon tidpunkt interagerar en människa med sitt gränssnitt, vilket genererar en händelse. Dessa människodrivna händelser förlitar sig vanligtvis på en kringutrustning, som en mus eller ett tangentbord.

När en enhet skapar en händelse kan programmet lyssna efter det, för att veta när det ska utföra ett specifikt beteende. I den här självstudien lär du dig hur du lyssnar efter händelser med JavaScript.

Vad är händelsestyrd programmering?

Händelsedriven programmering är namnet på ett paradigm som förlitar sig på exekveringen av en händelse för att utföra sina funktioner. Det är möjligt att skapa ett evenemangsdrivet program i vilket programmeringsspråk som helst på hög nivå. Men händelsedriven programmering är vanligast i språk som JavaScript som integreras med ett användargränssnitt.

Vad är en evenemangslyssnare?

En händelseavlyssnare är en funktion som initierar en fördefinierad process om en specifik händelse inträffar. Så en händelseavlyssnare "lyssnar" efter en åtgärd och anropar sedan en funktion som utför en relaterad uppgift. Denna händelse kan ha en av många former. Vanliga exempel inkluderar mushändelser, tangentbordshändelser och fönsterhändelser.

Skapa en händelseavlyssnare med JavaScript

Du kan lyssna efter evenemang på vilken som helst element i DOM. JavaScript har en addEventListener() funktion som du kan anropa vilket element som helst på en webbsida. De addEventListener() funktion är en metod för att EventTarget gränssnitt. Alla objekt som stöder händelser implementerar detta gränssnitt. Detta inkluderar fönstret, dokumentet och enskilda element på sidan.

Funktionen addEventListener() har följande grundläggande struktur:

element.addEventListener("händelse", functionToExecute);

Var:

• de element kan representera vilken HTML-tagg som helst (från en knapp till ett stycke)
• de "händelse" är en sträng som namnger en specifik, igenkänd handling
• de functionToExecute är en referens till en befintlig funktion

Låt oss skapa följande webbsida som har några HTML-element:

Välkommen


 Hej, välkommen till min hemsida.


Läs mer





användarinformation

Användarnamn: 

Skicka in

HTML-koden ovan skapar en enkel sida som länkar till en JavaScript-fil som heter app.js. De app.js filen kommer att innehålla koden för att ställa in händelseavlyssnare. Så om du vill initiera en specifik process när en användare klickar på den första knappen på webbsidan, är det här filen att skapa den i.

Filen app.js

document.querySelector('.btn').addEventListener("klicka", klicka på Demo)
function clickDemo(){
 console.log("Hej då")
}

JavaScript-koden ovan kommer åt den första knappen på sidan med hjälp av querySelector() fungera. Den lägger sedan till en händelseavlyssnare till detta element med hjälp av addEventListener() metod. Den specifika händelsen den lyssnar efter har namnet "klick". När knappen aktiverar den händelsen kommer lyssnaren att anropa clickDemo() fungera.

Relaterad: Lär dig hur du använder DOM-väljare

De clickDemo() funktionen skriver ut "Hej där" till webbläsarkonsolen. Varje gång du klickar på knappen bör du se denna utdata i din konsol.

"Klicka" Händelseutgång

Vad är Mouse Events?

JavaScript har en MouseEvent gränssnitt som representerar händelser som inträffar på grund av en användares interaktion med sin mus. Flera evenemang använder MouseEvent gränssnitt. Dessa evenemang inkluderar följande:

• klick
• dblclick
• musen
• för muspekaren
• musen ut
• musupp
• mus ner

De klick händelse inträffar när en användare trycker och släpper en musknapp medan dess pekare är över ett element. Detta är precis vad som hände i föregående exempel. Som du kan se från listan ovan kan mushändelser ta många former.

En annan vanlig mushändelse är dblclick, som står för dubbelklick. Detta aktiveras när en användare klickar på en musknapp två gånger i snabb följd. En anmärkningsvärd sak med addEventListener() funktionen är att du kan använda den för att tilldela flera händelseavlyssnare till ett enda element.

Lägga till en dblclick-händelse till den första knappen

document.querySelector('.btn').addEventListener("dblclick", dblclickDemo)
function dblclickDemo(){
 alert("Detta är en demonstration av hur man skapar en dubbelklickshändelse")
}

Om du lägger till koden ovan i app.js-filen skapas en andra händelseavlyssnare för den första knappen på webbsidan. Så om du klickar på den första knappen två gånger skapas följande varning i webbläsaren:

På bilden ovan ser du varningen som genereras, och du ser också att ytterligare två "Hej där"-utgångar finns i konsolen. Detta beror på att en dubbelklickshändelse är en kombination av två klickhändelser och det finns händelseavlyssnare för båda klick och den dblclick evenemang.

Namnen på de andra mushändelserna i listan beskriver deras beteende. De musen händelse inträffar varje gång en användare flyttar sin mus när markören är över ett element. De musupp händelse inträffar när en användare håller ned en knapp över ett element och sedan släpper det.

Vad är tangentbordshändelser?

JavaScript har en KeyboardEvent gränssnitt. Detta lyssnar efter interaktioner mellan en användare och deras tangentbord. Förr, KeyboardEvent hade tre händelsetyper. Men JavaScript har sedan dess utfasat knapptryckning händelse.

Alltså knappsats och nyckel ner händelser är de enda två rekommenderade tangentbordshändelserna, vilket är allt du behöver. De nyckel ner händelse inträffar när en användare trycker ner en tangent, och knappsats händelse inträffar när en användare släpper den.

Om du återgår till HTML-exemplet ovan, är det bästa stället att lägga till en tangentbordshändelselyssnare på inmatning element.

Lägga till en Keyboard Event Listener till app.js-filen

låt hälsningar = document.querySelector('p');
document.querySelector('input').addEventListener("keyup", captureInput)
function captureInput (e){
 greetings.innerText = (`Hej ${e.target.value}, välkommen till min webbplats.`)
}

Koden ovan använder querySelector() funktion för att komma åt stycket och inmatning element på sidan. Den kallar sedan addEventListener() metod på inmatning element, som lyssnar efter knappsats händelse. Närhelst a knappsats händelse inträffar, den captureInput() funktionen tar nyckelvärdet och lägger till det i stycket på sidan. De e parametern representerar händelsen, som JavaScript tilldelar automatiskt. Det här händelseobjektet har en egenskap, target, som är en referens till elementet som användaren interagerade med.

I det här exemplet är etiketten fäst på inmatning fältet begär ett användarnamn. Om du skriver ditt namn i inmatningsfältet kommer webbsidan att se ut ungefär så här:

Stycket innehåller nu inmatningsvärdet som i exemplet ovan är "Jane Doe".

addEventListener fångar alla typer av användarinteraktion

Den här artikeln introducerade dig till addEventListener() metod, såväl som flera mus- och tangentbordshändelser som du kan använda med den. Vid det här laget vet du hur du lyssnar efter en viss händelse och hur du skapar en funktion som svarar på den.

De addEventListener ger dock extra kapacitet via sin tredje parameter. Du kan använda den för att styra händelseutbredning: ordningen i vilken händelser flyttas från element till sina föräldrar eller barn.

Förstå händelseutbredning i JavaScript

Händelser är en kraftfull JavaScript-funktion. Att förstå hur en webbläsare ställer dem mot element är nyckeln för att bemästra deras användning.

Läs Nästa

Om författaren