Supratimas, kaip „JavaScript“ identifikuoja įvykius, neatsižvelgiant į kintamųjų pavadinimus

„JavaScript“ įvykių atpažinimo magija

Įvykiai yra esminis kodavimo komponentas tiems, kurie net šiek tiek eksperimentavo su JavaScript. Kaip rašyti kodą addEventListener pradėti veiksmus po konkrečių sąveikų, pvz., mygtuko arba klavišo paspaudimo, gali būti pažįstama patirtis. Jums gali būti įdomu, kaip „JavaScript“ visada atpažįsta, kad apdoroja įvykį, net tais atvejais, kai funkcijos argumento pavadinimas nėra deklaruojamas kaip „įvykis“.

Ypač tada, kai atrodo, kad įvykio objektas nėra aiškiai nurodytas, tai gali kelti nerimą. Pavyzdžiui, jums gali būti įdomu, kaip naršyklė nustato, kokią informaciją pateikti jūsų funkcijai ir kur renginys atsiranda rašant tokį kodą kaip document.addEventListener("keydown", function(event) {...}).

„JavaScript“ įvykių valdymo sistemoje yra tam tikrų paslėptų mechanizmų. Nepriklausomai nuo parametro pavadinimo, naršyklė automatiškai pateikia įvykio objektą atgalinio skambinimo funkcijai, kai pridedamas įvykių klausytojas. Tai garantuoja, kad funkcija visada gaus duomenis, reikalingus įvykiui valdyti.

Šiame įraše bus nagrinėjamas vidinis „JavaScript“ įvykių sistemos veikimas ir parodyta, kaip įvykiai identifikuojami ir perduodami, neatsižvelgiant į argumento pavadinimą.

Kaip „JavaScript“ automatiškai atpažįsta įvykius įvykių klausytojuose

addEventListener yra viena iš svarbiausių „JavaScript“ funkcijų, skirtų valdyti vartotojo sąveiką. Naudojant šį metodą, įvykių tvarkytuvas gali būti prijungtas prie tam tikro įvykio tipo, pvz., „spustelėti“ arba „paspausti klavišus“. Naršyklė automatiškai siunčia įvykio objektą atgalinio skambinimo funkcijai, kai naudojate addEventListener. Visa informacija apie įvykį, įskaitant paspaustą klavišą ir spustelėjusį elementą, yra šiame objekte. Įdomu tai, kad naršyklė visada pateiks įvykio objektą, nepaisant parametro pavadinimo funkcijoje – „event“, „e“ arba „evt“.

Pirma, matome paprastą sąranką naudojant "keydown" įvykį aukščiau pateiktuose pavyzdžiuose. Naršyklė sukuria įvykio objektą ir siunčia jį atgalinio skambinimo funkcijai, kai vartotojas paspaudžia klavišą. Po to funkcija registruoja įvykį konsolėje, pateikdama visą susijusią informaciją, įskaitant klavišo paspaudimą ir papildomas įvykio charakteristikas. Svarbu atsiminti, kad jums nereikia aiškiai deklaruoti įvykio objekto, nes JavaScript jau atpažįsta, kad apdoroja įvykį pagal tipą, kurį nurodėte addEventListener.

Taip pat išnagrinėjome, kaip įprastas funkcijų išraiškas pakeisti rodyklėmis. Rodyklės funkcijos ir jų sutrumpinta sintaksė veikia taip pat: naršyklė visada duos funkcijai įvykio objektą, nesvarbu, kaip funkcija sukonstruota. Kad įvykių tvarkyklę būtų galima naudoti pakartotinai, ją taip pat moduliavome į atskirą metodą, pavadintą „handleKeyDown“. Dėl to kodas tampa aiškesnis ir lengviau prižiūrimas, nes ta pati funkcija gali būti susieta su daugeliu įvykių klausytojų arba pakartotinai naudojama įvairiose kodo dalyse.

Naudojant pabandyk... pagauk, buvo įdiegtas klaidų tvarkymas, siekiant dar labiau padidinti tvirtumą. Realioms programoms tai yra labai svarbi funkcija, nes ji padeda išvengti gedimų, jei tvarkant įvykius atsirastų nenumatytų aplinkybių. Pavyzdžiui, gaudymo blokas užregistruos klaidą, netrukdydamas likusiai scenarijai, jei įvykio objektas nebus suformuotas taip, kaip tikėtasi. Galiausiai, norėdami įsitikinti, kad tvarkytojas elgiasi taip, kaip tikėtasi, sukūrėme vieneto testą, kuris imituoja klavišų paspaudimo įvykius naudojant Jest. Didesniems projektams testavimas yra būtinas, nes jis užtikrina, kad įvykių tvarkymo funkcijos tinkamai veiktų įvairiose situacijose.

// 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.

Kaip įvykių platinimas veikia „JavaScript“ įvykių tvarkyme

Renginio propagavimas yra dar vienas svarbus JavaScript įvykių sistemos komponentas. Įvykis, toks „paspaudimas“ arba „paspaudimas“, ne tik įvyksta ir tuo nesibaigia. Jis ir toliau veikia. Atvirkščiai, jis seka komponentų išdėstymą įvykių sraute. Užfiksavimo fazė, tikslinė fazė ir burbuliavimo fazė yra trys šio srauto etapai. Dauguma įvykių pagal numatytuosius nustatymus yra burbuliavimo fazėje, o tai reiškia, kad jie plinta kaip bangavimo efektas nuo tikslinio elemento iki jo pirmtakų.

Naudojant tokias technikas kaip stopPropagation() ir stopImmediatePropagation(), „JavaScript“ kūrėjai gali reguliuoti įvykių plitimą. Pavyzdžiui, galite naudoti event.stopPropagation() sustabdyti įvykio burbuliavimą, jei nenorite, kad jis įvyktų aukščiau DOM hierarchijoje. Kai daugiau nei vienas elementas klauso to paties įvykio, bet norite, kad paleistų tik vienas konkretus tvarkytojas, tai tikrai naudinga.

Be to, vienas efektyvus būdas, kuriuo naudojamasi įvykių plitimu, yra įvykių delegavimas. Galite pridėti įvykių klausytoją prie pirminio elemento ir leisti įvykiams „burbuliuoti“ prie jo, o ne pridėti po vieną prie kiekvieno antrinio elemento. Tais atvejais, kai turite valdyti dinamiškai įvestų elementų įvykius, šis metodas yra labai efektyvus. Tai palengvina kodo administravimą ir sumažina atminties naudojimą, ypač programose, kuriose yra daug interaktyvių komponentų.