Visión global: Neste artigo iremos discutir sobre os eventos do seu navegador en JavaScript. eventos java script é moi importante como eles executan a maioría das tarefas. O outro punto importante é a compatibilidade do navegador. Como o java script está incorporado en arquivos HTML, a execución de Java script é dependente do navegador. scripts Java tamén son maduro o suficiente para lidar con eventos do navegador.
Introdución:
Un evento de navegador é un sinal desde o navegador para a aplicación no caso dunha acción é executada. Estes eventos son de tipos seguintes
- eventos DOM: Estes son iniciadas polos elementos DOM e.g.. un evento de prema é accionada cando un elemento é premendo ou un rato sobre evento é accionada cando o punteiro do rato é pasado sobre un elemento. Estes eventos conectar un código java script co documento.
- eventos ventá: Estes son iniciadas cando a xanela do navegador é redimensionada.
Cales son os eventos?
Un evento pode ser definida como unha acción / traballo que envía un sinal para o certificado de java. Agora java script é executado en resposta a algún evento. Pero o evento debe ser rexistrado para enviar sinal para o seu compoñente java script. Abaixo amósanse algúns dos eventos.
eventos ventá: Estes eventos son iniciadas cando a xanela do navegador é redimensionada.
eventos DOM: Estes son iniciados cando un elemento DOM está realizando algunha acción.
outros eventos: Estes eventos están considerando todos os outros tipos de eventos ademais dos dous anteriores.
Os manipuladores de eventos: Necesitamos entender que hai unha gran diferenza entre Java e Java script. En java, multi Threading é posible, pero eventos java script é único segmento. Así, os manipuladores de eventos son executados secuencialmente. Para aclarar iso, imos supor que un usuario realizou dous eventos, mouseover e despois mousemove. Así, o evento mouseover será executado por primeira vez. Xa que o primeiro evento é completa, evento mousemove serán executados.
Un guión ten que realizar unha acción contra un evento, debe ter unha función asociada a el. Estas funcións son referidos como manipuladores de eventos. Normalmente, estas funcións son nomeadas en formato - en EVENT_NAME por exemplo. onclick etc. Os manipuladores de eventos en java script é único segmento e son executados secuencialmente. Polo tanto, se dous sucesos ocorren á vez, seus manipuladores executarase un despois do outro. Hai moitas formas en que os manipuladores de eventos son asignados. These are.
Usando etiqueta HTML: O manipulador de eventos pode ser asociado directamente na reserva mediante o atributo en evento.
Listing 1: Event handler using html tag
[Code]
<input id = “B1” value = “prema me” onclick = “alerta('Grazas! estou premendo. ‘); ” type = “button” />
[/Code]
Cando este código execútase, vemos un botón cunha etiqueta – 'Prema me'. Se o usuario preme este botón dunha ventá de alerta cunha mensaxe – Grazas! estou premendo. Tamén podemos chamar unha función para manipulación de eventos. Considero o seguinte código
Listing 2: manipulador de eventos a través da función
[Code]
| <!DOCTYPE HTML> | |||||||||||||||
| <html> | |||||||||||||||
| <cabeza> | |||||||||||||||
| <script type =”text / javascript”> | |||||||||||||||
| function count_rabbits() { | |||||||||||||||
| a(var i = 1; Eu <= 3; i ) { | |||||||||||||||
| alerta( “coello “+i ” fóra do sombreiro!” ) | |||||||||||||||
| } | |||||||||||||||
| } | |||||||||||||||
| </script> | |||||||||||||||
| </cabeza> | |||||||||||||||
| <body> | |||||||||||||||
| <input type = “button” onclick = “count_rabbits()” value = “Conta coellos!”/> | |||||||||||||||
| </body> | |||||||||||||||
| </html>[/Code]Outra visión para vincular o evento está a usar this.innerHTML onde este refírese ao elemento actual. O código a seguir ilustra esteListing 3: manipulador de eventos usando this.innerHTML
[Code] <botón onclick = “alerta ( this.innerHTML )”> Clic para verme </button> [/Code] Usando DOM Propiedade Obxecto: Aquí, a asignación realízase mediante a propiedade – onevent. Neste caso, hai que obter o elemento primeiro e logo atribuír un manipulador ao onevent propiedade. The following code is an example of setting a click handler to the element with id ‘myId’ Listing 4: manipulador de eventos usando DOM Propiedade Obxecto [Code] <input id = “myId” type = “button” value = “prema me”/> <script> document.getElementById( ‘ myId ‘ ).onclick = function() { alerta('Grazas') } </script> [/Code] Aquí as dúas cousas seguintes débese notar, a fin de utilizar este – · It is a property, non un atributo eo seu nome é onevent que distingue entre maiúsculas e debe ser en minúsculas. · The handler should be a function not a String. Cando o navegador está un atributo onevent na reserva HTML, crea unha función mediante o seu contido ea atribúe á propiedade. Así, os dous seguintes códigos fai o mesmo Listing 5: manipulador de eventos usando só HTML [Code] <input type = “button” onclick = “alerta( 'Prema!’ )” value = “botón”/> [/Code] Listing 6: manipulador de eventos usando HTML & JS. [Code] <input type = “button” ID = “button” value = “botón”/> <script> document.getElementById("Botón").onclick = function() { alerta('Prema!’) } </script> [/Code] JavaScript substitúe un manipulador definido na reserva. O seguinte código substitúe un manipulador de reserva por un novo Listing 7: Sobrescribir un conxunto manipulador. <input type =”button” onclick =”alerta('Antes')” value=”prema me”/> <script> document.getElementsByTagName('entrada')[0].onclick = function() { alerta('Despois') } </script> [/Code] Uso de métodos especiais: Nunha aplicación JavaScript complexo, onde os métodos de interface diferentes xestionar métodos personalizados de eventos comúns son usados para asignar manipuladores. Microsoft ofrece unha solución que só funciona coa versión IE inferior a 9 e tamén co Opera. Manipuladores son asignados e destacado como a continuación Listing 8: Achegar e eliminar manipuladores element.attachEvent( “on” + evento, adestrador) [/Code] Eliminación dun manipulador – [Code] element.detachEvent( “on” + evento, adestrador) [/Code] Usando achegar evento, podemos atribuír varios manipuladores para o mesmo elemento. O seguinte fragmento de código amosa esta Listing 9: Asignando varias manipuladores a un elemento. [Code] <input id = “meuElemento” type = “button” value = “prema me” /> <script> var meuElemento = document.getElementById( “meuElemento” ) estaba actuando = function() { alerta( 'Grazas!’ ) } eran comercios 2. = function() { alerta( 'Grazas de novo!’ ) } myElement.attachEvent( “onclick”, adestrador) myElement.attachEvent( “onclick”, handler2) </script> [/Code] Achegar eventos non pasar o parámetro 'acción'. Segundo o padrón W3C seguinte asignación manipulador funciona en case todos os navegadores que se usan hoxe. Anexando un manipulador Listing 10: Achegar e eliminar manipuladores segundo W3C element.addEventListener ( evento, adestrador, fase ) [/Code] elemento. removeEventListener ( evento, adestrador, fase ) [/Code]
accións relacionadas con eventos: Debemos coidar das catro accións seguintes ao manexar as accións relacionadas con eventos · Rexistrar o manipulador de eventos: Isto pódese facer definindo os elementos de propiedade onevent e.g.. onclick ou onkeypress etc. Isto funciona con todo o seu navegador, pero ten unha limitación que pode achegar só un manipulador de eventos a un elemento. Os acontecementos ligados poden eliminar de forma semellante utilizando detachEvent ou removeEventListener. · Obter o obxecto de evento: Maioría dos navegadores pasar o obxecto evento como un argumento para o manipulador. Os tres eventos seguintes son xerados cando o usuario fai clic rato. o mousedown: indica que o rato está premido. o mouseup: indica que o rato é liberado. o prema: indica que o rato é premendo. Se isto acontecer en sucesión, isto indica que un dobre clic aconteceu. · Extract information from the object – O terceiro paso é a información relacionada coa acción de extracción do obxecto e iniciar a acción. · Inform about the completion of the event – Este é o paso final. Unha vez que o evento é poxa con éxito a realización do evento está marcado. Summary: Para completar a discusión que pode manter os seguintes puntos presente · Used to initiate an action which should be performed as per the customers need. · Events are of two types – eventos DOM e eventos ventá. · 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
Patróns de deseño Java Script
CSS3 & JavaScript
Java Script and CSS3 properties
