Разумевање како ЈаваСцрипт идентификује догађаје без обзира на називе променљивих

Магија иза ЈаваСцрипт препознавања догађаја

Догађаји су суштинска компонента кодирања за свакога ко је макар мало експериментисао са ЈаваСцрипт-ом. Писање кода као аддЕвентЛистенер покретање радњи на одређеним интеракцијама, као што је притискање дугмета или тастера, може бити познато искуство. Можда вас занима како ЈаваСцрипт увек препознаје да обрађује догађај, чак и у ситуацијама када име аргумента функције није декларисано као „догађај“.

Нарочито када се чини да објекат догађаја није експлицитно наведен, ово може бити збуњујуће. На пример, можда ћете бити знатижељни како претраживач одређује које информације ће дати вашој функцији и где догађај потиче од писања кода као што је доцумент.аддЕвентЛистенер("кеидовн", фунцтион(евент) {...}).

Систем управљања догађајима у ЈаваСцрипт-у садржи одређене скривене механизме. Без обзира на име параметра, претраживач аутоматски испоручује објекат догађаја функцији повратног позива када је прикачен слушалац догађаја. Ово гарантује да функција увек добија податке који су јој потребни за управљање догађајем.

Овај пост ће истражити унутрашње функционисање ЈаваСцрипт система догађаја и показати како се догађаји идентификују и прослеђују, без обзира на име аргумента.

Како ЈаваСцрипт аутоматски препознаје догађаје у слушаоцима догађаја

аддЕвентЛистенер је једна од најважнијих ЈаваСцрипт функција за управљање интеракцијама корисника. Уз помоћ ове методе, руковалац догађаја може да се прикачи одређеном типу догађаја—као што је „клик“ или „прекидање тастера“. Прегледач аутоматски шаље објекат догађаја функцији повратног позива када користите аддЕвентЛистенер. Сви детаљи догађаја, укључујући притиснут тастер и клик на елемент, садржани су у овом објекту. Интересантна ствар је да ће претраживач увек обезбедити објекат догађаја, без обзира на име параметра у функцији — „евент“, „е“ или „евт“.

Прво, видимо једноставно подешавање користећи догађај „кеидовн“ у горњим примерима. Претраживач креира објекат догађаја и шаље га функцији повратног позива када корисник притисне тастер. Након тога, функција евидентира догађај на конзоли, приказујући све релевантне информације, укључујући кључни погодак и додатне карактеристике догађаја. Важно је запамтити да не морате експлицитно да декларишете објекат догађаја јер ЈаваСцрипт већ препознаје да обрађује догађај на основу типа који сте унели у аддЕвентЛистенер.

Такође смо размотрили замену функција стрелице за конвенционалне изразе функције. Понашање је исто за функције стрелице и њихову сажетију синтаксу: претраживач ће увек дати објекат догађаја функцији, без обзира на то како је функција конструисана. Да би се руковалац догађајима поново користио, такође смо га модуларили у посебан метод под називом "хандлеКеиДовн". Ово чини код јаснијим и лакшим за одржавање омогућавањем да се иста функција повеже са бројним слушаоцима догађаја или поново користи у различитим деловима вашег кода.

Коришћење покушај...ухвати, уведено је руковање грешкама како би се још више повећала робусност. За апликације у стварном свету, ово је кључна карактеристика јер помаже у спречавању пада у случају да дође до непредвиђених околности током руковања догађајима. На пример, блок цатцх ће евидентирати грешку без мешања у остатак скрипте ако објекат догађаја није формиран како се очекује. На крају, да бисмо били сигурни да се руковалац понаша како је предвиђено, развили смо јединични тест који симулира догађаје притиска на тастер користећи Јест. За веће пројекте, тестирање је од суштинског значаја јер осигурава да се функције руковања догађајима правилно извршавају у различитим ситуацијама.

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

Како функционише ширење догађаја у ЈаваСцрипт руковању догађајима

Пропагација догађаја је још једна важна компонента ЈаваСцрипт система догађаја. Догађај, као што је „притисак на тастер“ или „клик“, не дешава се тек тако и завршава се тамо. Она наставља да функционише. Уместо тога, прати распоред компоненти у току догађаја. Фаза хватања, циљна фаза и фаза мехурића су три фазе овог тока. Већина догађаја је подразумевано у фази мехурића, што значи да се шире попут ефекта таласања од циљног елемента до његових претходника.

Уз употребу техника као stopPropagation() и stopImmediatePropagation(), ЈаваСцрипт програмери могу да регулишу како се догађаји шире. На пример, можете користити event.stopPropagation() да спречите појављивање догађаја ако не желите да се догоди више у ДОМ хијерархији. Када више од једног елемента слуша исти догађај, али желите да се покрене само један одређени руковалац, ово је заиста корисно.

Штавише, један ефикасан метод који користи пропагацију догађаја је делегирање догађаја. Можете додати ослушкивач догађаја родитељском елементу и пустити да му се догађаји „покрећу“, за разлику од додавања једног сваком подређеном елементу. У ситуацијама када морате да управљате догађајима на динамички уведеним ставкама, овај приступ је веома ефикасан. Олакшава администрацију кода и смањује употребу меморије, посебно у апликацијама са пуно интерактивних компоненти.