Arusaam, kuidas JavaScript tuvastab sündmusi sõltumata muutujanimedest

JavaScripti sündmuste tuvastamise võlu

Sündmused on kodeerimise oluline komponent kõigile, kes on JavaScriptiga vähegi katsetanud. Koodi kirjutamine nagu addEventListener teatud interaktsioonide, näiteks nupu või klahvi vajutamise, toimingute algatamine võib olla tuttav kogemus. Võite olla uudishimulik, kuidas JavaScript alati sündmust käsitleb, isegi kui funktsiooni argumendi nimi ei ole deklareeritud kui "sündmus".

Eriti kui tundub, et sündmuse objekt ei ole selgesõnaliselt öeldud, võib see olla segadust tekitav. Näiteks võite olla huvitatud sellest, kuidas brauser määrab, millist teavet teie funktsiooni anda ja kus see on sündmus pärineb koodi kirjutamisest nagu document.addEventListener("keydown", function(event) {...}).

JavaScripti sündmuste käsitlemise süsteem sisaldab teatud peidetud mehhanisme. Sõltumata parameetri nimest edastab brauser sündmusekuulaja manustamisel automaatselt sündmuse objekti tagasihelistamisfunktsioonile. See tagab, et funktsioon saab alati sündmuse haldamiseks vajalikud andmed.

See postitus uurib JavaScripti sündmuste süsteemi sisemist tööd ja näitab, kuidas sündmusi tuvastatakse ja edastatakse, olenemata argumendi nimest.

Kuidas JavaScript sündmuste kuulajates sündmusi automaatselt ära tunneb

addEventListener on üks olulisemaid JavaScripti funktsioone kasutaja interaktsioonide haldamiseks. Selle meetodi abil saab sündmuste käitleja lisada teatud tüüpi sündmusele, näiteks "klõps" või "klahvi alla". Kui kasutate, saadab brauser automaatselt sündmuse objekti tagasihelistamise funktsioonile addEventListener. Kõik sündmuse üksikasjad, sealhulgas vajutatud võti ja klõpsatud element, sisalduvad selles objektis. Huvitav on see, et brauser pakub alati sündmuse objekti, olenemata parameetri nimest funktsioonis — "event", "e" või "evt".

Esiteks näeme ülaltoodud näidetes lihtsat seadistamist, kasutades sündmust "klahvi alla". Brauser loob sündmuseobjekti ja saadab selle tagasihelistamisfunktsioonile, kui kasutaja vajutab klahvi. Pärast seda logib funktsioon sündmuse konsooli, kuvades kogu asjakohase teabe, sealhulgas võtme tabamuse ja sündmuse täiendavad omadused. Oluline on meeles pidada, et te ei pea sündmuse objekti selgesõnaliselt deklareerima, sest JavaScript tunneb juba ära, et ta käsitleb sündmust teie sisestatud tüübi alusel. addEventListener.

Samuti uurisime tavaliste funktsiooniavaldiste asendamist noolefunktsioonidega. Noolefunktsioonide ja nende tihedama süntaksi käitumine on sama: brauser annab funktsioonile alati sündmuseobjekti, olenemata sellest, kuidas funktsioon on üles ehitatud. Sündmuste töötleja korduvkasutatavaks muutmiseks moduleerisime selle ka eraldi meetodiks nimega "handleKeyDown". See muudab koodi selgemaks ja hõlpsamini hooldatavaks, võimaldades sama funktsiooni linkida paljude sündmuste kuulajatega või uuesti kasutada teie koodi erinevates osades.

Kasutades proovi... püüa kinni, võeti kasutusele veakäsitlus, et suurendada töökindlust veelgi. Tegelike rakenduste puhul on see ülioluline funktsioon, kuna see aitab vältida krahhe, kui sündmuste käsitlemisel ilmnevad ettenägematud asjaolud. Näiteks logib püüdmisplokk vea ilma ülejäänud skripti segamata, kui sündmuseobjekti ei moodustata ootuspäraselt. Lõpuks, tagamaks, et töötleja käitub ootuspäraselt, töötasime välja seadmetesti, mis simuleerib klahvivajutuse sündmusi Jesti abil. Suuremate projektide puhul on testimine hädavajalik, kuna see tagab, et teie sündmuste haldamise funktsioonid töötavad erinevates olukordades õigesti.

// Approach 1: Basic event listener with "event" parameter
document.addEventListener("keydown", function(event) {
    // The browser automatically passes the event object to this function
    console.log(event);  // Outputs the event object
});
// Explanation: The event object is implicitly passed to the function by the browser.

// Approach 2: Using ES6 arrow functions
document.addEventListener("keydown", (e) => {
    // Arrow function also accepts the event object, regardless of its name
    console.log(e);  // Outputs the event object
});
// Explanation: The event object is still passed, even with the shorthand arrow function syntax.

// Approach 3: Modularizing the event handler for reuse
function handleKeyDown(event) {
    // Function to handle keydown event, reusable in other contexts
    console.log("Key pressed:", event.key);  // Logs the key that was pressed
}
// Attaching the handler to the keydown event
document.addEventListener("keydown", handleKeyDown);
// Explanation: Separate function increases modularity and reusability.

// Approach 4: Adding error handling for more robust event handling
function handleKeyDown(event) {
    try {
        // Attempt to process the key event
        console.log("Key pressed:", event.key);
    } catch (error) {
        // Handle any potential errors
        console.error("Error handling keydown event:", error);
    }
}
document.addEventListener("keydown", handleKeyDown);
// Explanation: Adding try-catch blocks improves code reliability.

// Approach 5: Unit testing the event handler using Jest
const handleKeyDown = jest.fn((event) => {
    return event.key;  // Return the key for testing
});
// Simulate a keydown event in the test environment
test("handleKeyDown function receives keydown event", () => {
    const event = new KeyboardEvent("keydown", { key: "a" });
    document.dispatchEvent(event);
    expect(handleKeyDown).toHaveBeenCalledWith(event);
});
// Explanation: Unit tests ensure the event handler behaves correctly.

Kuidas sündmuste levitamine JavaScripti sündmuste haldamisel toimib

Sündmuse levik on JavaScripti sündmuste süsteemi teine ​​oluline komponent. Sündmus, nagu "klahvivajutus" või "klõps", ei juhtu niisama ega lõpe sellega. See toimib jätkuvalt. Pigem järgib see komponentide paigutust sündmuste voos. Püüdmisfaas, sihtfaas ja mullitamisfaas on selle voolu kolm etappi. Enamik sündmusi on vaikimisi mullitamisfaasis, mis tähendab, et need levivad lainetusena sihtelemendist selle eelkäijateni.

Kasutades selliseid tehnikaid nagu stopPropagation() ja stopImmediatePropagation()JavaScripti arendajad saavad sündmuste levikut reguleerida. Näiteks võite kasutada event.stopPropagation() sündmuse mullitamise peatamiseks, kui te ei soovi, et see juhtuks DOM-i hierarhias kõrgemal. Kui sama sündmust kuulab rohkem kui üks element, kuid soovite, et töötaks ainult üks konkreetne töötleja, on see tõesti kasulik.

Lisaks on üks tõhus meetod, mis kasutab sündmuste levitamist, sündmuste delegeerimine. Saate lisada ülemelemendile sündmustekuulaja ja lasta sündmustel sellele "mullitada", mitte lisada igale alamelemendile üks. Olukordades, kus peate dünaamiliselt sisestatud üksuste sündmusi haldama, on see lähenemisviis väga tõhus. See hõlbustab koodi haldamist ja vähendab mälukasutust, eriti palju interaktiivseid komponente sisaldavates rakendustes.