A különbség finom, de elengedhetetlen tudni.
Események!
Ez egy fontos módja annak, hogy webhelye ténylegesen „tegyen dolgokat”.
Az „MDN” egy eseményt a következőképpen definiál:
"A Event interfész egy olyan eseményt jelent, amely a DOM-ban megy végbe."
Az események olyan műveletek vagy események, amelyek a programozott rendszerben történnek, és amelyekről a rendszer tájékoztat, így kívánság szerint reagálni tud rájuk.
Például, ha a felhasználó kiválaszt egy gombot egy weboldalon, akkor a műveletre egy információs mező megjelenítésével válaszolhat.
Ebben a cikkben az események kezelésének két módjáról és arról, hogy melyik módszert érdemes használni az Ön helyzetétől függően.
A JavaScript-események kezelésének két módja
A mai naptól kezdve kétféleképpen kezelheti az eseményeket JavaScriptben:
- Eseménykezelő használatával
- Eseményfigyelő hozzáadásával
Szóval hogy néznek ki ezek?
1. módszer – Eseménykezelő
Az eseménykezelő az objektum „EventHandler” tulajdonságának használatával a JavaScriptről felismerhető.
Kicsit bonyolultan hangzik, de valószínűleg már láttad már.
Valahogy így nézhet ki:
const button = document.querySelector(".btn")
button.onclick = function() {
console.log("Hello!");
};
// OR
button.onclick = () => {
console.log("Hello!");
};
Ebben a példában az „onclick” eseménykezelő tulajdonságot használjuk, hogy amikor a felhasználó erre a gombra kattint, a „Hello!” a konzolhoz.
Az „onclick” eseménykezelő tulajdonság csak egy a SOK használható eseménykezelő közül. A teljes lista megtekintéséhez "nézze meg a teljes listát az MDN-en".
2. módszer – Eseményfigyelő
A másik módszer az események használatára a JavaScriptben, ha eseményfigyelőt adunk egy objektumhoz.
Ha eseményfigyelőt adunk egy objektumhoz, akkor a felhasználó vagy a böngésző által kiváltott események széles skáláját megfoghatjuk.
Ezt is ismerheti. Kicsit így nézhetnek ki:
const button = document.querySelector(".btn")
button.addEventListener("click", function(event) {
console.log("Hello!");
})
// OR
button.addEventListener("click", event => {
console.log("Hello!");
})
A fenti kód ugyanazt a példát mutatja, mint az eseménykezelőnél, a „Hello!” naplózásával. a konzolon, amikor a felhasználó rákattint a gombra.
Ezúttal az „onclick” tulajdonság használata helyett egy eseményfigyelőt adunk hozzá, amely elindítja a „click” eseményt, majd naplózza a „Hello!” üzenetet.
Rengeteg olyan esemény is létezik, amelyeket eseményfigyelő segítségével meg lehet hallgatni. Itt van az összes meghallgatható esemény teljes listája.
Mi a különbség?
Van egy finom, de fontos különbség a két eseménykezelési módszer között.
Ha az első módszert, az eseménykezelőket használja, a különbség az, hogy ha két eseménykezelőt ad hozzá ugyanahhoz a gombra kattintáshoz, akkor a második eseménykezelő felülírja az elsőt, és csak az esemény aktiválódik.
Ami elvezet minket a fő tanuláshoz:
Egy adott elemhez eseménytípusonként csak egy eseménykezelő lehet, de több eseményfigyelő is lehet.
Ez a legfontosabb különbség. Szóval hogy néz ez ki?
const button = document.querySelector(".btn")
button.onclick = () => {
console.log("Hello!");
};
button.onclick = () => {
console.log("How are you?");
};
// This wil log "How are you?" to the console.
A fenti példában az „onclick” eseménykezelőt kétszer használjuk.
Így az első felülírásra kerül, és amikor a felhasználó rákattint a gombra, naplózza a "Hogy vagy?" a konzolhoz.
Tehát mi történik, ha az „addEventListener”-t használjuk?
const button = document.querySelector(".btn")
button.addEventListener("click", event => {
console.log("Hello!");
})
button.addEventListener("click", event => {
console.log("How are you?");
})
// This wil log
// "Hello!"
// "How are you?"
// to the console
A fenti példában több eseményfigyelőt adunk a gombhoz.
Így amikor a felhasználó rákattint, mindkét funkciót elindítja, és naplózza a „Hello! Hogy vagy?" a konzolhoz.
Melyiket érdemes használni?
Az, hogy melyik módszert használja, teljes mértékben az Ön használati esetétől függ.
Egynél több eseményt kell csatolnia egy elemhez? Fogsz a jövőben? Valószínű, hogy így lesz.
Ezért általában az „addEventListener” használata javasolt.
Szóval mit tanultunk?
- Az események kezelésének két módja van: eseménykezelő tulajdonság használata vagy eseményfigyelő hozzáadása.
- Egy adott elemhez eseménytípusonként csak egy eseménykezelő lehet, de több eseményfigyelő is lehet.
- Általában tanácsos eseményfigyelőket használni.
Köszönöm, hogy elolvasta! Remélem ma tanultál valami újat.
Szeretné a legtöbbet kihozni webhelyéből? Tekintse meg „Az Ön webhelye szívás” című e-könyvemet, és töltsön le egy fejezetet ingyen!
Még jobban szeretné fejleszteni JS-készségeit? Tekintse meg másik cikkemet „6 alapvető JavaScript-tipp a 2020-as fejlesztőknek”, hogy még jobb legyen a JS.
Legyen szép napod! 😄
