JavaScript-ում իրադարձությունների մշակման ներածություն

Ի՞նչ են Իրադարձությունները:

Վեբ մշակման համատեքստում իրադարձությունները գործողություններ կամ երևույթներ են, որոնք տեղի են ունենում դիտարկիչի պատուհանում կամ վեբ էջում, որոնք համակարգը կարող է հայտնաբերել և տալ ձեզ արձագանքելու հնարավորություն: Դրանք կարող են ներառել օգտատերերի փոխազդեցությունները, ինչպիսիք են սեղմումները, ստեղնաշարի սեղմումները կամ ավելի բարդ երևույթները, ինչպիսիք են վեբ էջի բեռնումը կամ բեռնաթափումը:

Միջոցառումները առանցքային նշանակություն ունեն JavaScript-ում ինտերակտիվ հավելվածներ ստեղծելու համար: Արձագանքելով այս իրադարձություններին՝ ծրագրավորողները կարող են ստեղծել դինամիկ պատասխաններ, որոնք բարելավում են օգտատիրոջ փորձը:

Միջոցառումների ունկնդիրներ

Այս իրադարձություններին արձագանքելու համար JavaScript-ը տրամադրում է մեխանիզմ, որը կոչվում է իրադարձությունների լսողներ: Միջոցառման ունկնդիրը «լսում է» տեղի ունեցող կոնկրետ իրադարձության համար, օրինակ՝ կոճակի սեղմումը կամ ստեղնի սեղմումը, և այնուհետև ի պատասխան գործարկում է մի ֆունկցիա, որը հայտնի է որպես իրադարձությունների մշակող:

Շարահյուսություն addEventListener.

element.addEventListener(event, function, useCapture);

• իրադարձություն . սա տող է, որը նշում է իրադարձության անունը, որը պետք է լսել:
• ֆունկցիա . սա կարգավորիչի ֆունկցիան է, որն իրականացվում է, երբ իրադարձությունը տեղի է ունենում:
• useCapture . Սա կամընտիր բուլյան արժեք է, որը սահմանում է՝ իրադարձությունը պետք է կատարվի գրավման, թե փրփրացող փուլում: Նախնականը կեղծ է (փրփրացող):

Իրադարձությունների ունկնդիր ավելացնելու օրինակ.

document.getElementById("myButton").addEventListener("click", function() {
    alert("Button clicked!");
});

Կոդի այս հատվածը ID-ով իրադարձության ունկնդիր է ավելացնում myButton: Երբ կոճակը սեղմվում է, այն ազդանշան է տալիս:

Իրադարձությունների տեսակները

Իրադարձությունները JavaScript-ում կարելի է լայնորեն դասակարգել մի քանի տեսակների` կախված փոխազդեցության տեսակից, որը նրանք ներկայացնում են.

• Մկնիկի իրադարձություններ .

  • clickՀրդեհվում է, երբ մկնիկը սեղմում է տարրի վրա:
  • mouseenter: Գործում է, երբ մկնիկի ցուցիչը մտնում է տարր:
  • mouseleave. Գործում է, երբ մկնիկի ցուցիչը հեռանում է տարրից:

• Ստեղնաշարի իրադարձություններ .

  • keypress: Բռնկում է, երբ սեղմվում է ստեղնը:
  • keydown: Գործում է, երբ ստեղնը սեղմվում է:
  • keyupԲանալին բաց թողնելիս բռնկվում է:

• Ձև իրադարձություններ .

  • submit. Հրդեհվում է, երբ ձևաթուղթ է ներկայացվում:
  • change. Գործում է, երբ մուտքագրման, ընտրության կամ textarea տարրի արժեքը փոխվել է:

Գործնական օրինակներ

Իրադարձությունների ունկնդիրների ավելացում կոճակներին և ձևերին.

• Կոճակի սեղմում Իրադարձություն .

  let button = document.getElementById("clickButton");
  button.addEventListener("click", () => {
      console.log("Button was clicked!");
  });
  

• Ձևաթղթերի ներկայացման իրադարձություն .

  let form = document.getElementById("myForm");
  form.addEventListener("submit", (event) => {
      event.preventDefault(); // Prevent the form from submitting
      console.log("Form submitted!");
  });
  

Ձեռքի վրա վարժություն

Գործնական վարժության համար ուսանողները կստեղծեն ինտերակտիվ ձև, որն արձագանքում է օգտատերերի մուտքերին իրական ժամանակում:

Զորավարժությունների կարգավորում .

1. Ստեղծեք պարզ ձև HTML-ում .

   <form id="liveForm">
       <label for="nameInput">Enter your name:</label>
       <input type="text" id="nameInput" />
       <p id="livePreview"></p>
       <button type="submit">Submit</button>
   </form>
   

2. Ավելացրեք իրադարձությունների ունկնդիրներ ուղիղ նախադիտման համար .

   document.getElementById("nameInput").addEventListener("input", function() {
       let preview = document.getElementById("livePreview");
       preview.innerText = "Preview: " + this.value;
   });
   

Այս վարժությունում ձևը ներառում է մուտքագրում, որտեղ օգտվողները կարող են մուտքագրել իրենց անունը: Երբ օգտատերը մուտքագրում է, մուտքային իրադարձությունը սկսում է թարմացնել պարբերության տարրը ( livePreview)՝ մուտքի նախադիտմամբ՝ ցույց տալով, թե ինչպես կարելի է իրադարձությունների մշակումը օգտագործել՝ արձագանքող ինտերֆեյս ստեղծելու համար:

Իրադարձությունների մշակման առաջադեմ տեխնիկա

Իրադարձությունների տարածում. փրփրում և գրավում

Իրադարձությունների տարածումը մեխանիզմ է, որը սահմանում է, թե ինչպես են իրադարձությունները տարածվում կամ ճանապարհորդում DOM ծառի միջով՝ հասնելու իրենց թիրախային տարրին և պոտենցիալ փուչիկների վերև կամ գրավելու նպատակին հասնելուց հետո:

• Իրադարձությունների փրփրում (լռելյայն) . Այս փուլում իրադարձությունը սկսվում է ամենախորը, ամենաներքին տարրից (իրադարձության թիրախ) և այնուհետև գործարկում է իր մայր տարրերի մշակողները՝ հաջորդաբար դեպի ամենաարտաքին տարրը (փաստաթղթի օբյեկտ): Սա իրադարձությունների լռելյայն վարքագիծն է:

• Իրադարձությունների գրավում . Ի տարբերություն փրփրացողի, գրավումը տեղի է ունենում, երբ իրադարձությունը գրավում է ամենահեռավոր տարրից մինչև թիրախ տարրը: Դուք կարող եք ակտիվացնել գրավումը` addEventListenerսահմանելով երրորդ արգումենտը true:

// Example of setting up capturing
document.getElementById("parent").addEventListener("click", function() {
    console.log("Parent clicked - capturing phase");
}, true); // Capturing is enabled

Այս մեխանիզմների ըմբռնումը շատ կարևոր է բարդ ինտերակտիվ վեբ հավելվածներ նախագծելիս՝ կառավարելու համար, թե ինչպես են իրադարձությունները մշակվում և տարածվում DOM ծառի միջոցով:

Կանխադրված գործողությունների կանխարգելում

Շատ DOM տարրեր ունեն լռելյայն վարքագիծ, որը կարող է իրականացվել կոնկրետ իրադարձությունների վրա: Օրինակ, ձևի տարրում ուղարկել կոճակը սեղմելը սովորաբար թարմացնում է էջը: Դուք կարող եք կանխել այս լռելյայն գործողությունները՝ օգտագործելով event.preventDefault()իրադարձությունների մշակիչը:

• Օգտագործեք գործը ձևի մշակման մեջ .

  document.getElementById("myForm").addEventListener("submit", function(event) {
      event.preventDefault(); // Prevents the form from submitting
      // Additional code to handle form submission via JavaScript
  });
  

Սա հատկապես օգտակար է ձևաթղթերի մշակման համար, որտեղ դուք ցանկանում եք ամբողջական վերահսկողություն ունենալ ներկայացման գործընթացի վրա, հնարավոր է կատարել վավերացում, կատարել AJAX հարցում կամ շահարկել տվյալները նախքան դրանք սերվեր ուղարկելը:

Օգտագործում thisիրադարձություններում

Իրադարձությունների մշակողի համատեքստում thisհիմնաբառը վերաբերում է այն տարրին, որի վրա իրադարձությունների մշակիչը ներկայումս կատարում է: Սա չափազանց օգտակար է, երբ ցանկանում եք շահարկել միջոցառումը ստացած տարրը կամ մուտք գործել դրա հատկությունները:

document.getElementById("myButton").addEventListener("click", function() {
    console.log(this.textContent); // `this` refers to the button
    this.textContent = "Clicked"; // Changes the button text to 'Clicked'
});

Զորավարժություն. Ձևաթղթի ներկայացում իրադարձությունների տարածման հսկողությամբ

Նպատակը . Իրականացրեք վարժություն, որտեղ ուսանողները պետք է դադարեցնեն իրադարձությունների տարածումը և կանխեն ձևաթղթի լռելյայն վարքագիծը՝ այն JavaScript-ի միջոցով մշակելու համար:

Կարգավորում :

1. HTML կառուցվածք .

   <form id="signupForm">
       <label for="username">Username:</label>
       <input type="text" id="username" name="username">
       <button type="submit">Sign Up</button>
   </form>
   

2. JavaScript :

   document.getElementById("signupForm").addEventListener("submit", function(event) {
       event.preventDefault(); // Prevent default form submission
       event.stopPropagation(); // Stop the event from bubbling up
       let username = document.getElementById("username").value;
       console.log("Signing up user:", username);
       // Additional code to process the username
   });
   

Այս վարժությունում ուսանողները միջոցառման լսողին կկցեն մի ձևի, որը դադարեցնում է ձևի ավանդական ձևով ներկայացումը և կանխում է միջոցառման DOM-ի փրփուրը: Այս մոտեցումը թույլ է տալիս ձևը ամբողջությամբ մշակել JavaScript-ի շրջանակներում՝ առաջարկելով ավելի շատ վերահսկողություն տվյալների մշակման և փոխազդեցության հոսքի նկատմամբ: Այս պրակտիկան ամրապնդում է իրադարձությունների մշակման, տարածման և կանխադրված գործողությունների կանխարգելման մասին պատկերացումները իրական աշխարհի սցենարներում:

Ներածություն Web Storage-ին

Վեբ պահեստավորման ակնարկ

Web Storage API-ն ապահովում է մեխանիզմներ, որոնց միջոցով զննարկիչները կարող են պահել բանալին/արժեք զույգերը շատ ավելի ինտուիտիվ ձևով, քան թխուկների օգտագործումը: Վեբ պահեստավորման երկու մեխանիզմներն են localStorageև sessionStorage, որոնցից յուրաքանչյուրը սպասարկում է տարբեր կարիքներ և ապահովում է հաճախորդի բրաուզերի վրա տվյալների պահպանման ուղիներ:

Վեբ պահեստավորման առանձնահատկությունները .

• Տարողություն . առաջարկում է ավելի շատ պահեստային տարածք, քան թխուկները:
• Մատչելիություն . Պահված տվյալները հասանելի են միայն հաճախորդի կողմից, այլ ոչ սերվերի կողմից:
• Անվտանգություն ․
• Պարզություն . ապահովում է պարզ API՝ տարրեր սահմանելու, ստանալու և հեռացնելու մեթոդներով:

localStorage vs sessionStorage

1. Տեղական Պահեստավորում .

   • Համառություն . localStorage-ում պահվող տվյալները պիտանելիության ժամկետ չունեն: Այն պահվում է օգտատիրոջ զննարկիչում այնքան ժամանակ, մինչև այն հստակորեն չջնջվի կամ սկրիպտի միջոցով կամ օգտագործողի կողմից, որը ձեռքով մաքրում է բրաուզերի քեշը:
   • Օգտագործման դեպք . Իդեալական է օգտատիրոջ նախապատվությունները կամ այլ տվյալներ պահելու համար, որոնք պետք է պահպանվեն նույնիսկ այն ժամանակ, երբ զննարկիչը փակ է և վերաբացվում է (օրինակ՝ օգտատիրոջ թեմա, մուտքի նշաններ):

2. նիստ Պահպանում :

   • Համառություն . sessionStorage-ում պահվող տվյալները մաքրվում են, երբ ավարտվում է էջի աշխատաշրջանը, այսինքն՝ երբ փակվում է դիտարկիչի ներդիրը: Այն չի ազդում էջի վերաբեռնումների և վերականգնումների վրա:
   • Օգտագործման դեպք . Օգտակար է տվյալների համար, որոնք չպետք է պահպանվեն նիստերի միջև ընկած ժամանակահատվածում, օրինակ՝ այնպիսի ձևի մեջ մուտքագրված տվյալները, որոնք չպետք է երկարաժամկետ պահվեն:

Նյութերի կարգավորում, ստացում և հեռացում

Ե՛վ localStorage, և՛ sessionStorage-ը բացահայտում են նույն մեթոդները՝ ապահովելով հասարակ API՝ պահպանված տվյալները կառավարելու համար:

• Setting Items . setItem(key, value)մեթոդը օգտագործվում է տվյալների պահպանման համար, որտեղ keyկա տող, ինչպես valueնաև պահվում է որպես տող:

  localStorage.setItem("username", "JohnDoe");
  

• Նյութերի ստացում . getItem(key)մեթոդն օգտագործվում է տվյալների առբերման համար: Եթե ​​բանալին գոյություն չունի, այն վերադառնում է null:

  let username = localStorage.getItem("username");  // "JohnDoe"
  

• Նյութերի հեռացում . removeItem(key)մեթոդն օգտագործվում է տարրը պահեստից ջնջելու համար:

  localStorage.removeItem("username");
  

• Մաքրում բոլոր տվյալները . clear()մեթոդը կարող է օգտագործվել ամբողջ պահեստը դատարկելու համար:

  localStorage.clear();
  

Գործնական վարժություն՝ թեմայի նախապատվության հավելվածի ստեղծում

Նպատակը . Ստեղծեք պարզ ծրագիր, որը թույլ է տալիս օգտատերերին ընտրել թեմայի գույն վեբկայքի համար, որը կպահպանվի նիստերի ընթացքում՝ օգտագործելով localStorage.

Քայլեր .

1. HTML կարգավորում .

   <label>Select your theme color:</label>
   <select id="themeSelector">
       <option value="light">Light</option>
       <option value="dark">Dark</option>
   </select>
   <button onclick="saveTheme()">Save Theme</button>
   

2. JavaScript-ի իրականացում .

   function saveTheme() {
       let theme = document.getElementById("themeSelector").value;
       localStorage.setItem("theme", theme);
   }
   
   function loadTheme() {
       let theme = localStorage.getItem("theme");
       if (theme) {
           document.body.className = theme;  // Assuming CSS classes for themes exist
           document.getElementById("themeSelector").value = theme;
       }
   }
   
   window.onload = loadTheme;  // Load the theme when the document loads
   

Ուսուցման արդյունքները :

• Ուսանողները կսովորեն, թե ինչպես շփվել localStorageտվյալների սահմանման, ստանալու և կառավարելու համար:
• Նրանք կհասկանան, թե ինչպես կիրառել մշտական ​​տվյալների պահեստավորում՝ օգտատերերի փորձը բարելավելու համար՝ հիշելով օգտատերերի նախապատվությունները դիտարկիչի աշխատաշրջաններում:

Այս վարժությունը ոչ միայն ամրապնդում է Web Storage API-ի ըմբռնումը, այլ նաև ցույց է տալիս դրա գործնական օգտագործումը իրական աշխարհի վեբ հավելվածներում, ինչպիսիք են օգտատիրոջ կարգավորումները հարմարեցնելն ու հիշելը:

Համատեղելով իրադարձությունների մշակումը վեբ պահեստի հետ

Ինտերակտիվ հավելվածի օրինակ՝ անելիքների ցանկ

Միջոցառումների մշակումը Web Storage-ի հետ համատեղելու ամենավառ օրինակներից մեկը անելիքների ցանկի հավելվածի ստեղծումն է: Այս հավելվածը թույլ կտա օգտատերերին ավելացնել առաջադրանքներ, նշել դրանք որպես ավարտված և պահպանել ցուցակի վիճակը դիտարկիչի աշխատաշրջաններում՝ օգտագործելով localStorage.

Դիմումի առանձնահատկությունները .

1. Ավելացնել առաջադրանքներ . օգտատերերը կարող են առաջադրանքներ մուտքագրել մուտքագրման դաշտում և ավելացնել դրանք ցանկում՝ սեղմելով կոճակը կամ սեղմելով enter:
2. Նշել առաջադրանքները որպես ավարտված . օգտատերերը կարող են սեղմել առաջադրանքների վրա՝ փոխելու դրանց ավարտի կարգավիճակը:
3. Համառություն . անելիքների ցանկի վիճակը պահվում է localStorage, այնպես որ այն մնում է անփոփոխ նույնիսկ այն բանից հետո, երբ զննարկիչը կամ ներդիրը փակվի և վերաբացվի:

HTML կառուցվածք .

<div id="todoApp">
    <input type="text" id="newTask" placeholder="Add a new task" />
    <button onclick="addTask()">Add Task</button>
    <ul id="taskList"></ul>
</div>

CSS ավարտված առաջադրանքների համար (տեսողական հետադարձ կապի համար).

.completed {
    text-decoration: line-through;
}

JavaScript իրադարձությունների մշակման և տեղային պահպանման համար .

function loadTasks() {
    let tasks = JSON.parse(localStorage.getItem('tasks')) || [];
    let taskList = document.getElementById('taskList');
    taskList.innerHTML = ''; // Clear existing tasks in the DOM
    tasks.forEach((task, index) => {
        let li = document.createElement('li');
        li.textContent = task.description;
        li.className = task.completed ? 'completed' : '';
        li.addEventListener('click', () => toggleTask(index));
        taskList.appendChild(li);
    });
}

function addTask() {
    let newTaskInput = document.getElementById('newTask');
    let tasks = JSON.parse(localStorage.getItem('tasks')) || [];
    if (newTaskInput.value) {
        tasks.push({ description: newTaskInput.value, completed: false });
        localStorage.setItem('tasks', JSON.stringify(tasks));
        newTaskInput.value = ''; // Clear input field
        loadTasks(); // Refresh the list
    }
}

function toggleTask(index) {
    let tasks = JSON.parse(localStorage.getItem('tasks'));
    tasks[index].completed = !tasks[index].completed;
    localStorage.setItem('tasks', JSON.stringify(tasks));
    loadTasks();
}

window.onload = loadTasks; // Load tasks when the document is ready

Զորավարժություն. Ընդլայնել ինտերակտիվ ձևը

Ուսանողները կուժեղացնեն ինտերակտիվ ձևը, որը նրանք ստեղծել են ավելի վաղ՝ ներառելով ֆունկցիոնալությունը, որը պահպանում է օգտատիրոջ մուտքերը localStorage: Սա թույլ կտա ստանալ տվյալները, երբ ձևը վերաբեռնվի:

Իրականացման առանձնահատկությունները .

1. Պահպանել մուտքային տվյալները . Ամեն անգամ, երբ օգտատերը փոփոխում է ձևի դաշտը, տվյալները պահեք այստեղ localStorage:
2. Առբերեք տվյալները բեռնվածության վրա . Երբ ձևը բեռնվում է (օրինակ, երբ էջը թարմացվում է), լրացրեք ձևի դաշտերը՝ պահված տվյալներով localStorage:

Օրինակ Սցենար . Ենթադրենք, որ ձևը հավաքում է օգտվողի նախապատվությունները, ինչպիսիք են սիրելի գույնը և էլփոստի հասցեն:

HTML :

<form id="preferenceForm">
    <input type="email" id="email" placeholder="Enter your email">
    <input type="color" id="favoriteColor" title="Choose your favorite color">
    <button type="submit">Save Preferences</button>
</form>

JavaScript :

document.getElementById('preferenceForm').addEventListener('change', function(event) {
    localStorage.setItem(event.target.id, event.target.value);
});

function loadPreferences() {
    document.getElementById('email').value = localStorage.getItem('email') || '';
    document.getElementById('favoriteColor').value = localStorage.getItem('favoriteColor') || '#ffffff'; // Default to white
}

window.onload = loadPreferences;

Այս վարժությունը կօգնի ուսանողներին հասկանալ, թե ինչպես արդյունավետ կերպով համատեղել իրադարձությունների մշակումը localStorageդինամիկ, օգտագործողի համար հարմար վեբ հավելվածներ ստեղծելու համար, որոնք հիշում են օգտատերերի մուտքերը նիստերի ընթացքում՝ զգալիորեն բարելավելով օգտատիրոջ փորձը:

Original text

Rate this translation

Your feedback will be used to help improve Google Translate