Visió de conjunt: En aquest article anem a discutir sobre els esdeveniments del navegador en Javascript. Java Script esdeveniments són molt importants, ja que la major part de les tasques realitzen. L'altre punt important és la compatibilitat del navegador. A mesura que l'escriptura de Java està incrustat en els arxius html, l'execució de Java script és depenent del navegador. scripts de Java també es maduren prou com per manejar els esdeveniments del navegador.
Introducció:
Un esdeveniment navegador és un senyal del navegador per a l'aplicació en cas que es realitza una acció. Aquests esdeveniments són dels següents tipus
- esdeveniments DOM: Aquests són iniciades pels elements DOM per exemple. un esdeveniment de clic s'activa quan es fa clic a un element o un ratolí sobre esdeveniment s'activa quan el punter del ratolí es treu el cap sobre un element. Aquests esdeveniments es connecten un codi java script amb el document.
- finestra Esdeveniments: Aquests s'inicien quan es canvia la mida de la finestra del navegador.
Quins són els esdeveniments?
Un esdeveniment pot ser definida com una acció / treball que envia un senyal a l'escriptura de Java. Ara java script s'executa en resposta a algun esdeveniment. No obstant això, l'esdeveniment ha d'estar registrat per enviar el senyal al component java script respectiva. Els següents són alguns dels esdeveniments.
esdeveniments de finestra: Aquests esdeveniments s'inicien quan es canvia la mida finestra del navegador.
esdeveniments DOM: Aquests s'inicien quan un element DOM està duent a terme algun tipus d'acció.
altres esdeveniments: Aquests esdeveniments estan considerant tots els altres tipus d'esdeveniments, a part dels dos anteriors.
Els controladors d'esdeveniments: Hem d'entendre que hi ha una gran diferència entre Java i java script. En java, múltiples subprocessos és possible però els esdeveniments java script són l'únic subprocés. Pel que els controladors d'esdeveniments s'executen seqüencialment. per aclarir-, suposem que un usuari ha realitzat dos esdeveniments, per sobre del ratolí i després mousemove. Pel que el cas per sobre del ratolí s'executarà primer. Una vegada que el primer esdeveniment és completa, esdeveniment MouseMove s'aconsegueix a executar.
Si té un script per realitzar una acció en contra d'un esdeveniment, ha de tenir una funció associada a ella. Aquestes funcions es coneixen com a controladors d'esdeveniments. En general, aquestes funcions s'anomenen en el format - a EVENT_NAME per exemple. onclick etc.. Els controladors d'esdeveniments en l'escriptura de Java són un sol subprocés i s'executen seqüencialment. Per tant, si dos esdeveniments es produeixen al mateix temps, seus gestors s'executaran una rere l'altra. Hi ha moltes maneres en què s'assignen els controladors d'esdeveniments. These are.
L'ús d'etiquetes HTML: El controlador d'esdeveniments es pot associar directament en el marcat mitjançant atribut en funció del succés.
Listing 1: Event handler using html tag
[Code]
<Identificació d'entrada = “b1” valor = “Feu clic a mi” onclick = “alerta('Gràcies! Estic fet clic. ‘); ” type = “botó” />
[/Code]
Quan s'executa aquest codi, veiem un botó amb una etiqueta – 'Feu clic a mi'. Si l'usuari prem aquest botó una finestra d'alerta amb un missatge – Thanks! Estic fet clic. També podem cridar a una funció de gestió d'esdeveniments. Considereu el codi
Listing 2: controlador d'esdeveniments utilitzant la funció
[Code]
| <!DOCTYPE HTML> | |||||||||||||||
| <html> | |||||||||||||||
| <head> | |||||||||||||||
| <script type =”text / javascript”> | |||||||||||||||
| function count_rabbits() { | |||||||||||||||
| per(var i = 1; jo <= 3; i ) { | |||||||||||||||
| alerta( “conill “+i ” del barret de copa!” ) | |||||||||||||||
| } | |||||||||||||||
| } | |||||||||||||||
| </script> | |||||||||||||||
| </head> | |||||||||||||||
| <body> | |||||||||||||||
| <input type = “botó” onclick = “count_rabbits()” valor = “comptar conills!”/> | |||||||||||||||
| </body> | |||||||||||||||
| </html>[/Code]Un altre enfocament per unir l'esdeveniment està utilitzant this.innerHTML on això es refereix a l'element actual. El codi següent il·lustra aquestListing 3: controlador d'esdeveniments utilitzant this.innerHTML
[Code] <botó onclick = “alerta ( this.innerHTML )”> Feu clic a mi per veure </botó> [/Code] DOM utilitzant la propietat d'objectes: Aquí, l'assignació es realitza mitjançant la propietat – onevent. En aquest cas hem d'aconseguir l'element primer i després assignar al gestor de la propietat onevent. The following code is an example of setting a click handler to the element with id ‘myId’ Listing 4: Controlador d'esdeveniments DOM utilitzant la propietat d'objectes [Code] <Identificació d'entrada = “myId” type = “botó” valor = “pressionar”/> <script> document.getElementById( ‘ myId ‘ ).onclick = function() { alerta('Gràcies') } </script> [/Code] Aquí les dues coses següents s'han de tenir en compte per tal d'utilitzar aquest – · It is a property, no un atribut i el seu nom és onevent que és sensible a majúscules i ha d'estar en minúscules. · The handler should be a function not a String. Quan el navegador troba un atribut onevent en el format HTML, es crea una funció utilitzant el seu contingut i l'assigna a la propietat. Així que els dos codis següents fa el mateix Listing 5: controlador d'esdeveniments utilitzant només HTML [Code] <input type = “botó” onclick = “alerta( 'clic!’ )” valor = “botó”/> [/Code] Listing 6: controlador d'esdeveniments utilitzant HTML & JS. [Code] <input type = “botó” id = “botó” valor = “botó”/> <script> document.getElementById("Botó").onclick = function() { alerta('clic!’) } </script> [/Code] JavaScript sobreescriu un controlador fixat en el marcat. El següent fragment reemplaça un controlador marcat per una nova Listing 7: Sobreescriure un conjunt manipulador. <input type=”botó” onclick =”alerta('Abans')” value=”pressionar”/> <script> document.getElementsByTagName("Entrada")[0].onclick = function() { alerta('Després') } </script> [/Code] L'ús de mètodes especials: En una aplicació complexa JavaScript, on els diferents mètodes d'interfície manegen mètodes personalitzats d'esdeveniments comuns s'utilitzen per assignar els manipuladors. Microsoft proporciona una solució que només funciona amb la versió IE menys de 9 i també amb Opera. Els controladors s'assignen i es van separar com sota Listing 8: Muntatge i desmuntatge dels manipuladors element.attachEvent( “en” + esdeveniment, gestor) [/Code] Extracció d'una Handler – [Code] element.detachEvent( “en” + esdeveniment, gestor) [/Code] L'ús d'adjuntar esdeveniment, podem assignar diversos controladors a un mateix element. El següent fragment de codi mostra aquest Listing 9: L'assignació de diversos controladors a un element. [Code] <Identificació d'entrada = “myElement” type = “botó” valor = “pressionar” /> <script> var = document.getElementById myElement( “myElement” ) estava actuant = function() { alerta( 'Gràcies!’ ) } 2. oficis eren = function() { alerta( 'Gràcies de nou!’ ) } myElement.attachEvent( “onclick”, gestor) myElement.attachEvent( “onclick”, handler2) </script> [/Code] Adjuntar esdeveniments no passa el paràmetre "això". D'acord amb l'estàndard W3C la següent assignació de controlador funciona en gairebé tots els navegadors que s'utilitzen avui en dia. Col·locació d'un Handler Listing 10: Muntatge i desmuntatge dels manipuladors segons W3C element.addEventListener ( esdeveniment, gestor, fase ) [/Code] element. removeEventListener ( esdeveniment, gestor, fase ) [/Code]
accions relacionades amb l'esdeveniment: Hem de tenir cura de les quatre accions següents durant la manipulació de les accions relacionades amb l'esdeveniment · Registrar el controlador d'esdeveniments: Això es pot fer mitjançant l'establiment dels elements de propietat onevent per exemple. onclick o onkeypress etc.. Això funciona amb tot el navegador, però té una limitació que podem adjuntar un únic controlador d'esdeveniments a un element. Els esdeveniments connectats es poden eliminar d'una manera similar utilitzant detachEvent o removeEventListener. · Obtenir l'objecte d'esdeveniment: La majoria dels navegadors passar l'objecte d'esdeveniment com un argument al gestor. Els següents tres esdeveniments es generen quan l'usuari fa clic al ratolí. o mouseDown: indica que es prem el ratolí. o MouseUp: indica que el ratolí és alliberat. o Click: indica que es fa clic al ratolí. Si això succeeix en successió, això indica que un doble clic ha succeït. · Extract information from the object – El tercer pas és la informació relacionada amb l'acció d'extracció de l'objecte i iniciar l'acció. · Inform about the completion of the event – Aquest és el pas final. Una vegada que l'esdeveniment es subhasta amb èxit la finalització de l'esdeveniment està marcat. Summary: Per concloure la discussió podem mantenir els següents punts en ment · Used to initiate an action which should be performed as per the customers need. · Events are of two types – esdeveniments DOM i esdeveniments de finestra. · 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
Els patrons de disseny Java Script
Els patrons de disseny Java Script
CSS3 & JavaScript
Java Script and CSS3 properties
