Akcia kliknutia Javascript. javaScript udalosť onclick a tri spôsoby spracovania udalostí

Zdravím všetkých, ktorí chcú pochopiť fungovanie onclick (). Dnešný článok vám raz a navždy pomôže pochopiť princíp fungovania tohto handlera a rozobrať ho konkrétny príklad onclick JavaScript, alebo skôr príklady.

Ukážem vám niekoľko spôsobov práce s týmto nástrojom, vysvetlím ich výhody a nevýhody a popíšem úloha jQuery s udalosťami. A teraz prejdime k rozboru materiálu!

Priradenie obsluhy udalostí

Začnime teoretickou časťou otázky. Takmer každý na ich stránkach spracováva skripty. A väčšinou ide o rôzne udalosti. Aby všetky tieto naprogramované udalosti fungovali, musíte si pre ne nainštalovať obsluhu.

Podľa pravidiel písania všetci handleri zahrnú do svojho mena „zapnuté + názov udalosti“, čo je dodržané po kliknutí(). V závislosti od vybranej udalosti sa spracovanie uskutoční v dôsledku rôzne akcie. V našom prípade pri použití po kliknutí() vykonajú sa iba tie udalosti, ktoré boli spustené kliknutím ľavým tlačidlom myši.

Rôzne spôsoby priradenia obsluhy udalosti

K dnešnému dňu existuje niekoľko možností na zavedenie obsluhy niektorých alebo niektorých udalostí do kódu.

Používanie jednoduchých udalostí

Začnime s jednoduchá možnosť, ktorá spočíva vo vložení onclick () do označenia samotného html dokumentu. Vyzerá to takto:

Ako vidíte, keď kliknete na tlačidlo ľavým tlačidlom myši, zobrazí sa správa „Klikni-klikni!“. Chcem vás upozorniť na jeden malý, ale významný detail. Vnútri upozorniť možno použiť iba jednoduché úvodzovky (‘’).

aj v tento prípad môže byť použité kľúčové slovo toto. Odkazuje na aktuálny prvok a poskytuje mu všetky dostupné metódy.

Kliknite na mňa

Tento riadok kódu vytvorí tlačidlo s textom „Klikni na mňa“. Po kliknutí sa na obrazovke zobrazí hlásenie: „Klikni!“ Nahradí krstný názov tlačidla.

Táto metóda je nepochybne veľmi jednoduchá. Hodí sa však len na podobné úlohy, t.j. zobrazovanie správ alebo vykonávanie jednoduchých príkazov.

Ak je potrebné použiť cyklické konštrukcie, použiť značky atď túto metódu nesedí. Zníži to stupeň čitateľnosti kódu a zároveň ho urobí ťažkopádnym a nedbalým.

V tomto prípade by ste sa mali uchýliť k funkciám.

Práca s funkciami

Funkcie umožňujú oddelenie požadovaný kód do samostatného bloku, ktorý možno neskôr zavolať cez obslužný program udalosti v .

Ako príklad som priložil aplikáciu na zobrazenie výsledného čísla používateľovi v rôznych mocninách, počnúc 1. a končiac 5. Na tento účel som vytvoril funkciu countPow(), ktorému môžete odovzdať parametre. V mojej aplikácii musí používateľ zadať číslo ako funkčnú premennú.

Takže pomocou obsluhy spojenej s vyššie uvedenou funkciou boli vykonané a zobrazené výpočty.

Táto metóda sa často používa vo vývoji. Nie je to však najobľúbenejšie, pretože nie vždy je vhodné viazať udalosti týmto spôsobom. Niekedy je na vyriešenie niektorých problémov najlepšou možnosťou poskytnúť flexibilné viazanie objektov na udalosti pomocou ich vlastností.

Vlastnosti prvku DOM

Pre tých, ktorí nevedia, DOM znamená "Objektový model dokumentu"("model objektu dokumentu"). Je to hlavný nástroj na vykonávanie rôznych zmien a manipulácií s prvkami.

Keďže DOM je hierarchický strom, k určitým vlastnostiam a metódam objektov stránky je možné pristupovať postupovaním cez špecifické vetvy.

Ako príklad som sa rozhodol zmeniť farbu pozadia z predvolenej na modrú. Aby som to urobil, prešiel som reťazou document.body.style.backgroundColor.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

Používanie knižnice jQuery

S uvoľnením svetla sa objavilo množstvo ďalších príkazov, vlastností a metód, ktoré výrazne zjednodušujú a skracujú písaný kód. Vývojári najčastejšie používajú vlastnosti na získanie konkrétneho prvku podľa jeho id (document.getElementById (iden)), triedy (element.getElementsByClassName (className)), tagu (elem.getElementsByTagName (tag)) alebo názvu (document.getElementsByName (meno )) .

Aby ste pochopili, čo je v stávke, analyzujte nasledujúci príklad.

Opatrne! Ak kliknete na tlačidlo, dôjde k zmenám s týmto obsahom.

Využi šancu, klikni na mňa!

Ako vidíte, všetko funguje úplne jednoducho.

Ak sa vám môj článok páčil, nezabudnite sa prihlásiť na odber aktualizácií. Pred nami je ešte veľa zaujímavého a poučného. Bol by som vďačný za reposty mojich publikácií. Čau Čau!

S pozdravom Roman Chueshov

Čítať: 629-krát

Udalosť tak jednoduchá ako onclick v javascripte môže byť spustená viacerými spôsobmi a skrýva niektoré jemnosti. Udalosť nastane, keď sa na prvok klikne ľavým tlačidlom myši. Stojí za zmienku, že pri kliknutí sa vyskytnú aj dve ďalšie udalosti, a to stlačenie tlačidla myši a jeho uvoľnenie.

Všetky príklady budú zohľadnené na značke "a" (odkaz). Nehanbite sa, ostatné značky budú fungovať rovnako.

Najjednoduchší spôsob, ako zavesiť udalosť onclick, je napísať ju priamo do značky html:

Príklad 1

Kód v akcii:

V tomto príklade sa po kliknutí na odkaz zobrazí kontextové okno so správou. Okrem akcie sme napísali „return false;“. Je to potrebné, aby sa zabránilo sledovaniu odkazu po spustení udalosti „onclick“. Na iných prvkoch (kde nie je atribút href) možno toto vynechať.

Uvažovanú možnosť možno použiť, ak udalosť obsahuje málo kódu. V opačnom prípade by ste mali venovať pozornosť iným metódam.

Presuňte kód udalosti onclick do funkcie javascriptu

Ďalšia metóda je dobrá, pretože oddeľujeme kód javascript od značiek html. Do značky napíšeme názov funkcie a samotnú funkciu umiestnime do samostatného bloku:

Zmeniť farbu

Kód v akcii:

Ale ani tu nie je všetko dokonalé. Čo robiť, ak chcete zavesiť udalosť na všetky odkazy na stránky a sú ich stovky? Zdá sa, že je to ťažké, ale v skutočnosti - menej ako desať riadkov kódu. Problém je vyriešený pomocou selektorov. V príklade opäť vykonáme akcie s tagom „a“, no nič nám nebráni použiť namiesto odkazu „img“ alebo „div“.

Zavesíme onclick na prvok z kódu javascript

Zvážte iný spôsob, podľa môjho názoru, najpraktickejší a najspoľahlivejší. Je dobré, že udalosť môže byť zavesená na mnohých prvkoch. Ak to chcete urobiť, musíte pomocou selektorov javascriptu vybrať prvky, na ktoré chcete použiť udalosť onclick.

zapnuté

Kód v akcii:

Výberu prvkov selektormi je možné venovať samostatnú tému, môžem len povedať, že podľa novej špecifikácie HTML5 sa ich výber v javascripte zjednodušil. Ak poznáte jquery alebo CSS, výber tých správnych prvkov pre vás nebude zložitý. Napríklad je také ľahké vybrať všetky prvky s triedou „odkaz“ a priradiť im požadovanú akciu:

//vyberte požadované prvky var a = document.querySelectorAll(".link"); // iterovať cez všetky nájdené prvky a zavesiť na ne udalosti .forEach. call(a, function(el) ( // zablokovať udalosť el.click = function(e) ( // vykonať akcie ) ));

Aplikácia jQuery

Ak projekt používa knižnicu jQuery, potom môžete kód ďalej zjednodušiť. Zvážte dva najbežnejšie spôsoby:

$(funkcia()( $(".odkaz").click(funkcia() ( //akcie )); ));

A ešte jedna možnosť, ktorá je identická s predchádzajúcou.

$(funkcia()( $(".odkaz").on("kliknutie", funkcia()( //akcie )); ));

S obsluhou „on ()“ je lepšie sa zoznámiť samostatne, pretože obsahuje množstvo užitočných funkcií. Napríklad možnosť špecifikovať niekoľko udalostí oddelených medzerou, na ktoré sa akcia použije, delegovať udalosti na podradené prvky a je tiež užitočná, ak potrebujete zavesiť udalosť na dynamicky pridávané prvky, ktoré nie sú pôvodne na stránke. .

Niektoré programy udalostí JavaScript pracujú priamo so vstupom používateľa. Moment výskytu a poradie takýchto interakcií nemožno vopred predpovedať.

Ovládače udalostí

Na stlačenie klávesu môžete reagovať neustálym čítaním jeho stavu, aby ste zachytili okamih stlačenia klávesu pred jeho opätovným uvoľnením.

Takto sa spracovávalo zadávanie údajov na primitívnych strojoch. Pokročilejšia je detekcia stlačenia klávesu a jej radenie. Program potom môže pravidelne kontrolovať front pre nové udalosti a reagovať na to, čo tam nájde. V tomto prípade si program musí pamätať na skenovanie frontu a robiť to často.

Od stlačenia klávesu, kým program nezistí túto udalosť, v skutočnosti neodpovedá na požiadavky. Tento prístup sa nazýva polling (poll).

Väčšina programátorov sa tomu snaží vyhnúť, ak je to možné.

Najlepším spôsobom je implementovať systém, ktorý umožňuje kódu reagovať na udalosti, keď sa dejú. Prehliadače ho implementujú tak, že poskytujú možnosť zaregistrovať funkcie obsluhy pre konkrétne udalosti JavaScriptu:

Kliknutím na tento dokument aktivujete obsluhu.

Funkcia addEventListener je zaregistrovaná tak, že jej druhý argument sa volá vždy, keď nastane udalosť opísaná prvým argumentom.

Udalosti a uzly DOM

Každá obsluha udalosti prehliadača je zaregistrovaná s kontextom. Keď sa volá funkcia addEventListener, volá sa ako metóda na celé okno, pretože v prehliadači je globálny rozsah ekvivalentný objektu okna. Každý prvok DOM má svoju vlastnú metódu addEventListener, ktorá vám umožňuje počúvať udalosti na tomto prvku:

Kliknite na mňa

Nie je tu žiadny psovod.

V tomto príklade je handler pripojený k uzlu tlačidla. Udalosti myši JavaScript spúšťajú obsluhu, ale kliknutia vo zvyšku dokumentu nie.

Nastavením atribútu onclick uzla dostaneme rovnaký výsledok. Ale uzol má iba jeden atribút onclick, takže pre každý uzol môžete zaregistrovať iba jeden handler. Metóda addEventListener vám umožňuje pridať ľubovoľný počet poslucháčov. Sme teda poistení proti náhodnej výmene už prihláseného psovoda.

Metóda removeEventListener sa volá s rovnakými argumentmi ako metóda addEventListener . Odstráni manipulátor:

Jednorazové tlačidlo

Ak chcete zrušiť funkciu obsluhy, dáme jej názov (napr. raz). Takto to prenesieme do addEventListener aj removeEventListener .

Objekty udalostí

Aj keď sme to v príkladoch vyššie nespomenuli, funkcii obsluhy udalostí JavaScript sa odovzdá argument: objekt udalosti. To poskytuje Ďalšie informácie o udalosti. Napríklad, ak chceme vedieť, ktoré tlačidlo myši bolo stlačené, musíme získať hodnotu ktorej vlastnosti objektu udalosti:

Kliknite na mňa ľubovoľným tlačidlom myši

Informácie uložené v objekte sa líšia v závislosti od typu udalosti. Vlastnosť typu objektu vždy obsahuje reťazec identifikujúci udalosť (napríklad " kliknite"alebo" myšou dole«).

Rozširovanie, šírenie

obsluhy udalostí ( napr. udalosti dotyku JavaScriptu) zaregistrované pre nadradené uzly budú dostávať aj udalosti, ktoré sa vyskytujú v podradených prvkoch. Ak sa kliklo na tlačidlo v odseku, obslužné rutiny udalosti odseku tiež dostanú udalosť kliknutia.

Udalosť sa šíri z uzla, kde k nej došlo, do nadradeného uzla a do koreňového adresára dokumentu. Potom, čo všetky handlery zaregistrované na konkrétnom uzle postupne spustia, dostanú handleri zaregistrovaní pre celé okno možnosť reagovať na udalosť.

Obsluha udalosti môže kedykoľvek zavolať metódu stopPropagation na objekte udalosti, aby zabránila ďalšiemu šíreniu udalosti. To môže byť užitočné, keď máte tlačidlo vo vnútri iného klikateľného prvku a nechcete, aby sa po kliknutí na tlačidlo aktivovalo klikanie vonkajších prvkov.

V nasledujúcom príklade zaregistrujeme handlery " MouseDown» pre tlačidlo aj odsek. Keď kliknete pravým tlačidlom ( Udalosti myši JavaScript), obsluha zavolá metódu stopPropagation, ktorá zabráni spusteniu obsluhy odseku. Po stlačení tlačidla iným tlačidlom myši sa spustia obidva ovládače:

odseku a v ňom tlačidlo.

Väčšina objektov udalostí má cieľovú vlastnosť, ktorá ukazuje na uzol, z ktorého vznikli. Túto vlastnosť môžete použiť, aby ste sa vyhli náhodnému spracovaniu nejakej udalosti, ktorá sa šíri smerom nahor z uzla.

Cieľ udalosti JavaScript môžete použiť aj na rozšírenie rozsahu udalosti konkrétneho typu. Napríklad, ak máte uzol obsahujúci dlhý zoznam tlačidiel, je pohodlnejšie zaregistrovať jeden obslužný nástroj kliknutia pre vonkajší uzol a použiť vlastnosť target na sledovanie toho, či sa na tlačidlo kliklo, než registrovať inštancie obslužného nástroja pre všetky tlačidlá. :

A B C

Predvolené akcie

K mnohým udalostiam sú priradené predvolené akcie. Ak kliknete na odkaz, prejdete na cieľový prvok odkazu. Ak kliknete na šípku nadol, prehliadač sa posunie nadol po stránke. Ak kliknete pravým tlačidlom myši, otvorí sa kontextové menu.

Pre väčšinu typov udalostí sa pred vykonaním predvolených akcií volajú obslužné programy udalostí JavaScript. Ak nechcete, aby sa spustilo predvolené správanie, musíte na objekte udalosti zavolať metódu preventDefault.

Použite ho na implementáciu vlastných klávesových skratiek alebo kontextových ponúk. Alebo prepísať správanie, ktoré používatelia očakávajú. Nasleduje odkaz, ktorý nemožno sledovať:

MDN

Snažte sa to nerobiť, pokiaľ na to nemáte dobrý dôvod.

V závislosti od prehliadača sa niektoré udalosti nemusia zachytiť. V prehliadači Google Chrome je napríklad klávesová skratka ( JavaScript kľúčový kód udalosti) zatvorte aktuálnu kartu ( Ctrl-W alebo Command-W) nie je možné analyzovať pomocou JavaScriptu.

Kľúčové udalosti

Keď používateľ stlačí kláves na klávesnici, prehliadač spustí „ keydown". Keď pustí kľúč, " klávesnica«:

Po stlačení klávesu V sa táto stránka zmení na fialovú.

Táto udalosť sa spustí aj vtedy, keď používateľ stlačí a podrží kláves, alebo keď je kláves stlačený. Napríklad, ak chcete zvýšiť rýchlosť postavy v hre stlačením klávesu so šípkou a znova ju znížiť uvoľnením klávesu so šípkou, potom musíte byť opatrní, aby ste rýchlosť nezvýšili pri každom stlačení klávesu so šípkou.

Predchádzajúci príklad používa vlastnosť objektu keycode udalosti JavaScript. Určuje, ktorý kláves bol stlačený alebo uvoľnený. Nie je však vždy zrejmé, ako previesť číselný kód na skutočný kľúč.

Znakový kód Unicode sa používa na čítanie hodnôt písmen a číslic. Je spojená s písmenom ( veľkými písmenami) alebo číslo uvedené na kľúči. Metóda charCodeAt pre reťazce vám umožňuje získať túto hodnotu:

console.log("Violet".charCodeAt(0)); // → 86 console.log("1".charCodeAt(0)); // → 49

Ostatné kľúče majú menej predvídateľné kódy kľúčov, ktoré sú s nimi spojené. Najlepší spôsob, ako určiť správny kód, je experimentovať. Zaregistrujte obsluhu udalosti stlačenia klávesu, ktorá zachytí prijaté kódy kláves a stlačte požadovaný kláves.

Klávesy ako Shift , Ctrl , Alt spúšťajú udalosti ako bežné klávesy. Ale pri sledovaní kombinácií kláves môžete tiež určiť, či sú tieto klávesy stlačené, a to tak, že sa pozriete na vlastnosti udalostí klávesnice a myši JavaScript: shiftKey , ctrlKey , altKey a metaKey :

Ak chcete pokračovať, stlačte Ctrl-medzerník.

vývoj " keydown" a " klávesnica“ poskytujú informácie o skutočnom stlačení klávesu. Čo ak však chceme samotný vstupný text? Získavanie textu z kľúčových kódov je nepohodlné. Na to existuje podujatie stlačenie klávesy", ktorý vystrelí hneď po " keydown". Opakuje sa spolu s "klávesom dole", pokiaľ je tlačidlo stlačené. Ale len pre klávesy, ktorými sa zadávajú znaky.

Vlastnosť charCode na objekte udalosti obsahuje kód, ktorý možno interpretovať ako znakový kód Unicode. Na konverziu tohto kódu na reťazec jedného znaku môžeme použiť funkciu String.fromCharCode.

Nastavte zameranie vstupu na túto stránku a niečo napíšte.

Uzol DOM, v ktorom sa udalosť vyskytne, závisí od toho, ktorý prvok mal pri stlačení klávesu zameranie vstupu. Bežné uzly nemôžu mať zameranie vstupu ( pokiaľ im nenastavíte atribút tabindex), ale prvky ako odkazy, tlačidlá a polia formulárov môžu.

Ak nie je zameraný žiadny konkrétny prvok, cieľovým uzlom pre kľúčové udalosti a udalosti dotyku JavaScriptu je document.body .

Kliknutia myšou

Kliknutie na tlačidlo myši tiež spúšťa množstvo udalostí. vývoj " myšou dole" a " mouseup" podobný " keydown" a " klávesnica". Spustia sa po stlačení a uvoľnení tlačidla myši. Tieto udalosti sú vyvolané na uzloch DOM, na ktoré sa umiestnil kurzor, keď sa udalosť vyskytla.

Pre zdieľaný uzol, ktorý zahŕňal kliknutie aj uvoľnenie myšou, po " mouseup» udalosť je spustená « kliknite". Ak napríklad stlačíte tlačidlo myši na jednej položke a potom presuniete kurzor na inú položku a tlačidlo uvoľníte, udalosť „ kliknite' sa vyskytne na prvku, ktorý obsahuje obe tieto položky.

Ak dôjde k dvom kliknutiam blízko seba, " dblclick" (dvojité kliknutie). Vyskytuje sa po druhom kliknutí. Ak chcete získať presné informácie o mieste, kde došlo k udalosti myši, musíte získať hodnotu vlastností pageX a pageY, ktoré obsahujú súradnice udalosti (v pixeloch) vzhľadom na ľavý horný roh dokumentu.

Nižšie je uvedená implementácia primitívneho programu na kreslenie. Pri každom kliknutí myšou v dokumente (pod kurzorom) sa pridá bodka:

Vlastnosti clientX a clientY sú podobné ako pageX a pageY , ale odkazujú na viditeľnú časť dokumentu. Možno ich použiť na porovnanie súradníc myši so súradnicami vrátenými funkciou getBoundingClientRect.

Pohyb myši

Zakaždým, keď sa myš pohne, " pohyb myšou z množiny udalostí myši JavaScript. Dá sa použiť na sledovanie polohy myši. Používa sa pri implementácii možnosti presúvať prvky myšou.

V nasledujúcom príklade program zobrazí panel a nastaví obsluhu udalostí tak, aby sa panel pri ťahaní zužoval alebo rozširoval:

Potiahnutím okraja panela zmeňte jeho šírku:

Všimnite si, že psovod pohyb myšou“ je zaregistrovaný pre celé okno. Aj keď sa myš počas zmeny veľkosti presunie z panela, po uvoľnení tlačidla myši stále aktualizujeme šírku panela a ukončíme dotykové udalosti JavaScriptu.

Musíme zastaviť zmenu veľkosti panela, keď používateľ uvoľní tlačidlo myši. Bohužiaľ, nie všetky prehliadače nastavujú „ pohyb myšou» ktorý majetok. Existuje štandardná vlastnosť tlačidiel, ktorá poskytuje podobné informácie, ale nie je podporovaná vo všetkých prehliadačoch. Našťastie všetky hlavné prehliadače podporujú jednu vec: buď tlačidlá alebo ktoré . Funkcia buttonPressed vo vyššie uvedenom príklade sa najskôr pokúsi použiť vlastnosť buttons, a ak nie je dostupná, preskočí na ktorú .

Keď kurzor myši vstúpi alebo opustí uzol, " myšou"alebo" mouseout". Môžu byť použité na vytvorenie efektov vznášania, zobrazenie titulku alebo zmenu štýlu prvku.

Na vytvorenie takéhoto efektu nestačí len začať ho zobrazovať pri udalosti " myšou a ukončiť po udalosti mouseout". Keď sa myš presunie z uzla do jedného zo svojich potomkov, spustí sa udalosť pre nadradený uzol " mouseout". Hoci ukazovateľ myši neopustil rozsah uzla.

Aby toho nebolo málo, tieto udalosti JavaScriptu sa šíria rovnako ako iné udalosti. Keď myš opustí jeden z podriadených uzlov, pre ktorý je zaregistrovaný handler, " mouseout«.

Ak chcete tento problém obísť, môžete použiť vlastnosť relatedTarget objektu udalosti. V prípade udalosti" myšou označuje, na ktorý prvok ste predtým umiestnili kurzor myši. A v prípade výskytu mouseout» - na ktorý prvok sa kurzor presunie. Efekt vznášania zmeníme iba vtedy, keď sa relatedTarget nachádza mimo nášho cieľového uzla.

V tomto prípade zmeníme správanie, pretože kurzor myši bol umiestnený nad uzlom zvonku (alebo naopak):

Ukážte myšou na toto odsek.

Funkcia isInside sleduje nadradené vzťahy daného uzla alebo kým sa nedosiahne vrch dokumentu (keď uzol je nulový). Alebo sa nenájde nadradený prvok, ktorý potrebujeme.

Efekt hover je oveľa jednoduchšie vytvoriť pomocou CSS pseudo-selector:hover , ako je znázornené v nasledujúcom príklade. Ale keď efekt vznášania zahŕňa niečo zložitejšie ako len zmenu štýlu cieľového uzla, potom musíte použiť trik s udalosťami “ myšou" a " mouseout» ( Udalosti myši JavaScript):

Posúvajte udalosti

Zakaždým, keď sa prvok posunie, na prvku sa spustí udalosť posúvania JavaScriptu. Dá sa použiť na sledovanie toho, čo je tento moment zobrazené používateľom; zakázať animáciu mimo výrezu.

V nasledujúcom príklade zobrazujeme indikátor priebehu vpravo hornom rohu dokument a aktualizujte ho tak, aby pri posúvaní stránky nadol vyplnil časti inou farbou:

Posúvajte ma...

Nastavením pre prvok vlastnosť polohy alebo pevné , dostaneme rovnaký výsledok ako nastavenie position:absolute . Týmto spôsobom však zároveň zablokujeme posúvanie prvku spolu so zvyškom dokumentu. V dôsledku toho bude indikátor priebehu staticky fixovaný v hornom rohu. V jeho vnútri je ďalší prvok, ktorého veľkosť sa mení podľa aktuálneho pokroku.

Ako mernú jednotku pri nastavovaní šírky používame % namiesto px, aby sa veľkosť prvku menila úmerne veľkosti indikátora priebehu.

Globálna premenná innerHeight obsahuje výšku okna, ktorú musíme odpočítať od celkovej dostupnej rolovateľnej výšky dokumentu. Keď sa dostanete na spodok dokumentu, nemôžete posunúť okno nadol. S innerHeight je možné použiť aj innerWidth. Deliaca stranaYOffset ( aktuálna poloha rolovacieho okna) maximálnou povolenou polohou posúvania a vynásobením číslom 100 dostaneme percento pre indikátor priebehu.

Volanie preventDefault pri udalosti posúvania JavaScriptu nebráni posúvaniu. Obsluha udalosti sa volá až po rolovaní.

vstupné udalosti zamerania

Keď je prvok zameraný na vstup, prehliadač spustí „ zameranie". Keď sa odstráni vstupné zameranie, " rozmazať«.

Tieto dve udalosti nemajú distribúciu. Obslužná rutina nadradeného prvku nie je upozornená, keď má podradený prvok zameranie vstupu.

Nasledujúci príklad zobrazuje nápovedu pre textové pole, ktorá je momentálne v centre pozornosti:

Názov:

Vek:

Objekt okna prijíma udalosti " zameranie" a " rozmazať„keď používateľ prejde alebo opustí kartu, zobrazí sa okno prehliadača, v ktorom sa dokument zobrazí.

Načítať udalosť

Po dokončení načítania stránky sa pre telo dokumentu a objekty okna spustí udalosť JavaScriptu „load“. Používa sa na plánovanie inicializačných akcií, ktoré vyžadujú načítanie celého dokumentu. Nezabudnite na obsah

Niekedy je potrebné zrušiť funkciu, ktorú sme naplánovali. To sa dosiahne uložením návratovej hodnoty funkcie setTimeout a zavolaním clearTimeout:

var bombTimer = setTimeout(function() ( console.log("BOOM!"); ), 500); if(Math.random()< 0.5) { // 50% chance console.log("Defused."); clearTimeout(bombTimer); }

Funkcia cancelAnimationFrame funguje rovnako ako funkcia clearTimeout . Volá sa hodnotou vrátenou requestAnimationFrame na zrušenie rámca ( ak to ešte nebolo volané).

Podobná sada funkcií, setInterval a clearInterval , sa používa na nastavenie časovača, ktorý by mal akciu opakovať každých X milisekúnd:

var kliešte = 0; var clock = setInterval(function() ( console.log("tick", ticks++); if (ticks == 10) ( clearInterval(clock); console.log("stop."); ) ), 200);

Rozdelenie

Niektoré typy udalostí sa môžu spustiť mnohokrát v krátkom časovom období ( napr. „mousemove“ a javascript scroll event). Pri spracovávaní takýchto udalostí si musíte dávať pozor, aby to netrvalo príliš dlho, inak bude handleru trvať tak dlho, kým vykoná akciu, že interakcia s dokumentom bude pomalá a trhavá.

Ak potrebujete urobiť niečo vlastné v takomto obslužnom programe, môžete použiť setTimeout, aby ste sa uistili, že to nebude trvať príliš dlho. Toto sa bežne označuje ako rozdelenie udalostí. Existuje niekoľko rôznych prístupov k drveniu.

V prvom príklade chceme niečo urobiť, keď používateľ píše. Ale nechceme to robiť po každom stlačení klávesu. Keď používateľ píše rýchlo, musíte počkať, kým nastane pauza. Namiesto okamžitého vykonania akcie v obsluhe udalosti nastavíme oneskorenie. Tiež vymažeme predchádzajúce oneskorenie ( Ak nejaký). Ak sa udalosti vyskytujú v krátkych intervaloch ( menej ako nami stanovené oneskorenie), potom sa oneskorenie z predchádzajúcej udalosti ruší:

Sem niečo napíš...

Odovzdanie nedefinovanej hodnoty do clearTimeout alebo jej volanie pri oneskorení, ktoré už beží, nebude mať žiadny účinok. Už si nemusíme dávať pozor na to, kedy to zvoláme, jednoducho to robíme pri každej akcii.

Ak chcete oddeliť odpovede malým množstvom času, môžete použiť iný scenár. Zároveň by však mali byť spustené počas série podujatí a nielen po ňom. Môžete napríklad poslať odpoveď na udalosti " pohyb myšou» ( Udalosti myši JavaScript) aktuálne súradnice myši, ale iba každých 250 milisekúnd:

Záver

Obslužné programy udalostí nám umožňujú odhaliť a reagovať na udalosti, nad ktorými nemáme priamu kontrolu. Na registráciu takéhoto handlera použite metódu addEventListener.

Každá udalosť patrí k určitému typu (" keydown«, « zameranie“ a tak ďalej), ktoré ho identifikujú. Väčšina udalostí sa spúšťa na konkrétnom prvku DOM a potom sa šíri do rodičovských uzlov prvku. To umožňuje spracovateľom spojeným s týmito prvkami ich spracovať.

Keď je zavolaný handler, odovzdá sa mu objekt udalosti s dodatočnými informáciami o akcii. Tento objekt obsahuje aj metódy na zastavenie ďalšieho šírenia udalosti ( stopPropagation) alebo zabrániť predvolenému prehliadaču spracovať udalosť ( zabrániťPredvolené).

Stlačenie kláves generuje udalosti " keydown«, « stlačenie klávesy" a " klávesnica". Kliknutie myšou generuje udalosti " myšou dole«, « mouseup" a " kliknite". Pohyb myšou -" pohyb myšou«, « mouseenter" a " mouseout«.

JavaScript rolovacia udalosť môže byť definovaná pomocou " rolovať"a zmena zamerania je" zameranie" a " rozmazať". Keď sa dokument načíta pre okno, udalosť " naložiť«.

Naraz môže bežať iba jedna časť programu JavaScript. Obslužné programy udalostí a ďalšie naplánované skripty musia čakať na dokončenie vykonávania iných skriptov vo fronte.

Ak vaša stránka obsahuje fotografiu vašej obľúbenej mačky Murzik, ale nechcete, aby ju niekto skopíroval alebo uložil na pevné miesto, vložte takýto skript do tela stránky.

Spracovanie udalostí

Klientske programy JavaScriptu sú založené na programovacom modeli riadenom udalosťami. Pri tomto štýle programovania webový prehliadač spustí udalosť, keď sa niečo stane s dokumentom alebo niektorým z jeho prvkov. Napríklad webový prehliadač spustí udalosť, keď dokončí načítanie dokumentu, keď používateľ umiestni kurzor myši na hypertextový odkaz alebo stlačí kláves na klávesnici.

Ak má aplikácia JavaScript záujem o špecifický typ udalosti pre konkrétny prvok dokumentu, môže zaregistrovať jednu alebo viacero funkcií, ktoré sa majú zavolať, keď dôjde k tejto udalosti. Majte na pamäti, že toto nie je jedinečná funkcia webového programovania: všetky aplikácie s GUI užívatelia konajú týmto spôsobom - neustále čakajú, kým sa niečo stane (t. j. čakajú na výskyt udalostí), a reagujú na to, čo sa deje.

Typ udalosti je reťazec, ktorý určuje typ akcie, ktorá spôsobila udalosť. Typ „mousemove“ napríklad znamená, že používateľ presunul ukazovateľ myši. Typ „keydown“ znamená, že na klávesnici bol stlačený kláves. A typ „načítania“ znamená, že sťahovanie dokumentu (alebo iného zdroja) zo siete sa dokončilo. Pretože typ udalosti je len reťazec, niekedy sa označuje ako názov udalosti.

Účel podujatia je objekt, v ktorom udalosť nastala alebo s ktorou je udalosť spojená. Keď sa hovorí o udalosti, je bežné spomenúť typ a účel udalosti. Napríklad udalosť „load“ objektu Window alebo udalosť „click“ prvku . Najtypickejšie ciele podujatí v klientske aplikácie v JavaScripte sú objekty Window, Document a Element, ale niektoré typy udalostí sa môžu vyskytnúť aj na iných typoch objektov.

Obslužný program udalostí je funkcia, ktorá spracováva alebo reaguje na udalosť. Aplikácie musia zaregistrovať svoje funkcie obsluhy udalostí vo webovom prehliadači, pričom musia špecifikovať typ udalosti a cieľ. Keď nastane udalosť na zadanom cieli špecifikovaný typ, prehliadač zavolá obsluhu. Keď sa na objekt zavolajú obslužné programy udalostí, niekedy hovoríme, že prehliadač „spustil“ alebo „spustil“ udalosť.

Objekt udalosti je objekt spojený s konkrétnou udalosťou a obsahujúci informácie o tejto udalosti. Objekty udalostí sa odovzdávajú funkcii obsluhy udalostí ako argument (okrem IE8 a novších). skoré verzie, kde je objekt udalosti dostupný iba ako globálna premenná udalosti). Všetky objekty udalosti majú vlastnosť typu, ktorý definuje typ udalosti a vlastnosť cieľ A, ktoré definuje cieľ udalosti.

Pre každý typ udalosti v súvisiaci objekt udalosť je definovaná množinou vlastností. Napríklad objekt udalosti myši obsahuje súradnice ukazovateľa myši a objekt udalosti klávesnice obsahuje informácie o stlačenom klávese a modifikačných klávesoch. Len pri mnohých typoch udalostí štandardné vlastnosti, ako je typ a cieľ, a žiadne ďalšie užitočná informácia. Pre tieto typy udalostí je dôležitý samotný výskyt udalosti a nie sú dôležité žiadne ďalšie informácie.

Propagácia udalostí je proces, pri ktorom prehliadač rozhoduje o tom, ktoré objekty zavolá obsluhy udalostí. V prípade udalostí určených pre jeden objekt (ako je udalosť "načítanie" objektu Window) nie je potrebné ich šíriť. Keď sa však na elemente dokumentu vyskytne udalosť, šíri sa alebo „prebubláva“ v strome dokumentu.

Ak používateľ klikne na hypertextový odkaz, na prvku sa najskôr spustí udalosť „mousemove“. Ten definuje tento odkaz. Potom bude doručený do obklopujúcich prvkov: možno prvok

prvok

a samotný objekt dokumentu. Niekedy je pohodlnejšie zaregistrovať jedinú obsluhu udalosti na objekte dokumentu alebo na inom prvku kontajnera, než sa zaregistrovať na všetkých prvkoch záujmu.

Po definovaní niektorých pojmov môžeme pristúpiť k štúdiu problematiky súvisiacej s udalosťami a ich spracovaním.

Registrácia obsluhy udalostí

Existujú dva hlavné spôsoby registrácie obsluhy udalostí. Prvý sa objaví na skoré štádium rozvoj World Wide Web, je nastaviť vlastnosť objektu alebo prvku dokumentu, ktorý je cieľom udalosti. Druhý spôsob, novší a všestrannejší, je odovzdať handler metóde na objekte alebo prvku.

Vec je komplikovaná skutočnosťou, že každá technika má dve verzie. Vlastnosť obsluhy udalosti sa dá nastaviť v kóde JavaScript alebo na prvku dokumentu definovaním príslušného atribútu priamo na HTML značky. Je možné zaregistrovať obslužné programy pomocou volania metódy štandardná metóda s názvom addEventListener(), ktorý podporujú všetky prehliadače okrem prehliadača IE verzie 8 a nižšej, a ďalšou metódou s názvom attachmentEvent(), ktorú podporujú všetky verzie IE až po IE9.

Nastavenie vlastností obsluhy udalosti

Najjednoduchší spôsob, ako zaregistrovať obsluhu udalosti, je nastaviť vlastnosť cieľa udalosti na požadovanú funkciu obsluhy. Podľa konvencie majú vlastnosti obsluhy udalosti názvy pozostávajúce zo slova „on“, za ktorým nasleduje názov udalosti: onclick, onchange, onload, onmouseover atď. Upozorňujeme, že tieto názvy vlastností rozlišujú veľké a malé písmená a používajú sa iba malé písmená, aj keď je názov typu udalosti viac ako jedno slovo (napríklad "readystatechange"). Nasledujú dva príklady registrácie obsluhy udalostí:

// Priraďte funkciu vlastnosti onload objektu Window. // Funkcia - obsluha udalosti: volá sa pri načítaní dokumentu window.onload = function() ( // Nájsť prvok

var elt = document.getElementById("dodacia_adresa"); // Zaregistrujte obsluhu udalosti, ktorá sa bude volať // tesne pred odoslaním formulára elt.onsubmit = function() ( return validate(this); ) )

Tento spôsob registrácie obsluhy udalostí je podporovaný vo všetkých prehliadačoch pre všetky bežne používané typy udalostí. Vo všeobecnosti všetky široko podporované rozhrania API, ktoré definujú svoje vlastné udalosti, vám umožňujú registrovať obslužné programy nastavením vlastností obsluhy udalostí.

Nevýhodou použitia vlastností obsluhy udalostí je, že sú navrhnuté s predpokladom, že ciele udalosti budú mať najviac jednu obsluhu na typ udalosti. Pri vytváraní knižnice na použitie vo vlastných dokumentoch je najlepšie použiť trik na registráciu handlerov (napríklad volanie metódy addEventListener()), ktorý nezmení ani neprepíše predtým zaregistrované handlery.

Nastavenie atribútov obsluhy udalostí

Vlastnosti obsluhy udalostí na prvkoch dokumentu je možné nastaviť aj definovaním hodnôt atribútov v zodpovedajúcich značkách HTML. V tomto prípade musí byť hodnota atribútu riadok kódu JavaScript. Tento kód by nemal byť úplnou deklaráciou funkcie obsluhy udalosti, ale iba jej telom. To znamená, že implementácia obsluhy udalosti v značke HTML by nemala byť in rovnátka a pred ktorým je kľúčové slovo function. Napríklad:

Ak hodnota atribútu HTML obslužného programu udalosti pozostáva z viacerých príkazov JavaScript, musia byť oddelené bodkočiarkou alebo hodnota atribútu musí obsahovať viacero riadkov.

Niektoré typy udalostí sú určené pre prehliadač ako celok a nie pre žiadny konkrétny prvok dokumentu. Obslužné programy pre takéto udalosti v JavaScripte sú registrované v objekte Window. V značke HTML musia byť umiestnené v značke , ale prehliadač ich zaregistruje do objektu Window. Nasledujúce je úplný zoznam obslužné nástroje udalostí definované v koncepte špecifikácie HTML5:

onafterprint onfocus on-line onreveize onbeforeprint onhashchange onpagehid onstorage onforeforeload onload onpagezobrazenie onundo onblur onmessage onpopstate onunload onerror onoffline onredo

Pri vývoji skriptov na strane klienta je bežné oddeliť značky HTML od kódu JavaScript. Programátori, ktorí dodržiavajú toto pravidlo, sa vyhýbajú (alebo sa aspoň snažia vyhnúť) používaniu atribútov obsluhy udalostí HTML, aby sa vyhli zmiešaniu kódu JavaScript a značiek HTML.

addEventListener()

AT štandardný model udalosť, podporovanú všetkými prehliadačmi okrem IE verzie 8 a nižšej, cieľom udalosti môže byť akýkoľvek objekt – vrátane objektov Window a Document a všetkých objektov Elements prvkov dokumentu – definujúce metódu s názvom addEventListener(), pomocou ktorého môžete na tento účel zaregistrovať obsluhu udalostí.

Metóda addEventListener() má tri argumenty. Prvým je typ udalosti, na ktorú je handler zaregistrovaný. Typ udalosti (alebo názov) musí byť reťazec a nesmie obsahovať predponu „on“, ktorá sa používa pri nastavovaní vlastností obsluhy udalosti. Druhým argumentom metódy addEventListener() je funkcia, ktorá by sa mala volať, keď nastane udalosť zadaného typu. Posledným argumentom metódy addEventListener() je boolovská hodnota. Zvyčajne tento argument prejde falošné. Ak to prejdeš ako true, funkcia sa zaregistruje ako obslužná rutina zachytenia a bude volaná v inej fáze šírenia udalosti.

Špecifikácia sa môže v priebehu času meniť, aby umožnila vynechať tretí argument namiesto toho, aby bol vyslovene zadaný ako falošný, ale v čase písania tohto článku viedla absencia tretieho argumentu v niektorých súčasných prehliadačoch k chybe.

Nasledujúci úryvok registruje dva obslužné programy udalosti „kliknutia“ na prvok

. Venujte pozornosť rozdielom medzi dvoma použitými metódami:

Klikni na mňa!

Volanie metódy addEventListener() s reťazcom „click“ ako prvým argumentom nijako neovplyvní hodnotu vlastnosti onclick. V úryvku vyššie sa kliknutím na tlačidlo zobrazia dve dialógové okná. výstraha systému Windows(). Čo je však dôležitejšie, metódu addEventListener() možno volať viackrát a možno ju použiť na registráciu viacerých funkcií obsluhy pre rovnaký typ udalosti na rovnakom objekte. Keď sa v objekte vyskytne udalosť, všetky obslužné programy registrované pre daný typ udalosti budú volané v poradí, v akom boli zaregistrované.

Viacnásobné volanie metódy addEventListener() na ten istý objekt s rovnakými argumentmi nemá žiadny účinok – funkcia handler je zaregistrovaná iba raz a opakované volania nemajú vplyv na poradie, v ktorom sa handlery volajú.

Táto metóda je spárovaná s metódou addEventListener(). removeEventListener(), ktorý preberá rovnaké tri argumenty, ale nepridáva, ale odstraňuje funkciu handlera z objektu. To je často užitočné, keď potrebujete zaregistrovať dočasnú obsluhu udalosti a potom ju v určitom bode odstrániť.

internet Prieskumnícka verzia IE9 nižšie nepodporuje metódy addEventListener() a removeEventListener(). Podobné metódy sú definované v IE5 a vyššie, pripojiťUdalosť() a odpojiťEvent(). Keďže model udalostí IE nepodporuje fázu zachytávania, metódy attachmentEvent() a removeEvent() používajú iba dva argumenty: typ udalosti a funkciu handlera, pričom metódy IE odovzdávajú názov vlastnosti handlera s predponou " on" ako prvý argument, nie typ. udalosti bez tejto predpony.

Volanie obsluhy udalostí

Po zaregistrovaní obsluhy udalosti ju webový prehliadač automaticky zavolá, keď sa v zadanom objekte vyskytne udalosť zadaného typu. Táto sekcia podrobne popisuje poradie, v ktorom sú volané obslužné nástroje udalostí, argumenty pre obslužné nástroje, kontext volania (hodnota this) a účel návratovej hodnoty obsluhy. Bohužiaľ, niektoré z týchto podrobností sa líšia medzi IE 8 a nižšími a inými prehliadačmi.

Argument obsluhy udalostí

Keď je vyvolaný obslužný program udalosti, zvyčajne (s jednou výnimkou diskutovanou nižšie) je odovzdaný objektu udalosti ako jeden argument. Vlastnosti objektu udalosti obsahujú dodatočné informácie o udalosti. vlastnosť typu, napríklad určuje typ udalosti, ktorá nastala.

V prehliadači IE verzie 8 a nižšej, obslužné rutiny udalostí registrované nastavením vlastnosti neprechádzajú pri volaní do objektu udalosti. Namiesto toho je objekt udalosti uložený v globálnej premennej window.event. Kvôli prenosnosti môžu byť obslužné rutiny udalostí naštylizované tak, ako je uvedené nižšie, takže pri volaní bez argumentu používajú premennú window.event:

Objekt udalosti sa odovzdá obslužným programom udalostí zaregistrovaným pomocou metódy attachmentEvent(), ale môžu použiť aj premennú window.event.

Pri registrácii obsluhy udalosti s atribútom HTML prehliadač skonvertuje reťazec s programový kód v JavaScripte do funkcie. Prehliadače iné ako IE vytvárajú funkciu s jediným argumentom udalosti. IE vytvára funkciu, ktorá neberie žiadne argumenty. Ak v takýchto funkciách použijete identifikátor udalosti, bude odkazovať na window.event. V oboch prípadoch môžu manipulátory udalostí definované v značke HTML odkazovať na objekt udalosti pomocou identifikátora udalosti.

Kontext obsluhy udalosti

Keď je obsluha udalosti zaregistrovaná nastavením vlastnosti, vyzerá to ako definovanie novej metódy prvku dokumentu:

E.onclick = function() ( /* implementácia obslužného programu */ );

Preto nie je prekvapujúce, že obsluhy udalostí sa volajú (s jednou výnimkou IE, ktorá je popísaná nižšie) ako metódy objektov, v ktorých sú definované. To znamená, že v tele obsluhy udalosti kľúčové slovo this odkazuje na cieľ udalosti.

V obslužných programoch kľúčové slovo this odkazuje na cieľový objekt, aj keď boli zaregistrované pomocou metódy addEventListener(). Nanešťastie to však neplatí pre metódu attachmentEvent(): handlery registrované pomocou metódy attachmentEvent() sa volajú ako funkcie a kľúčové slovo this v nich odkazuje na globálny objekt (Window). Tento problém je možné vyriešiť nasledujúcim spôsobom:

/* Registre špecifikovaná funkcia ako obsluha udalosti zadaného typu na zadanom objekte. Zabezpečuje, že handler bude vždy volaný ako metóda na cieľovom objekte. */ function addEvent(target, type, handler) ( if (target.addEventListener) target.addEventListener(type, handler, false); else target.attachEvent("on" + type, function(event) ( // Volanie obsluhy ako cieľová metóda, // a odovzdajte mu objekt udalosti return handler.call(target, event); )); )

Všimnite si, že obslužné rutiny udalostí zaregistrované týmto spôsobom nemožno odstrániť, pretože odkaz na funkciu obalu prešiel na metódu AttachEvent() nie je nikde uložená, aby mohla byť odovzdaná metóde removeEvent().

Návratové hodnoty obsluhy

Mala by sa zvážiť hodnota vrátená obsluhou udalosti zaregistrovanou nastavením vlastnosti objektu alebo použitím atribútu HTML. Návratová hodnota false zvyčajne informuje prehliadač, že by nemal vykonávať predvolené akcie pre túto udalosť.

Napríklad obslužný nástroj onclick tlačidla na odoslanie formulára môže vrátiť hodnotu false, aby zabránil prehliadaču odoslať formulár. (Toto môže byť užitočné, ak užívateľský vstup zlyhá pri overení na strane klienta.) Podobne môže obsluha udalosti onkeypress vo vstupnom poli filtrovať vstup z klávesnice a vrátiť hodnotu false, ak zadáte neplatné znaky.

Dôležitá je aj hodnota, ktorú vrátil obslužný program onbeforeunload objektu Window. Táto udalosť sa spustí, keď prehliadač prejde na inú stránku. Ak tento obslužný program vráti reťazec, zobrazí sa v modálnom dialógovom okne s výzvou na potvrdenie želania opustiť stránku.

Je dôležité pochopiť, že hodnoty vrátené obslužnými nástrojmi udalostí sa berú do úvahy iba vtedy, ak sú obslužné nástroje zaregistrované nastavením vlastností. Obslužné programy registrované pomocou addEventListener() alebo attachmentEvent() by mali namiesto toho zavolať metódu preventDefault() alebo nastaviť vlastnosť returnValue objektu udalosti.

Zrušenie podujatí

Hodnotu vrátenú obsluhou udalosti zaregistrovanou ako vlastnosť možno použiť na prepísanie predvoleného správania prehliadača, keď nastane táto udalosť. V prehliadačoch, ktoré podporujú metódu addEventListener(), môžete tiež prepísať predvolené správanie volaním preventDefault() objekt udalosti. Avšak vo verzii IE 8 a nižšej sa rovnaký efekt dosiahne nastavením vlastnosti návratová hodnota objekt udalosti na hodnotu false.

Nasledujúci úryvok ukazuje obsluhu udalosti kliknutia na hypertextový odkaz, ktorá používa všetky tri spôsoby zrušenia udalosti (blokuje používateľovi kliknúť na odkaz):

Window.onload = function() ( // Nájsť všetky odkazy var a_href = document.getElementsByTagName("a"); // Pridanie obsluhy udalosti kliknutia (nie pre IE

Aktuálny projekt modulu DOM Events 3 definuje vlastnosť objektu Event s názvom defaultZabránené. Zatiaľ ho nepodporujú všetky prehliadače, no jeho podstatou je, že kedy normálnych podmienkach je nepravdivé a pravdivé iba vtedy, ak sa zavolá metóda preventDefault().

Vrátenie predvolených akcií spojených s udalosťou je len jedným z mnohých spôsobov zrušenia udalosti. Existuje aj možnosť zastaviť šírenie udalosti. V prehliadačoch, ktoré podporujú metódu addEventListener(), má objekt udalosti metódu stopPropagation(), ktorého volanie preruší ďalšie šírenie udalosti. Ak sú na rovnakom cieľovom objekte zaregistrované iné obslužné rutiny pre túto udalosť, ostatné obslužné rutiny sa budú stále volať, ale po zavolaní metódy stopPropagation() sa nezavolajú žiadne ďalšie obslužné rutiny na inom objekte.

Vo verzii IE 8 a nižšej nie je metóda stopPropagation() podporovaná. Namiesto toho má objekt udalosti v IE vlastnosť zrušiťBubble. Nastavenie tejto vlastnosti na hodnotu true zabraňuje šíreniu udalosti.

Aktuálna špecifikácia DOM Events 3 definuje ešte ďalšiu metódu na objekte Event, metódu s názvom stopImmediatePropagation(). Podobne ako metóda stopPropagation() bráni šíreniu udalosti na akékoľvek iné objekty. Okrem toho však tiež bráni volaniu iných obslužných programov udalostí zaregistrovaných na rovnakom objekte.