Az eseménykezelés fontos fogalom a JavaScriptben. Az események lehetővé teszik, hogy a HTML-oldalak dinamikusak és interaktívak legyenek, így vonzó felhasználói felületek hozhatók létre. Kódot írhat a JavaScript futtatásához, ha esemény történik a DOM-on.
Esemény lehet, amikor a felhasználó rákattint egy HTML-elemre, az oldal betöltődik, vagy amikor egy beviteli mező értéke megváltozik. Írhat olyan kódot, amely megváltoztatja a HTML-struktúrát, amikor egy esemény bekövetkezik. Tanuljon meg három különböző módszert, amellyel eseményfigyelőket adhat hozzá kódjához.
1. Az addEventListener módszer
Az addEventListener módszer az egyik legnépszerűbb eseményfigyelő módszerek. Három paramétere van:
- Az eseményt reprezentáló objektum.
- Egy funkció a kezeléséhez.
- Egy opcionális logikai érték, a useCapture, amely leírja, hogyan terjed az esemény a DOM-ban.
Az esemény bármely megadott DOM esemény lehet egy célelemen. A funkció be van állítva, hogy reagáljon az eseményre, amikor az bekövetkezik.
A függvény lehet névtelen vagy elnevezett függvény. A népszerű célpontok közé tartozik egy elem, annak gyermekei, egy dokumentum és egy eseményt támogató ablak.
Az addEventListener() ajánlott módszer az eseményfigyelők adminisztrálására JavaScriptben. Bármilyen eseménycélon működik, nem csak HTML-elemeken, és több eseménykezelőt is támogat.
Előfordulhat, hogy valamilyen kódot szeretne végrehajtani a DOM-on. Szöveget nyomtathat, számításokat végezhet, vagy megjeleníthet képet, amikor a felhasználó rákattint a gombra.
Szemléltessük a következő kóddal:
html>
<html>
<test>
<h1>Az addEventListener módszer függvényekkelh1>
<gombid="myBtn">Kattints idegomb>
<pid="demó">p>
test>
html>Ezután adja hozzá az eseményfigyelőt a gombbal.
const elem = dokumentum.getElementById("myBtn");
element.addEventListener("kattintás", myFunction1);
funkciómyFunction1() {
dokumentum.getElementById("demó").innerHTML += "Fukció végrehajtva! "
}
Amikor rákattint a gombra, a „Funkció végrehajtva” szöveg jelenik meg a képernyőn, az alábbiak szerint.
2. Események delegálása az addEventListener programba
Egy esemény delegálása JavaScriptben több esemény kezelésére használt minta. Ahelyett, hogy minden elemhez eseményfigyelőt adna, csak az eseményfigyelőt adja hozzá egy őselemhez. Az eseményt kiváltó elemet a következőn keresztül érheti el .cél az esemény objektum tulajdonsága.
Ez biztosítja, hogy az összes megcélzott elem közös viselkedést tanúsítson. Enélkül mindegyikhez manuálisan kellene hozzáadnia egy eseményfigyelőt.
Íme egy példa az esemény delegálására:
html>
<html>
<test>
<h1> Esemény-delegáció a gombokonh1>
<div>
<gomb>1. gombgomb>
<gomb>2. gombgomb>
<gomb>3. gombgomb>
div>
test>
html>
Ezután adja hozzá az eseményfigyelőket az összes gombhoz, mindössze néhány sornyi kóddal.
const div = dokumentum.querySelector("div")div.addEventListener("kattintás", (esemény) => {
ha (event.target.tagName 'GOMB') {
konzol.log("Kattintott a gomb")
}
});
Az esemény delegálása az esemény buborékolásán alapuló minta. Eseménybuborékolás akkor történik, amikor egy elem fogad egy eseményt, és továbbítja azt a szülő- és őselemeinek a DOM-ban. Ez egy esemény terjesztése koncepció, amely alapértelmezés szerint történik a JavaScriptben.
3. Az onclick attribútum használatával
Használhatja az onclick attribútumot a JavaScript futtatásához, amikor a felhasználók egy elemre kattintanak. Az addEventListener metódushoz hasonlóan az onclick módszert is használhatja szövegek nyomtatására, számítások elvégzésére és az elem jellemzőinek módosítására. a DOM.
Hozzáadhatja az onclick eseményfigyelőt soron belüli eseménykezelőként a HTML elemhez. Az esemény akkor következik be, amikor a felhasználó rákattint az elemre. Változtassa meg dinamikusan a következő bekezdés színét az onclick módszerrel:
html>
<html>
<test>
<h1> Futtassa az onClick eseményeketh1>
<pid="demó"kattintásra="myFunction()">
Kattintson rám a szöveg színének megváltoztatásához.
p>
test>
html>Adja hozzá a következő kódot a JavaScript-fájlhoz:
funkciómyFunction() {
dokumentum.getElementById("demó").style.color = "piros";
}A kimenet a képen látható módon jelenik meg:
Miért érdemes többet megtudni az eseményfigyelőkről?
JavaScript-fejlesztőként gyakran használ eseményfigyelőket a projektekben. Az eseményfigyelők segítségével számos funkciót hozhat létre, beleértve a buborékolást és az események rögzítését. Ezen fogalmak megértése megkönnyíti az alkalmazások dinamikus interfészeinek létrehozását.
