Přehled: V tomto článku se budeme diskutovat o událostech prohlížeče v JavaScriptu. Java Script události jsou velmi důležité, protože provádět většinu úkolů. Dalším důležitým bodem je kompatibilita prohlížeč. Vzhledem k tomu, Java Script je vložen do HTML soubory, poprava java script je závislý prohlížeč. Java skripty jsou také dostatečně vyzrálé zpracování událostí prohlížeče.
Úvod:
Událost prohlížeč je signál z prohlížeče do aplikace v případě, že je provedena akce. Tyto události jsou z následujících typů
- DOM Události: Ty jsou iniciovány DOM elementy např. událost click je spuštěna při klepnutí na prvek nebo myši události se spustí, když je ukazatel myši se vznášel na elementu. Tyto události připojit kódu Java Script s dokumentem.
- Okno Events: Ty jsou iniciovány při změně velikosti okna prohlížeče.
Jaké jsou události?
Událost může být definována jako akční / práce, která vysílá signál do java script. Nyní Java Script provádí v reakci na nějakou událost. Ale událost by měla být registrovány vyslat signál do příslušného Java Script komponentu. Níže jsou uvedeny některé z událostí.
události okenní: Tyto události jsou spuštěny při změně velikosti okna prohlížeče.
události DOM: Ty jsou zahájeny, když je prvek DOM provedením nějakou akci.
další akce: Tyto události jsou s ohledem na všechny ostatní typy událostí, na rozdíl od výše uvedených dvou.
Obsluhy událostí: Musíme si uvědomit, že existuje velký rozdíl mezi Java a java script. V Javě, multi threading je možné, ale Java Script akce jsou jediné závitem. Takže obslužné rutiny událostí jsou prováděny sekvenčně. Aby ji objasnil, předpokládejme jeden uživatel provedl dvě události, mouseover a pak mouseMove. Takže událost mouseover bude proveden první. Jakmile je první událost je kompletní, mouseMove akce bude vykonán.
Pokud skript musí provést akci proti události, měl by mít funkci spojenou s ním. Tyto funkce jsou označovány jako obslužné rutiny. Obvykle se tyto funkce jsou pojmenovány ve formátu - na EVENT_NAME např. onclick etc. Obsluhy událostí v jazyce Java skriptu jsou jediné závitem a jsou prováděny sekvenčně. Tedy v případě, dvě události se vyskytují zároveň, jejich manipulátory bude provedena jedna po druhé. Existuje mnoho způsobů, kterými jsou zpracování událostí přiřazené. These are.
Použití HTML tagu: Zpracování události může být spojena přímo do značkovacího jazyka pomocí atributu on-akce.
Listing 1: Event handler using html tag
[Code]
<input id = “b1” value = “Klikni na mě” onclick = “bdělý('Díky! Jsem kliknul. ‘); ” type = “tlačítko” />
[/Code]
Je-li tento kód proveden, vidíme tlačítko s etiketou – 'Klikni na mě'. V případě, že uživatel narazí tohoto tlačítka se výstražné okno se zprávou – Díky! Jsem kliknul. Můžeme také volání funkce pro zpracování událostí. Vezměme si následující kód
Listing 2: Ovladač události pomocí funkce
[Code]
| <!DOCTYPE HTML> | |||||||||||||||
| <html> | |||||||||||||||
| <hlava> | |||||||||||||||
| <script type =”text / javascript”> | |||||||||||||||
| function count_rabbits() { | |||||||||||||||
| pro(var i = 1; já <= 3; i ) { | |||||||||||||||
| bdělý( “Králičí “+i ” z klobouku!” ) | |||||||||||||||
| } | |||||||||||||||
| } | |||||||||||||||
| </script> | |||||||||||||||
| </hlava> | |||||||||||||||
| <body> | |||||||||||||||
| <input type = “tlačítko” onclick = “count_rabbits()” value = “Count králíky!”/> | |||||||||||||||
| </body> | |||||||||||||||
| </html>[/Code]Jiným přístupem k svázat událost je použití this.innerHTML, kde se to týká aktuálního prvku. Následující kód ilustruje totoListing 3: Ovladač události pomocí this.innerHTML
[Code] <Tlačítko onclick = “bdělý ( this.innerHTML )”> Klikni na mě, že mě vidí </tlačítko> [/Code] Použití DOM vlastnost objektu: Zde přiřazení se provádí pomocí vlastnosti – onevent. V tomto případě musíme dostat prvek první a přiřadit popisovač na onevent nemovitostí. The following code is an example of setting a click handler to the element with id ‘myId’ Listing 4: Ovladač události pomocí DOM vlastnost objektu [Code] <input id = “MyID” type = “tlačítko” value = “stiskněte mě”/> <script> document.getElementById( ‘ MyID ‘ ).onclick = function() { bdělý('Díky') } </script> [/Code] Zde je nutno poznamenat, že tyto dvě věci za účelem využití této – · It is a property, Není atribut a jeho jméno je onevent což je velká a malá písmena a musí být malými písmeny. · The handler should be a function not a String. Když prohlížeč najde onevent atribut v HTML značky, to vytvoří funkci pomocí jeho obsah a přiřadí ji k nemovitosti. Takže z těchto dvou kódů dělá to samé Listing 5: Ovladač události pouze pomocí HTML [Code] <input type = “tlačítko” onclick = “bdělý( 'Klikněte!’ )” value = “Tlačítko”/> [/Code] Listing 6: Ovladač události pomocí HTML & JS. [Code] <input type = “tlačítko” id = “tlačítko” value = “Tlačítko”/> <script> document.getElementById('tlačítko').onclick = function() { bdělý('Klikněte!’) } </script> [/Code] JavaScript přepíše popisovač nastavenou v značkování. Následující úryvek nahrazuje rutinu značkovací s novým Listing 7: Přepsání manipulačního sadu. <input type =”tlačítko” onclick =”bdělý('Před')” value=”stiskněte mě”/> <script> document.getElementsByTagName('vstup')[0].onclick = function() { bdělý('Po') } </script> [/Code] Použití speciální metody: Ve složitém aplikaci JavaScriptu, kde různé metody rozhraní zvládnout běžné události vlastních metody jsou používány k přiřazení manipulátory. Společnost Microsoft poskytuje řešení, které pracuje pouze s IE verze nižší než 9 a také s operou. Psovodi jsou přiřazeny a odvelen jako v Listing 8: Nasazení a sejmutí obslužné element.attachEvent( “na” + událost, psovod) [/Code] Odebrání Handler – [Code] element.detachEvent( “na” + událost, psovod) [/Code] Použití připojit událost, můžeme přiřadit více rutiny do stejného prvku. Následující fragment kódu ukazuje tento Listing 9: Přiřazení více manipulátory se jednoho prvku. [Code] <input id = “myElement” type = “tlačítko” value = “stiskněte mě” /> <script> var myElement = document.getElementById( “myElement” ) jednal = function() { bdělý( 'Díky!’ ) } byly obchody 2. = function() { bdělý( 'Ještě jednou děkuji!’ ) } myElement.attachEvent( “onclick”, psovod) myElement.attachEvent( “onclick”, handler2) </script> [/Code] Přiložit události nepředá parametr "toto '. Podle standardu W3C následující přiřazení handler funguje téměř ve všech prohlížečích, které jsou používány dnes. Připojení Handler Listing 10: Nasazení a vyjmutí manipulátory podle W3C element.addEventListener ( událost, psovod, fáze ) [/Code] živel. removeEventListener ( událost, psovod, fáze ) [/Code]
související s událostí akce: Měli bychom se postarat o následujících čtyř kroků při manipulaci akce související s událostmi · Zaregistrujte rutinu události: To lze provést pomocí nastavení prvků onevent vlastností např. onclick nebo onkeypress etc. Toto pracuje s celou prohlížeč, ale má omezení, které můžeme připojit pouze jeden rutinu události k prvku. Přiložené události mohou být odstraněny podobným způsobem za použití detachEvent nebo removeEventListener. · Získat objekt události: Většina prohlížečů předat objekt události jako argument psovoda. Následující tři události jsou generovány, když uživatel klepne na jeho myší. o mousedown: indikuje, že je tlačítko myši. o mouseup: signalizuje, že myš je uvolněna. o klikněte: signalizuje, že myš je klepnutí. Pokud se tak stane v řadě, to znamená, že dvojité kliknutí se stalo. · Extract information from the object – Třetím krokem je informace týkající se akce extrakt z objektu a zahájit akci. · Inform about the completion of the event – Toto je poslední krok. Jakmile je událost úspěšně vydražen dokončení akce je označena. Summary: Na závěr diskuse můžeme udržet tyto body na mysli · Used to initiate an action which should be performed as per the customers need. · Events are of two types – události DOM a události Okno. · Event handlers are functions associated to events. · Event handlers are assigned in the following way o Using HTML tag o Using DOM object property o Using special methods |
||||
READ MORE JAVA SCRIPT ARTICLES
Java Script Design Patterns
CSS3 & JavaScript
Java Script and CSS3 properties
