Sok webalkalmazás valamilyen eseményre támaszkodik funkcióinak végrehajtásához. Egy bizonyos ponton az ember interakcióba lép a felületükkel, ami eseményt generál. Ezek az ember által vezérelt események általában perifériás eszközökön, például egéren vagy billentyűzeten alapulnak.
Amikor egy eszköz létrehoz egy eseményt, a program figyelni tudja azt, hogy tudja, mikor kell végrehajtani egy adott viselkedést. Ebből az oktatóanyagból megtudhatja, hogyan figyelheti meg az eseményeket JavaScript használatával.
Mi az az eseményvezérelt programozás?
Az eseményvezérelt programozás egy olyan paradigma neve, amely egy esemény végrehajtására támaszkodik a funkcióinak ellátásához. Bármilyen magas szintű programozási nyelven lehetőség van eseményvezérelt program létrehozására. De az eseményvezérelt programozás a legelterjedtebb olyan nyelveken, mint a JavaScript, amelyek integrálódnak a felhasználói felülettel.
Mi az az eseményfigyelő?
Az eseményfigyelő egy olyan funkció, amely egy előre meghatározott folyamatot indít el, ha egy adott esemény bekövetkezik. Tehát az eseményfigyelő „meghallgat” egy műveletet, majd meghív egy funkciót, amely egy kapcsolódó feladatot hajt végre. Ez az esemény számos formát ölthet. Gyakori példák az egéresemények, a billentyűzetesemények és az ablakesemények.
Eseményfigyelő létrehozása JavaScript használatával
Bármelyiken meghallgathatja az eseményeket elem a DOM-ban. A JavaScript rendelkezik egy addEventListener() funkció, amelyet a weboldal bármely elemében meghívhat. A addEventListener() függvény a EventTarget felület. Minden eseményt támogató objektum megvalósítja ezt a felületet. Ez magában foglalja az ablakot, a dokumentumot és az oldal egyes elemeit.
Az addEventListener() függvény alapvető felépítése a következő:
element.addEventListener("esemény", functionToExecute);
Ahol:
- a elem bármilyen HTML címkét képviselhet (gombtól bekezdésig)
- a "esemény" egy karakterlánc, amely egy meghatározott, felismert műveletet nevez meg
- a functionToExecute hivatkozás egy létező függvényre
Hozzuk létre a következő weboldalt, amely néhány HTML elemet tartalmaz:
Dokumentum
Üdvözöljük
Üdvözlöm a weboldalamon.
Felhasználói adatok
A fenti HTML-kód egy egyszerű oldalt hoz létre, amely egy JavaScript-fájlra hivatkozik app.js. A app.js fájl tartalmazza az eseményfigyelők beállításához szükséges kódot. Tehát, ha egy adott folyamatot szeretne elindítani, amikor a felhasználó az első gombra kattint a weboldalon, akkor ebben a fájlban kell létrehozni.
Az app.js fájl
document.querySelector('.btn').addEventListener("kattintás", kattintson a Demo)
function clickDemo(){
console.log ("Sziasztok")
}
A fenti JavaScript-kód a következővel éri el az oldal első gombját querySelector() funkció. Ezután hozzáad egy eseményfigyelőt ehhez az elemhez a segítségével addEventListener() módszer. A figyelt esemény neve „kattintás”. Amikor a gomb elindítja az eseményt, a hallgató hívja a clickDemo() funkció.
Összefüggő: Ismerje meg a DOM-választók használatát
A clickDemo() funkció kiírja a „Sziasztok” szöveget a böngészőkonzolra. Minden alkalommal, amikor a gombra kattint, ezt a kimenetet kell látnia a konzolon.
A „kattintás” esemény kimenete
Mik azok az egéresemények?
A JavaScript rendelkezik a MouseEvent interfész, amely azokat az eseményeket jeleníti meg, amelyek a felhasználó egerével való interakciója miatt következnek be. Számos rendezvény használja a MouseEvent felület. Ezek az események a következőket foglalják magukban:
- kattintson
- dblclick
- egérmozgatás
- egérmutatót
- egérkihúzás
- egeret
- egérrel lefelé
A kattintson esemény akkor következik be, amikor a felhasználó megnyomja és felengedi az egérgombot, miközben a mutatója egy elem felett van. Pontosan ez történt az előző példában. Amint a fenti listából látható, az egéresemények sokféle formát ölthetnek.
Egy másik gyakori egéresemény az dblclick, ami a dupla kattintást jelenti. Ez akkor aktiválódik, ha a felhasználó gyorsan egymás után kétszer kattint az egérgombra. Figyelemre méltó dolog a addEventListener() Az a funkció, hogy több eseményfigyelőt is hozzárendelhet egyetlen elemhez.
dblclick esemény hozzáadása az első gombhoz
document.querySelector('.btn').addEventListener("dblclick", dblclickDemo)
function dblclickDemo(){
alert("Ez egy duplakattintásos esemény létrehozásának bemutatója")
}
Ha hozzáadja a fenti kódot az app.js fájlhoz, akkor gyakorlatilag egy második eseményfigyelő jön létre a weboldal első gombjához. Tehát az első gombra kétszeri kattintás a következő figyelmeztetést hozza létre a böngészőben:
A fenti képen láthatja a generált riasztást, és azt is látni fogja, hogy további két „Sziasztok” kimenet található a konzolon. Ennek az az oka, hogy a duplakattintásos esemény két kattintási esemény kombinációja, és mindkettőhöz vannak eseményfigyelők kattintson és a dblclick eseményeket.
A listában szereplő többi egéresemény neve leírja viselkedésüket. A egérmozgatás esemény minden alkalommal előfordul, amikor a felhasználó mozgatja az egeret, amikor a kurzor egy elem fölé kerül. A egeret esemény akkor következik be, amikor a felhasználó lenyomva tart egy gombot egy elem felett, majd elengedi.
Mik azok a billentyűzetes események?
A JavaScript rendelkezik a KeyboardEvent felület. Ez figyeli a felhasználó és a billentyűzet közötti interakciókat. A múltban, KeyboardEvent három eseménytípus volt. A JavaScript azonban azóta elavult gombnyomás esemény.
Így a keyup és gomb lenyomása Az események az egyetlen két javasolt billentyűzetesemény, amelyekre csak szüksége van. A gomb lenyomása esemény akkor következik be, amikor a felhasználó lenyom egy billentyűt, és a keyup esemény akkor következik be, amikor a felhasználó kiadja.
A fenti HTML-példát tekintve a legjobb hely a billentyűzet eseményfigyelő hozzáadásához a bemenet elem.
Billentyűzet eseményfigyelő hozzáadása az app.js fájlhoz
let greetings = document.querySelector('p');
document.querySelector('input').addEventListener("keyup", captureInput)
function captureInput (e){
greetings.innerText = (`Kedves ${e.target.value}, üdvözöllek a webhelyemen.`)
}
A fenti kód a querySelector() funkciót a bekezdés eléréséhez és bemenet elemek az oldalon. Ezután hívja a addEventListener() módszer a bemenet elemet, amely figyeli a keyup esemény. Valahányszor a keyup esemény bekövetkezik, a CaptureInput() függvény veszi a kulcsértéket, és hozzáadja az oldal bekezdéséhez. A e paraméter azt az eseményt jelöli, amelyet a JavaScript automatikusan hozzárendel. Ennek az eseményobjektumnak van egy tulajdonsága, a cél, amely egy hivatkozás arra az elemre, amellyel a felhasználó interakcióba lép.
Ebben a példában a bemenet mező felhasználónevet kér. Ha beírja a nevét a beviteli mezőbe, akkor a weboldal valahogy így fog kinézni:
A bekezdés most tartalmazza a bemeneti értéket, amely a fenti példában „Jane Doe”.
Az addEventListener mindenféle felhasználói interakciót rögzít
Ez a cikk bemutatta Önnek a addEventListener() módszert, valamint számos egér- és billentyűzeteseményt, amelyeket használhat vele. Ezen a ponton tudja, hogyan kell figyelni egy adott eseményre, és hogyan hozhat létre olyan funkciót, amely reagál rá.
A addEventListener azonban a harmadik paraméterén keresztül extra lehetőséget biztosít. Segítségével szabályozhatja az események terjedését: azt a sorrendet, amelyben az események az elemektől a szüleikhez vagy a gyerekekhez kerülnek.
Az események egy hatékony JavaScript funkció. A használatuk elsajátításához kulcsfontosságú annak megértése, hogy egy webböngésző hogyan emeli fel őket az elemekkel szemben.
Olvassa el a következőt
- Programozás
- JavaScript
- Programozás
- Webfejlesztés
Kadeisha Kean Full-stack szoftverfejlesztő és műszaki/technológiai író. Megvan az a képessége, hogy leegyszerűsítse a legbonyolultabb technológiai fogalmakat; olyan anyagok gyártása, amelyek könnyen megérthetők minden technológiai kezdő számára. Szenvedélye az írás, az érdekes szoftverek fejlesztése és a világutazás (dokumentumfilmeken keresztül).
Iratkozzon fel hírlevelünkre
Csatlakozzon hírlevelünkhöz műszaki tippekért, ismertetőkért, ingyenes e-könyvekért és exkluzív ajánlatokért!
Kattintson ide az előfizetéshez