Pracujte v systéme

Posledná aktualizácia: 1. 11. 2015

Zhromaždené zbierky

Nakoniec sme sa pozreli na vložené obslužné nástroje udalostí, ktoré sú uvedené v kóde prvku za ďalšími atribútmi:

    Hoci tento prístup funguje zázračne, má veľa nedostatkov:

    HTML kód sa mieša s kódom JavaScript, spojenie s ktorým sa stáva dôležitejším pri vývoji, zlepšovaní a údržbe programu

    Predplatiteľov je možné nainštalovať aj pre existujúce výtvory na webovej lokalite prvkov.

    p align="justify"> Dynamické vytváranie prvkov v tejto forme vylučuje možnosť spracovania

K prvku pre jednu stránku môže byť pripojený iba jeden popis.

Bez zmeny kódu nie je možné kolektor vymazať

Sila kolektorov

Problémy, ktoré vznikajú neustálym používaním kolektorov, boli výsledkom sily kolektorov.

Rovnako ako prvky HTML majú atribúty pre obslužné nástroje, v kóde JavaScript prvkov DOM môžeme odstrániť silu obslužných nástrojov, ktoré zodpovedajú atribútom:

function handler(e)( alert(e.type); ) document.getElementById("rect").onclick = handler;

Vo výsledku nám stačí vziať silu onclick a priradiť ju k jeho funkcii, ktorá sa nazýva kolektor.

Z tohto dôvodu je kód HTML integrovaný s kódom JavaScript.

Za zmienku tiež stojí, že vyhľadávací nástroj prehliadača automaticky odovzdá objekt udalosti, ktorý ukladá všetky informácie o téme.

Preto môžeme tento objekt priradiť funkcii detektora ako parameter.

Tu opäť vstupuje do hry myšlienka kliknutia.

Môžete tiež použiť iný parameter názvu funkcie:

Funkcia handler(e)( alert(e.type); ) var rect = document.getElementById("rect");

rect.addEventListener("kliknutie", obsluha);

Podobne sa pridáva aj načúvací prístroj:

Rect.removeEventListener("click", handler);

Výhodou najlepších načúvacích systémov sú tie, ktoré môžeme nainštalovať pre jednu konkrétnu funkciu:

Počet kliknutí var = 0;

function handlerOne(e)( alert(e.type); ) function handlerTwo(e)( clicks++; var newNode = document.createElement("p"); newNode.textContent = "stlačené" + kliknutia; document.body.appendChild ( newNode var rect = document.getElementById("rect");

// pripojí prvý handler rect.addEventListener("click", handlerOne);

// pripojiť ďalší poslucháč rect.addEventListener("click", handlerTwo);

  • Podiya – všetky tie veci, ktoré sa stali a stávajú sa zjavnými.
  • Prehliadač napríklad vygeneruje správu pri sťahovaní dokumentu, keď používateľ presunie kurzor myši na webovú stránku alebo stlačí kláves na klávesnici.

    Registrácia kolekcií vzoriek

  • Každá forma má metastav.
Meta idea (alebo celý objekt) – objekt, v ktorom je myšlienka napísaná alebo s ktorou je táto myšlienka spojená.

Pre akúkoľvek tému si môžete zaregistrovať funkciu (jednu alebo viac), ktorú prehliadač automaticky zavolá, keď je téma neplatná.

Funkcia, ktorá sa používa na spracovanie myšlienok, sa nazýva sluch alebo spracovanie.

Režim vyhľadávania je zaregistrovaný na cieľovom objekte.

Názov webovej stránky je "použiť prísne";

nech div = document.querySelector("div");

nech telo = document.querySelector("telo");

nech html = document.querySelector("html");

div.addEventListener("click", function() (alert("div"); ), false);

body.addEventListener("click", function() (alert("body"; ), false);

nech div = document.querySelector("div");

html.addEventListener("click", function() (alert("html"); ), false);

document.addEventListener("click", function() (alert("document"); ), false);

window.addEventListener("kliknutie", funkcia () (alert("okno"); ), false);

1
2
3
4
5
6
7

Skúste to »

Ak kliknete na prvok, kliknutie sa zobrazí v nasledujúcom poradí:

Ak kliknete na prvok, kliknutie sa zobrazí v nasledujúcom poradí:

17
18
19
20
21
22

V tomto modeli proces začína na najmenšom špecifickom uzle (objekt okna) a potom klesá cez hierarchiu k najšpecifickejšiemu prvku.

Poďme sa pozrieť na kód novej webovej stránky:

Hlavnou metódou je addEventListener(), ktorá tomuto prvku priradí poslucháča.

Rešpektuje súčasnosť.

Infekcia sa nezasekne veľmi často, ale JavaScript má nové nápady, ktoré je možné spracovať iba pomocou tejto metódy.

element.addEventListener(podia, funkcia)

Parametre:

podiya - podiya, ktorú je potrebné orezať

funkcia - funkcia, ktorá sa stáva kolektorom

V parametroch tejto metódy sú názvy podtypov napísané v záložkách a nie je potrebné pred ne písať slovo.

Ak kliknete na prvok, kliknutie sa zobrazí v nasledujúcom poradí:

24
25
26
27
28
29

HTML kód:

Nové tlačidlo

var newinform = funkcia () ( alert("Stlačené nové tlačidlo"); );

var newbutton = document.getElementById("newbutton");

newbutton.addEventListener("kliknutie", newinform);

Metóda removeEventListener() vám umožňuje odstrániť poslucháča.

element.removeEventListener(podia, funkcia)

13
14
15
16

Ako dodatočný prvok k uvažovanej metóde je možné zvážiť množstvo vzoriek rovnakého typu.

Potom z nich musíte dôkladne odstrániť kožu.

Predmet objektu

Počas hodiny aplikácie na kožu sa vytvorí predmet procesu.

Cieľom je obsahovať informácie o produkte.

Rôzne typy majú rôzne predmety.

Niet pochýb o sile, ktorú akýkoľvek predmet vynára.

Napríklad typ sily je typ pomsty.

Akčný objekt sa odovzdá ako parameter funkcii, ktorá je odosielateľom.

Ak chcete získať prístup k objektu, musíte vytvoriť parameter pre funkciu.

  • Napríklad môžeme použiť funkciu onClick prvku tlačidla na spustenie funkcie, keď používateľ klikne na toto tlačidlo.
  • Máme na mysli to isté ako značky HTML.
  • Použite toto:
  • Presunutím myši nad „horúcu zónu“ na webovej stránke
  • Vyberte vstupné polia vo formulári HTML

    Spracovanie údajov pomocou HTML formulárov

    Stlačenie kľúča

    Poznámka: Funkcie musia byť zvolené súčasne s funkciami a funkcia nebude zvolená, kým nebude funkcia dokončená!

    onLoad a onUnload

    Priestupky onLoad a onUnload sú tiež často zneužívané, ak máme čo do činenia so súbormi cookie, ktoré je potrebné nainštalovať, keď sa používateľ prihlási alebo odstráni stránku.

    Môžete napríklad vytvoriť únikové okno, ako keď sa spýtate na meno kristuvacha, ak najprv navštívite svoju stránku.

    Často ma zachraňujú cookies.

    Keď nabudúce prejdete na svoju stránku, môžete vytvoriť ďalšiu nepríjemnú správu, napríklad: „Prosíme Vasyu Ivanova!“

    onFocus, onBlur a onChange

    Polia onFocus, onBlur a onChange sa pri zmene polí formulára často poškodia.

    Nižšie je zadok, ako vikoristovuvat toto meno.

    Funkcia checkEmail() sa zavolá, keď iba používatelia zmenia hodnoty polí:

    onMouseOver

    Funkciu onmouseover je možné nakonfigurovať tak, aby spustila funkciu, keď používateľ presunie myš nad prvok HTML.

    Poznámka autora: Keď je webová stránka JavaScript hotová a pripravená, spustí sa celá kaskáda udalostí, ktorých je ešte viac, keď klient začne so stránkou tak či onak interagovať.

    JavaScript.

    Rýchly štart

    Tieto mutácie a plagáty.

    Prvky, ktoré sú zmutované, sa pridávajú pri zmene štruktúry DOM: napríklad, keď sú prvky na strane vložené alebo odstránené pomocou dodatočného skriptu.

    Špeciálny kód, ktorý je vhodný najmä pre prvok DOM, vytvára dolný index.

    < input type = "text" id = "username" onblur = "checkName()" >

    JS má tri spôsoby, ako vytvoriť prieskumníka:
    1. Štandardný HTML interpret prostredníctvom atribútov

    Najstarší spôsob spájania polí, jeden z najrozsiahlejších systémov.

    Metóda vikoryst extrahuje špeciálne atribúty z distribúcie.

    Napríklad:

    V aplikácii po tom, čo pole odoberie zameranie, používateľ prejde do ďalšieho poľa (napríklad pomocou TAB alebo základného kliknutia) vyplniť prvok s názvom funkcia checkName, ktorý je napísaný v JS.

    Poznámka autora: Keď je webová stránka JavaScript hotová a pripravená, spustí sa celá kaskáda udalostí, ktorých je ešte viac, keď klient začne so stránkou tak či onak interagovať.

    Štandardné kódery HTML sa neodporúčajú používať v každodennom vývoji, najmä prostredníctvom tých, ktoré kombinujú funkčnosť so značkami, čo komplikuje prácu a zlepšuje kód.

    2. Štandardné deklarácie podobné DOM

    Táto technika oddeľuje JS a layout, no zároveň ho aj prepája – každej stránke je možné priradiť len jednu funkciu.

    Ekvivalentná položka analyzátora HTML pre model DOM by bola:

    var username = document.getElementbyId("používateľské meno");

    username.onblur = checkName;

    užívateľské meno.

    onblur = checkName;

    Naučte sa základy JavaScriptu v praktickej aplikácii na vytvorenie webovej aplikácie

    Rovnako ako v predchádzajúcom príklade sa funkcia checkName spustí po tom, čo prvok formulára stratí zameranie.

    3. Poslucháči udalostí

    Nie sú pokryté všetky podmienky

    Monitory mutácií nedokážu odhaliť všetky zmeny vo všetkých prvkoch na stránke.

    Napríklad neexistuje metóda na zmenu výšky prvku (keď sa kontajner otvorí v responzívnom dizajne, text v strede sa prekreslí a prvky sa zväčšia).

    Napriek tomu existujú spôsoby, ako urobiť zmeny, o ktorých sa dozviem v súčasnej situácii.

    Pripevnite podlahy k správnym prvkom

    Akcia po kliknutí je obmedzená na mnoho prvkov vrátane odoslania.