Programování v jazyce JavaScript

Rozměr: px

Začít zobrazení ze stránky:

Download "Programování v jazyce JavaScript"

Michaela Sedláčková
před 5 lety
Počet zobrazení:

Pavel Štěpán, 2011 Události (events) BI-JSC Evropský sociální fond

1 Programování v jazyce JavaScript Katedra softwarového inženýrství Fakulta informačních technologií České vysoké učení technické v Praze Pavel Štěpán, 2011 Události (events) BI-JSC Evropský sociální fond Praha & EU: Investujeme do vaší budoucnosti P. Štěpán PHP BI-PHP, výpis 13 1/6

2 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title></title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <script type="text/javascript"> // udalostni procedura pro prirazeni udalosti pomoci atributu tagu function zpracujkliknuti(){ alert("dekuji, ze jste na me klikli!!"); </script> </head> <body> <h1>udalosti</h1> <script type="text/javascript"> // Probublavani ("zdola nahoru") a zachytavani ("shora dolu") udalosti // DOM 2 zachytavani, udalost v cili a probublavani (cil nema mit // zadnou udalost pr zachytavani. Vetsina prohlizecu ale tuto udalost // realizuje. IE model udalosti DOM nepodporuje - pouze probublavani. // Prirazeni udalosti pomoci atributu tagu: // nedoporucuje se - michani HTML a JavaScriptu; udalostni procedura // nemusi byt pri udalosti jeste nactena (lze osetrit try - catch v // atributu) apod. // Prirazeni udalosti zpusobem "DOM Level 0" (defacto standard) // prirazeni do prislusne vlastnosti elementu // Nasledujici nemusi chodit - tlacitko btndom0 jeste nemusi // existovat (popr. udalostni procedura byt nactena)!! Druhy pripad // lze osetrit pomoci try - catch v atributu. var btn = document.getelementbyid("btndom0"); btn.onclick = function(){ alert("udalost prirazena podle DOM 0"); // odstraneni udalosti - btn.onclick = null; // Vyhoda DOM 0 - nemicha se HTML a JavaScript; nevyhoda - jenom // jedna udalostni procedura pro danou udalost </script> <input type="button" value="klikni na me!" onclick="alert('ahoj')"> <input type="button" value="take klikni!" onclick="zpracujkliknuti()"> <br><br> <input type="button" value="dom 0 Event" id="btndom0"> <input type="button" value="dom 2 Event" id="btndom2">"> P. Štěpán PHP BI-PHP, výpis 13 2/6

3 <input type="button" value="event info" id="btnevent"> <a href=" id="acentrum">hop na Centrum</a><br><br> <div id="divctverec" style="width:100px;height:100px;background-color:yellow"></div><br><br> <div id="divdruhyctverec" style="width:100px;height:100px;background-color:cyan"></div><br><br> <input type="text" id="txtcislo"> <script type="text/javascript"> // zde jiz je tlacitko definovano var btn = document.getelementbyid("btndom0"); btn.onclick = function(){ // alert("udalost prirazena DOM 0"); // pri pouziti this zde se obsluha udalosti povazuje za metodu // daneho elementu - proto this ukazuje na nej. Napr.: alert(this.id); // Prirazeni udalosti podle DOM level 2 - metody addeventlistener // a removeeventlistener var btn2 = document.getelementbyid("btndom2"); btn2.addeventlistener("click", function(){ // alert("nazdar!"); alert(this.id); // this - zase aktualni element, false); // false - pro fazi probublavani (nejcastejsi) // prirazeni druhe udalostni procedury btn2.addeventlistener("click", function(){ alert("udalost prirazena dle DOM2.");,, false); Obsluhy se spusti v poradi, ve kterem byly pridavany pokud obsluhy odebirame (removeeventlistener) NELZE pouzivat anonymni fce!! Nejcasteji se obsluhy udalosti pridavaji do faze probublavani - lze realizovat ve vsech prohlizecich. Zachytavani se pouziva pouze tehdy, kdyz je potreba provest predzpracovani pred tim, nez udalost dorazi k cili. Spis nepouzivat Obsluha udalosti v IE: pridavani metoda attachevent("onclick",eventfunction), odebrani metoda detachevent. POZOR! onclick - nikoli click!! Pri pripojeni obsluhy pomoci attachevent bezi obsluha v GLOBALNIM kontextu (oboru platnosti) - tj. this odpovida objektu window!! Opet mozno priradit vice obsluh, ale bezi v OPACNEM poradi!! Lze zkombinovat tak, aby bylo pouzitelne jak v IE, tak v ostatních P. Štěpán PHP BI-PHP, výpis 13 3/6

4 browsech. Ovsem stále se LISI obory platnosti a poradi zpracovani!! POZOR - nazev udalosti v IE zacina "on". Object event (informace predavane obsluze udalosti): Pro DOM se object event predava obsluze udalosti jako jediny argument. (a to i pro DOM 0). // DOM 0 - pouziti objektu event: var btnevent = document.getelementbyid("btnevent"); btnevent.onclick = function(event){ alert(event.type); // "click" // DOM 2 - pouziti objektu event: var btnevent = document.getelementbyid("btnevent"); btnevent.addeventlistener("click", function(event){ alert(event.type); // "click" vlastnosti/metody objektu event (nektere).bubbles - probublava.cancelable - lze zrusit puvodni akci udalosti (napr. click na hyperlink).currenttarget - element, jehoz obsluha udalosti se prave zpracovava.eventphase zacytavani, 2 - cilovy element, 3 - probublavani.preventdaefault() - zrusit standardni akci.stoppropagation() - zruseni zachytavani/probublavani.target - cil udalosti.type - typ udalosti ("click") - napr. při procedure, obsluhující vice udalosti Object event v IE: pro DOM 0 - event je vlastnost window (globalni) - window.event pro attachevent je to opet (jediny) parametr obsluhy udalosti vlastnosti event v IE:.cancelBubble - true (jako.stoppropagation()).returnvalue - false (jako.preventdefault()).srcelement - jako target.type opet lze vytvorit objekt event pro vsechny platformy var acentrum = document.getelementbyid("acentrum"); acentrum.onclick = function(event){ event.preventdefault(); // zruseni std. reakce (nacteni stranky) alert("chtel bys na Centrum, chtel!\nale mas smulu!!") P. Štěpán PHP BI-PHP, výpis 13 4/6

5 // udalosti mysi.mousedown.mouseup.click (totez Enter na danem prvku).dblclick - neni v DOM.mouseover.mouseout.mousemove Souradnice - event.clientx a.clienty (poloha v okne) - event.screenx,... Modifikacni klavesy - event.shiftkey,.altkey,.ctrlkey,.metakey (ne IE) Tlacitka na mysi (pro mousedown a mouseup): vlastnost event.button 0 - primarni (leve), 1 - prostredni (kolecko), 2 - sekundarni (prave) IE primarni, 2 - sekundarni, 4 - prostredni (+ bitove kombinace) // zmena barvy div v zavislosti na pohybu mysi var divctverec = document.getelementbyid("divctverec"); divctverec.addeventlistener("mouseover", function(event){ divctverec.style.backgroundcolor = "red"; divctverec.addeventlistener("mouseout", function(event){ divctverec.style.backgroundcolor = "blue"; // souradnice bodu, kde bylo kliknuto var divdruhy = document.getelementbyid("divdruhyctverec"); divdruhy.addeventlistener("mousedown", function(event){ alert("kliknuto na pozici " + event.clientx + ":" + event.clienty); // Udalosti klavesnice: Standardizovany az v DOM 3 (neni prilis implementovano) keydown (opakovane - repeat na klavesnici) - pred zmenou textu keypress (opakovane - repeat na klavesnici) - pred zmenou textu keyup - po zmene textu keypress - jen pro znakove klávesy keydown a keyup - kod stisknute klavesy obsazen v event.keycode (kody - viz help) pro alfanumericke - jejich kody ASCII bez ohledu na shift keypress - event.charcode (ASCII) - FF, Chrome, Safari - event.keycode (ASCII) - IE, Opera P. Štěpán PHP BI-PHP, výpis 13 5/6

6 // textove pole, ktere pripousti jen cislice var txtcislo = document.getelementbyid("txtcislo"); txtcislo.addeventlistener("keypress", function(event){ var znak = String.fromCharCode(event.charCode); // zrusit pro neciselne znaky if (("0" > znak) ("9" < znak)) event.preventdefault(); // dalsi udalosti: load (je-li dokonceno zavedeni stranky, obrazku,...) unload (uvolneni dokumentu) resize (zmena rozmeru okna) - nektere prohlizece pri kazde zmene, jine po skonceni (FF) scroll (posun) - na elementu HTML, v rezimu quirks na body; vlastnosti.scrollleft,.scrolltop window.addeventlistener("load", function(){ // atributem v html do body alert("stranka zavedena!"); </script> </body> </html P. Štěpán PHP BI-PHP, výpis 13 6/6

Podobné dokumenty

Programování v jazyce JavaScript

Programování v jazyce JavaScript Katedra softwarového inženýrství Fakulta informačních technologií České vysoké učení technické v Praze Pavel Štěpán, 2011 Anonymní funkce BI-JSC Evropský sociální fond