Izpratne par to, kā JavaScript identificē notikumus neatkarīgi no mainīgo nosaukumiem

JavaScript notikumu atpazīšanas burvība

Notikumi ir būtiska kodēšanas sastāvdaļa ikvienam, kurš ir kaut nedaudz eksperimentējis ar JavaScript. Rakstot kodu, piemēram addEventListener Lai uzsāktu darbības pēc noteiktas mijiedarbības, piemēram, pogas vai taustiņa nospiešana, var būt pazīstama pieredze. Jūs varētu interesēt, kā JavaScript vienmēr atpazīst, ka tas apstrādā notikumu, pat situācijās, kad funkcijas argumenta nosaukums nav deklarēts kā "notikums".

Īpaši tad, ja šķiet, ka notikuma objekts nav skaidri norādīts, tas var būt mulsinoši. Piemēram, jūs varētu interesēt, kā pārlūkprogramma nosaka, kādu informāciju sniegt jūsu funkcijai un kur notikumu rodas, rakstot kodu, piemēram, document.addEventListener("keydown", funkcija(notikums) {...}).

JavaScript notikumu apstrādes sistēma satur noteiktus slēptus mehānismus. Neatkarīgi no parametra nosaukuma pārlūkprogramma automātiski piegādā notikuma objektu atzvanīšanas funkcijai, kad ir pievienots notikumu uztvērējs. Tas garantē, ka funkcija vienmēr saņem notikuma pārvaldībai nepieciešamos datus.

Šajā rakstā tiks izpētīta JavaScript notikumu sistēmas iekšējā darbība un parādīts, kā notikumi tiek identificēti un nodoti neatkarīgi no argumenta nosaukuma.

Kā JavaScript automātiski atpazīst notikumus notikumu uztvērējos

addEventListener ir viena no vissvarīgākajām JavaScript funkcijām lietotāju mijiedarbības pārvaldībai. Izmantojot šo metodi, notikumu apdarinātāju var pievienot noteiktam notikuma veidam, piemēram, “klikšķim” vai “taustiņu nolaišanai”. Kad izmantojat, pārlūkprogramma automātiski nosūta notikuma objektu atzvanīšanas funkcijai addEventListener. Šajā objektā ir ietverta visa informācija par notikumu, tostarp nospiestā atslēga un noklikšķinātais elements. Interesanti ir tas, ka pārlūkprogramma vienmēr nodrošinās notikuma objektu neatkarīgi no parametra nosaukuma funkcijā — "event", "e" vai "evt".

Pirmkārt, mēs redzam vienkāršu iestatīšanu, izmantojot notikumu "taustiņu noslēgšana" iepriekš minētajos piemēros. Pārlūkprogramma izveido notikuma objektu un nosūta to uz atzvanīšanas funkciju, kad lietotājs nospiež taustiņu. Pēc tam funkcija reģistrē notikumu konsolē, parādot visu atbilstošo informāciju, tostarp taustiņu trāpījumu un papildu notikuma raksturlielumus. Svarīgi atcerēties, ka jums nav skaidri jādeklarē notikuma objekts, jo JavaScript jau atpazīst, ka tas apstrādā notikumu, pamatojoties uz jūsu norādīto veidu. addEventListener.

Mēs arī pētījām parasto funkciju izteiksmju aizstāšanu ar bultiņu funkcijām. Bultiņu funkcijām un to saīsinātai sintaksei darbība ir tāda pati: pārlūkprogramma vienmēr piešķirs funkcijai notikuma objektu neatkarīgi no tā, kā funkcija ir konstruēta. Lai notikumu apstrādātājs būtu atkārtoti lietojams, mēs to arī modularizējām atsevišķā metodē ar nosaukumu "handleKeyDown". Tas padara kodu skaidrāku un vieglāk uzturējamu, ļaujot to pašu funkciju saistīt ar daudziem notikumu uztvērējiem vai atkārtoti izmantot dažādās koda sadaļās.

Izmantojot pamēģini... noķer, tika ieviesta kļūdu apstrāde, lai vēl vairāk palielinātu robustumu. Reālās pasaules lietojumprogrammām šī ir ļoti svarīga funkcija, jo tā palīdz novērst avārijas gadījumā, ja notikumu apstrādes laikā rodas neparedzēti apstākļi. Piemēram, uztveršanas bloks reģistrēs kļūdu, neiejaucoties pārējā skripta daļā, ja notikuma objekts nav izveidots, kā paredzēts. Visbeidzot, lai pārliecinātos, ka apstrādātājs darbojas, kā paredzēts, mēs izstrādājām vienības testu, kas simulē taustiņu nospiešanas notikumus, izmantojot Jest. Lielākiem projektiem testēšana ir būtiska, jo tā nodrošina, ka jūsu notikumu apstrādes funkcijas dažādās situācijās darbojas pareizi.

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

Kā notikumu izplatīšana darbojas JavaScript notikumu apstrādē

Notikuma izplatība ir vēl viena svarīga JavaScript notikumu sistēmas sastāvdaļa. Notikums, piemēram, "taustiņu nospiešana" vai "klikšķis", ne tikai notiek un ar to nebeidzas. Tas turpina darboties. Drīzāk tas seko komponentu izkārtojumam notikumu plūsmā. Tveršanas fāze, mērķa fāze un burbuļošanas fāze ir trīs šīs plūsmas posmi. Lielākā daļa notikumu pēc noklusējuma ir burbuļošanas fāzē, kas nozīmē, ka tie izplatās kā viļņošanās efekts no mērķa elementa līdz tā priekšgājējiem.

Izmantojot tādas tehnikas kā stopPropagation() un stopImmediatePropagation(), JavaScript izstrādātāji var regulēt notikumu izplatību. Piemēram, jūs varat izmantot event.stopPropagation() lai apturētu notikuma burbuļošanu, ja nevēlaties, lai tas notiktu augstāk DOM hierarhijā. Ja vairāk nekā viens elements klausās vienu un to pašu notikumu, bet vēlaties, lai palaistu tikai viens konkrēts apdarinātājs, tas ir ļoti noderīgi.

Turklāt viena efektīva metode, kas izmanto notikumu izplatīšanu, ir notikumu deleģēšana. Varat pievienot notikumu uztvērēju vecākajam elementam un ļaut notikumiem "burbulēt" tajā, nevis pievienot vienu katram pakārtotajam elementam. Situācijās, kad jums jāpārvalda notikumi ar dinamiski ieviestiem vienumiem, šī pieeja ir ļoti efektīva. Tas atvieglo koda administrēšanu un samazina atmiņas lietojumu, īpaši lietojumprogrammās, kurās ir daudz interaktīvu komponentu.