Áttekintés: Ebben a cikkben fogjuk megvitatni a böngésző JavaScript események. Java script események nagyon fontosak, mert végre a legtöbb feladatot. A másik fontos pont a böngésző kompatibilitás. Mivel a java script van ágyazva html fájlokat, végrehajtását java script böngésző függő. Java script is érett ahhoz, hogy kezelni böngésző események.
Bevezetés:
A böngésző esetén egy jelet a böngésző az alkalmazás esetén egy művelet végrehajtása. Ezek az események a következő típusú
- DOM események: Ezek által kezdeményezett DOM elemeket például. egy kattintás kiváltó esemény, ha egy elem kattintott, vagy egy egeret kiváltó esemény, amikor az egérmutató lebegett egy elem. Ezek az események csatlakoztassa a java script kódot a dokumentum.
- ablak események: Ezek indul el, ha a böngésző ablak átméretezése.
Mik az események?
Az esemény lehet meghatározni, mint egy akció / munka, egy jelet küld a java script. Most java script végrehajtja válaszként valamilyen esemény. De az esemény nyilvántartásba kell venni, hogy küldjön jelet a megfelelő java script alkatrész. Az alábbiakban néhány esemény.
ablak események: Ezek az események akkor kezdtük, amikor a böngésző ablak átméretezése.
DOM események: Ezek indul el, ha a DOM elem teljesít bizonyos intézkedéseket.
egyéb események: Ezeket az eseményeket figyelembe véve minden egyéb típusú eseményeket eltekintve a fenti két.
eseménykezelõk: Meg kell értenünk, hogy van egy nagy különbség a java és java script. A java, multi threading lehetséges, de java script események egyszálú. Így az esemény rakodók végrehajtása szekvenciálisan. Annak tisztázása, hogy, tegyük egy felhasználó végzett két esemény, mouseover majd MouseMove. Tehát a mouseover esemény kerül először végrehajtásra. Amint az első esemény befejeződött, MouseMove esemény kerül végrehajtásra.
Ha egy script el kell végeznie az ellen egy esemény, ez kell egy függvény jár hozzá. Ezek a funkciók a továbbiakban, mint eseménykezelőkkel. Általában ezek a funkciók elnevezése a formában - a EVENT_NAME például. onclick stb. Eseménykezelõk java script van egy menetes és végrehajtása szekvenciálisan. Ezért, ha két esemény ugyanabban az időben, azok rakodók kerül végrehajtásra után egy másik. Nagyon sok módja van, ahol az esemény rakodók vannak rendelve. These are.
A HTML tag: Az eseménykezelő köthető közvetlenül a jelölést a tulajdonság az esemény-.
Listing 1: Event handler using html tag
[Code]
<input id = “b1” value = “Kattints ide” onclick = “éber('Kösz! Én kattintott. ‘); ” type = “gomb” />
[/Code]
Ha ez a kód lefut, látunk egy gombot, és egy címke – 'Kattints ide'. Ha a felhasználó megnyomja ezt a gombot, egy figyelmeztető ablak, egy üzenet – Thanks! Én kattintott. Azt is el lehet indítani egy funkciót esemény kezelése. Tekintsük a következő kódot
Listing 2: Eseménykezelő funkció alkalmazásával
[Code]
| <!DOCTYPE HTML> | |||||||||||||||
| <html> | |||||||||||||||
| <fej> | |||||||||||||||
| <script type =”text / javascript”> | |||||||||||||||
| function count_rabbits() { | |||||||||||||||
| mert(var i = 1; én <= 3; i ) { | |||||||||||||||
| éber( “Nyúl “+i ” ki a kalapból!” ) | |||||||||||||||
| } | |||||||||||||||
| } | |||||||||||||||
| </forgatókönyv> | |||||||||||||||
| </fej> | |||||||||||||||
| <test> | |||||||||||||||
| <input type = “gomb” onclick = “count_rabbits()” value = “gróf nyulak!”/> | |||||||||||||||
| </test> | |||||||||||||||
| </html>[/Code]Egy másik megközelítés, hogy kötődik az esemény segítségével this.innerHTML ahol ez vonatkozik az aktuális elem. A következő kód bemutatja eztListing 3: Eseménykezelő segítségével this.innerHTML
[Code] <gomb onclick = “éber ( this.innerHTML )”> Kattints rám, hogy nekem </gomb> [/Code] Segítségével DOM objektum tulajdonság: Itt a feladat segítségével történik a tulajdon – onevent. Ebben az esetben meg kell, hogy az elem az első, majd hozzá egy felvezető tulajdonát onevent. The following code is an example of setting a click handler to the element with id ‘myId’ Listing 4: Eseménykezelő segítségével DOM objektum tulajdonság [Code] <input id = “MyID” type = “gomb” value = “nyomja me”/> <forgatókönyv> document.getElementById( ‘ MyID ‘ ).onclick = function() { éber('Kösz') } </forgatókönyv> [/Code] Itt a következő két dolgot meg kell jegyezni, hogy használja ezt a – · It is a property, Nem egy attribútum, a neve pedig onevent amely kis- és nagybetűket kell kisbetűvel. · The handler should be a function not a String. Amikor a böngésző talál onevent attribútumot a HTML-forrás, létrehoz egy funkciót annak tartalmát, és hozzárendeli a tulajdon. Így a következő két kód nem ugyanaz Listing 5: Eseménykezelő kizárólag HTML [Code] <input type = “gomb” onclick = “éber( "Click!’ )” value = “Gomb”/> [/Code] Listing 6: Eseménykezelő HTML & JS. [Code] <input type = “gomb” id = “gomb” value = “Gomb”/> <forgatókönyv> document.getElementById('gomb').onclick = function() { éber("Click!’) } </forgatókönyv> [/Code] JavaScript felülírja a kezelő meghatározott jelölő. Az alábbi kódrészlet helyettesíti egy jelölő kezelőt egy újjal Listing 7: Felülírása kezelő készlet. <input type =”gomb” onclick =”éber('Előtt')” value=”nyomja me”/> <forgatókönyv> document.getElementsByTagName('bemenet')[0].onclick = function() { éber('Után') } </forgatókönyv> [/Code] Különleges módszerekkel: A komplex JavaScript alkalmazás, ahol a különböző interfész módszerek kezelni gyakori esemény egyedi módszereket használnak rendelni rakodók. Microsoft megoldást nyújt, amely csak akkor működik, IE verzió kisebb 9 és az Opera. Kezelők vannak rendelve, és levált a keretében Listing 8: Felhelyezése és eltávolítása rakodók element.attachEvent( “on” + esemény, handler) [/Code] Eltávolítása Handler – [Code] element.detachEvent( “on” + esemény, handler) [/Code] Használata csatolja esemény, mi lehet rendelni több rakodók, hogy ugyanaz az elem. A következő kódrészlet mutatja ezt Listing 9: Hozzárendelése több rakodók, hogy egy elem. [Code] <input id = “myElement” type = “gomb” value = “nyomja me” /> <forgatókönyv> var myElement = document.getElementById( “myElement” ) járt = function() { éber( 'Kösz!’ ) } volt kereskedés 2. = function() { éber( 'Köszönöm mégegyszer!’ ) } myElement.attachEvent( “kattintásra”, handler) myElement.attachEvent( “kattintásra”, handler2) </forgatókönyv> [/Code] Csatolása események nem megy át a paramétert "ez". Mivel a per a W3C szabvány a következő felvezető hozzárendelés működik szinte minden böngészőben, hogy ma is használatos. Csatolása Handler Listing 10: Felhelyezése és eltávolítása rakodók, mint egy W3C element.addEventListener ( esemény, handler, fázis ) [/Code] elem. removeEventListener ( esemény, handler, fázis ) [/Code]
Eseményhez kapcsolódó akciók: Meg kell vigyázni a következő négy fellépés kezelése közben az eseményhez kapcsolódó tevékenységek · Regisztráció az eseménykezelő: Ez megtehető a beállításával az elemek onevent tulajdonság például. onclick vagy onkeypress stb. Ez működik az egész böngésző, de van egy korlátozás, hogy mi lehet csatolni egyetlen eseménykezelő egy elemet. A csatolt események lehet távolítani hasonló módon használva detachEvent vagy removeEventListener. · Kap az event objektum: Legtöbb böngésző át az event objektum érvként, hogy a felvezető. Az alábbi három esemény keletkezik, amikor a felhasználó rákattint a képre. o mousedown: jelzi, hogy az egér van nyomva. o MouseUp: jelzi, hogy az egér felszabadul. o Kattints: azt jelzi, hogy az egér kattint. Ha ez történik egymás után, ez azt jelzi, hogy a dupla kattintás történt. · Extract information from the object – A harmadik lépés a kivonat akció kapcsolatos információkat a tárgy és kezdeményezi az intézkedés. · Inform about the completion of the event – Ez az utolsó lépés. Miután az esemény árverésre sikeresen elvégeztük, az esemény meg van jelölve. Summary: Befejezésül a vita tudjuk tartani a következő pontokat szem előtt · Used to initiate an action which should be performed as per the customers need. · Events are of two types – DOM események és Window események. · 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
