{"id":92281,"date":"2022-10-12T22:16:40","date_gmt":"2022-10-13T03:16:40","guid":{"rendered":"https:\/\/blogging-techies.com\/sw\/hur-man-anvander-handelseavlyssnare-i-javascript\/"},"modified":"2022-10-12T22:16:40","modified_gmt":"2022-10-13T03:16:40","slug":"hur-man-anvander-handelseavlyssnare-i-javascript","status":"publish","type":"post","link":"https:\/\/blogging-techies.com\/sw\/hur-man-anvander-handelseavlyssnare-i-javascript\/","title":{"rendered":"Hur man anv\u00e4nder h\u00e4ndelseavlyssnare i JavaScript"},"content":{"rendered":"
\n

M\u00e5nga webbapplikationer f\u00f6rlitar sig p\u00e5 n\u00e5gon form av evenemang f\u00f6r att utf\u00f6ra sina funktioner. Vid n\u00e5gon tidpunkt interagerar en m\u00e4nniska med sitt gr\u00e4nssnitt, vilket genererar en h\u00e4ndelse. Dessa m\u00e4nniskodrivna h\u00e4ndelser f\u00f6rlitar sig vanligtvis p\u00e5 en kringutrustning, som en mus eller ett tangentbord.<\/p>\n

N\u00e4r en enhet skapar en h\u00e4ndelse kan programmet lyssna efter det, f\u00f6r att veta n\u00e4r det ska utf\u00f6ra ett specifikt beteende. I den h\u00e4r sj\u00e4lvstudien f\u00e5r du l\u00e4ra dig hur du lyssnar efter h\u00e4ndelser med JavaScript.<\/p>\n

<\/span> Vad \u00e4r h\u00e4ndelsestyrd programmering?<\/span><\/h2>\n

H\u00e4ndelsedriven programmering \u00e4r namnet p\u00e5 ett paradigm som f\u00f6rlitar sig p\u00e5 exekveringen av en h\u00e4ndelse f\u00f6r att utf\u00f6ra sina funktioner. Det \u00e4r m\u00f6jligt att skapa ett evenemangsdrivet program i vilket programmeringsspr\u00e5k som helst p\u00e5 h\u00f6g niv\u00e5. Men h\u00e4ndelsestyrd programmering \u00e4r vanligast i spr\u00e5k som JavaScript som integreras med ett anv\u00e4ndargr\u00e4nssnitt.<\/p>\n

<\/span> Vad \u00e4r en evenemangslyssnare?<\/span><\/h2>\n

En h\u00e4ndelseavlyssnare \u00e4r en funktion som initierar en f\u00f6rdefinierad process om en specifik h\u00e4ndelse intr\u00e4ffar. S\u00e5 en h\u00e4ndelseavlyssnare \u201clyssnar\u201d efter en \u00e5tg\u00e4rd och anropar sedan en funktion som utf\u00f6r en relaterad uppgift. Denna h\u00e4ndelse kan ha en av m\u00e5nga former. Vanliga exempel inkluderar mush\u00e4ndelser, tangentbordsh\u00e4ndelser och f\u00f6nsterh\u00e4ndelser.<\/p>\n

<\/span> Skapa en h\u00e4ndelseavlyssnare med JavaScript<\/span><\/h2>\n

Du kan lyssna efter h\u00e4ndelser p\u00e5 alla element i DOM. JavaScript har en addEventListener()<\/strong> funktion som du kan anropa vilket element som helst p\u00e5 en webbsida. De addEventListener() <\/strong>funktion \u00e4r en metod f\u00f6r att EventTarget<\/strong> gr\u00e4nssnitt. Alla objekt som st\u00f6der h\u00e4ndelser implementerar detta gr\u00e4nssnitt. Detta inkluderar f\u00f6nstret, dokumentet och enskilda element p\u00e5 sidan.<\/p>\n

Funktionen addEventListener() har f\u00f6ljande grundl\u00e4ggande struktur:<\/p>\n

element.addEventListener(\"event\", functionToExecute);<\/pre>\n
Var:<\/p>\n
  de element<\/strong> kan representera vilken HTML-tag som helst (fr\u00e5n en knapp till ett stycke). \u201ch\u00e4ndelse\u201d<\/strong> \u00e4r en str\u00e4ng som namnger en specifik, igenk\u00e4nd handling functionToExecute<\/strong> \u00e4r en referens till en befintlig funktion  <\/p>\n
L\u00e5t oss skapa f\u00f6ljande webbsida som har n\u00e5gra HTML-element:<\/p>\n
<!DOCTYPE html><html lang=\"en\"><head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>Document<\/title><\/head><body><div id=\"home\"><h1 class=\"mainHeading\">Welcome<\/h1><p>Hello, welcome to my website.<\/p><button class=\"btn\" id=\"btn=1\">Learn More<\/button><\/div><div id=\"about\"><h2 class=subheading>User Info<\/h2><label for=\"username\">User Name: <\/label><input type=\"text\" id=\"username\"><button class=\"btn\" id=\"btn-2\">Submit<\/button><\/div><script src=\"https:\/\/ipotek.net\/hur-man-anvander-handelseavlyssnare-i-javascript\/app.js\"><\/script><\/body><\/html><\/pre>\n
HTML-koden ovan skapar en enkel sida som l\u00e4nkar till en JavaScript-fil som heter app.js<\/strong>.  De app.js<\/strong> filen kommer att inneh\u00e5lla koden f\u00f6r att st\u00e4lla in h\u00e4ndelseavlyssnare.  S\u00e5 om du vill initiera en specifik process n\u00e4r en anv\u00e4ndare klickar p\u00e5 den f\u00f6rsta knappen p\u00e5 webbsidan, \u00e4r det h\u00e4r filen att skapa den i.<\/p>\n
<\/span>Filen app.js<\/span><\/h3>\n
document.querySelector('.btn').addEventListener(\"click\", clickDemo)function clickDemo(){console.log(\"Hi there\")}<\/pre>\n
JavaScript-koden ovan kommer \u00e5t den f\u00f6rsta knappen p\u00e5 sidan med hj\u00e4lp av querySelector()<\/strong> fungera.  Den l\u00e4gger sedan till en h\u00e4ndelseavlyssnare till detta element med hj\u00e4lp av addEventListener()<\/strong> metod.  Den specifika h\u00e4ndelse den lyssnar efter har namnet \u201cklick\u201d.  N\u00e4r knappen aktiverar den h\u00e4ndelsen kommer lyssnaren att anropa clickDemo() <\/strong>fungera.<\/p>\n
De clickDemo()<\/strong> funktionen skriver ut \u201cHej d\u00e4r\u201d till webbl\u00e4sarkonsolen.  Varje g\u00e5ng du klickar p\u00e5 knappen b\u00f6r du se denna utdata i din konsol.<\/p>\n
<\/span>\u201cKlicka\u201d H\u00e4ndelseutg\u00e5ng<\/span><\/h3>\n
\n<\/figure>\n
<\/span>  Vad \u00e4r Mouse Events?<\/span><\/h2>\n
JavaScript har en MouseEvent <\/strong>gr\u00e4nssnitt som representerar h\u00e4ndelser som intr\u00e4ffar p\u00e5 grund av en anv\u00e4ndares interaktion med sin mus.  Flera evenemang anv\u00e4nder MouseEvent<\/strong> gr\u00e4nssnitt.  Dessa evenemang inkluderar f\u00f6ljande:<\/p>\n
  klicka dblklicka mus Flytta musen \u00f6ver musen ut musen upp musen ner  <\/p>\n
De klick<\/strong> h\u00e4ndelse intr\u00e4ffar n\u00e4r en anv\u00e4ndare trycker och sl\u00e4pper en musknapp medan dess pekare \u00e4r \u00f6ver ett element.  Detta \u00e4r precis vad som h\u00e4nde i f\u00f6reg\u00e5ende exempel.  Som du kan se fr\u00e5n listan ovan kan mush\u00e4ndelser ta m\u00e5nga former.<\/p>\n
En annan vanlig mush\u00e4ndelse \u00e4r dblclick<\/strong>, som st\u00e5r f\u00f6r dubbelklick.  Detta aktiveras n\u00e4r en anv\u00e4ndare klickar p\u00e5 en musknapp tv\u00e5 g\u00e5nger i snabb f\u00f6ljd.  En anm\u00e4rkningsv\u00e4rd sak med addEventListener()<\/strong> funktionen \u00e4r att du kan anv\u00e4nda den f\u00f6r att tilldela flera h\u00e4ndelseavlyssnare till ett enda element.<\/p>\n
<\/span>L\u00e4gga till en dblclick-h\u00e4ndelse till den f\u00f6rsta knappen<\/span><\/h3>\n
document.querySelector('.btn').addEventListener(\"dblclick\", dblclickDemo)function dblclickDemo(){alert(\"This is a demonstration of how to create a double-click event\")}<\/pre>\n
Om du l\u00e4gger till koden ovan i app.js-filen skapas en andra h\u00e4ndelseavlyssnare f\u00f6r den f\u00f6rsta knappen p\u00e5 webbsidan.  S\u00e5 om du klickar p\u00e5 den f\u00f6rsta knappen tv\u00e5 g\u00e5nger skapas f\u00f6ljande varning i webbl\u00e4saren:<\/p>\n
\n<\/figure>\n
  I bilden ovan ser du varningen som genereras, och du ser ocks\u00e5 att ytterligare tv\u00e5 \u201cHej d\u00e4r\u201d-utg\u00e5ngar finns i konsolen.  Detta beror p\u00e5 att en dubbelklicksh\u00e4ndelse \u00e4r en kombination av tv\u00e5 klickh\u00e4ndelser och det finns h\u00e4ndelseavlyssnare f\u00f6r b\u00e5da klick<\/strong> och den dblclick <\/strong>evenemang.<\/p>\n
Namnen p\u00e5 de andra mush\u00e4ndelserna i listan beskriver deras beteende.  De musen<\/strong> h\u00e4ndelse intr\u00e4ffar varje g\u00e5ng en anv\u00e4ndare flyttar sin mus n\u00e4r mark\u00f6ren \u00e4r \u00f6ver ett element.  De musupp<\/strong> h\u00e4ndelse intr\u00e4ffar n\u00e4r en anv\u00e4ndare h\u00e5ller ned en knapp \u00f6ver ett element och sedan sl\u00e4pper det.<\/p>\n
<\/span>  Vad \u00e4r tangentbordsh\u00e4ndelser?<\/span><\/h2>\n
JavaScript har en KeyboardEvent <\/strong>gr\u00e4nssnitt.  Detta lyssnar efter interaktioner mellan en anv\u00e4ndare och deras tangentbord.  F\u00f6rr, KeyboardEvent<\/strong> hade tre h\u00e4ndelsetyper.  Men JavaScript har sedan dess utfasat knapptryckning<\/strong> h\u00e4ndelse.<\/p>\n
Allts\u00e5 knappsats<\/strong> och nyckel ner<\/strong> h\u00e4ndelser \u00e4r de enda tv\u00e5 rekommenderade tangentbordsh\u00e4ndelserna, vilket \u00e4r allt du beh\u00f6ver.  De nyckel ner<\/strong> h\u00e4ndelse intr\u00e4ffar n\u00e4r en anv\u00e4ndare trycker ner en tangent, och knappsats<\/strong> h\u00e4ndelse intr\u00e4ffar n\u00e4r en anv\u00e4ndare sl\u00e4pper den.<\/p>\n
Om du \u00e5terg\u00e5r till HTML-exemplet ovan, \u00e4r det b\u00e4sta st\u00e4llet att l\u00e4gga till en tangentbordsh\u00e4ndelselyssnare p\u00e5 inmatning<\/strong> element.<\/p>\n
<\/span>L\u00e4gga till en Keyboard Event Listener till app.js-filen<\/span><\/h3>\n
let greetings = document.querySelector('p');document.querySelector('input').addEventListener(\"keyup\", captureInput)function captureInput(e){greetings.innerText = (`Hello ${e.target.value}, welcome to my website.`)}<\/pre>\n
Koden ovan anv\u00e4nder querySelector()<\/strong> funktion f\u00f6r att komma \u00e5t stycket och inmatning <\/strong>element p\u00e5 sidan.  Den kallar sedan addEventListener()<\/strong> metod p\u00e5 inmatning<\/strong> element, som lyssnar efter knappsats<\/strong> h\u00e4ndelse.  N\u00e4rhelst a knappsats<\/strong> h\u00e4ndelse intr\u00e4ffar, den captureInput()<\/strong> funktionen tar nyckelv\u00e4rdet och l\u00e4gger till det i stycket p\u00e5 sidan.  De e<\/strong> parametern representerar h\u00e4ndelsen, som JavaScript tilldelar automatiskt.  Det h\u00e4r h\u00e4ndelseobjektet har en egenskap, target, som \u00e4r en referens till elementet som anv\u00e4ndaren interagerade med.<\/p>\n
I det h\u00e4r exemplet \u00e4r etiketten f\u00e4st p\u00e5 inmatning<\/strong> f\u00e4ltet beg\u00e4r ett anv\u00e4ndarnamn.  Om du skriver ditt namn i <\/strong>inmatning <\/strong>f\u00e4ltet kommer webbsidan att se ut ungef\u00e4r s\u00e5 h\u00e4r:<\/p>\n
\n<\/figure>\n
  Stycket inneh\u00e5ller nu inmatningsv\u00e4rdet som i exemplet ovan \u00e4r \u201cJane Doe\u201d.<\/p>\n
<\/span>  addEventListener f\u00e5ngar alla typer av anv\u00e4ndarinteraktion<\/span><\/h2>\n
Den h\u00e4r artikeln introducerade dig till addEventListener()<\/strong> metod, samt flera mus- och tangentbordsh\u00e4ndelser som du kan anv\u00e4nda med den.  Vid det h\u00e4r laget vet du hur du lyssnar efter en viss h\u00e4ndelse och hur du skapar en funktion som svarar p\u00e5 den.<\/p>\n
De addEventListener<\/strong> ger dock extra kapacitet via sin tredje parameter.  Du kan anv\u00e4nda den f\u00f6r att styra h\u00e4ndelseutbredning: ordningen i vilken h\u00e4ndelser flyttas fr\u00e5n element till sina f\u00f6r\u00e4ldrar eller barn.<\/p>\n
    Om f\u00f6rfattaren<\/strong><\/p>\n
            Kadeisha Kean (39 artiklar publicerade)
<\/strong><\/p>\n
Kadeisha Kean \u00e4r en full-stack mjukvaruutvecklare och teknisk\/teknikskribent.  Hon har den distinkta f\u00f6rm\u00e5gan att f\u00f6renkla n\u00e5gra av de mest komplexa tekniska koncepten;  producera material som l\u00e4tt kan f\u00f6rst\u00e5s av alla nyb\u00f6rjare.  Hon brinner f\u00f6r att skriva, utveckla intressant programvara och att resa runt i v\u00e4rlden (genom dokument\u00e4rer).<\/p>\n
                            Mer fr\u00e5n Kadeisha Kean<\/p>\n
<\/span>Prenumerera p\u00e5 v\u00e5rt nyhetsbrev<\/span><\/h4>\n
G\u00e5 med i v\u00e5rt nyhetsbrev f\u00f6r tekniska tips, recensioner, free e-b\u00f6cker och exklusiva erbjudanden!<\/p>\n
Klicka h\u00e4r f\u00f6r att prenumerera<\/p>\n<\/p><\/div>\n  
\n
\n
Table of Contents<\/p>\nToggle<\/span><\/path><\/svg><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n