Vue d'ensemble: Dans cet article, nous allons discuter sur les événements de navigateur en JavaScript. les événements de script Java sont très importants car ils effectuent la plupart des tâches. L'autre point important est la compatibilité du navigateur. Comme le script java est intégré dans les fichiers html, l'exécution du script java dépend navigateur. scripts Java sont également mûri assez pour gérer les événements du navigateur.
Présentation:
Un événement de navigation est un signal à partir du navigateur vers l'application dans le cas où une action est effectuée. Ces événements sont des types suivants
- DOM Events: Ceux-ci sont initiées par les éléments DOM e.g. un événement click est déclenché quand un élément est cliqué ou une souris sur événement est déclenché lorsque le pointeur de la souris passe sur un élément. Ces événements se connectent un code java script avec le document.
- fenêtre Événements: Ceux-ci sont déclenchées lorsque la fenêtre du navigateur est redimensionnée.
Quels sont les événements?
Un événement peut être défini comme une action / travail qui envoie un signal à java script. Maintenant java script exécute en réponse à un événement. Mais l'événement doit être enregistré pour envoyer un signal au composant java script respectif. Voici quelques-uns des événements.
événements de fenêtre: Ces événements sont initiés lorsque la fenêtre du navigateur est redimensionnée.
événements DOM: Ceux-ci sont déclenchées quand un élément DOM effectue une action.
D'autres événements: Ces événements envisagent tous les autres types d'événements mis à part les deux ci-dessus.
Les gestionnaires d'événements: Nous devons comprendre qu'il ya une grande différence entre java et java script. En java, plusieurs threads est possible, mais les événements de script java sont mono-thread. Ainsi, les gestionnaires d'événements sont exécutées séquentiellement. Pour clarifier, supposons qu'un utilisateur a effectué deux événements, mouseover puis mousemove. Donc, l'événement mouseover sera exécuté en premier. Une fois le premier événement est terminé, événement mousemove obtiendra exécuté.
Si un script doit effectuer une action contre un événement, elle doit avoir une fonction qui lui est associée. Ces fonctions sont appelées gestionnaires d'événements. Habituellement, ces fonctions sont nommés dans le format - sur EVENT_NAME e.g. onclick etc. Les gestionnaires d'événements dans le script java sont mono-thread et sont exécutées séquentiellement. Par conséquent, si deux événements se produisent en même temps,, leurs gestionnaires seront exécutés l'un après l'autre. Il existe de nombreuses façons dont les gestionnaires d'événements sont attribués. These are.
Utilisation de balise HTML: Le gestionnaire d'événement peut être associé directement dans le balisage en utilisant l'attribut sur l'événement.
Listing 1: Event handler using html tag
[Code]
<entrée id = “b1” value = “Cliquez sur-moi” onclick = “alerte('Merci! Je clique. ‘); ” type = “button” />
[/Code]
Lorsque ce code est exécuté, nous voyons un bouton avec une étiquette – 'Cliquez me'. Si l'utilisateur clique sur ce bouton une fenêtre d'alerte avec un message – Thanks! Je clique. Nous pouvons également appeler une fonction pour la gestion des événements. Considérez le code suivant
Listing 2: Gestionnaire d'événements en utilisant la fonction
[Code]
| <!DOCTYPE HTML> | |||||||||||||||
| <html> | |||||||||||||||
| <tête> | |||||||||||||||
| <Type script =”text / javascript”> | |||||||||||||||
| function count_rabbits() { | |||||||||||||||
| pour(var i = 1; Je <= 3; i ) { | |||||||||||||||
| alerte( “lapin “+i ” du chapeau!” ) | |||||||||||||||
| } | |||||||||||||||
| } | |||||||||||||||
| </script> | |||||||||||||||
| </tête> | |||||||||||||||
| <body> | |||||||||||||||
| <input type = “button” onclick = “count_rabbits()” value = “Nombre de lapins!”/> | |||||||||||||||
| </body> | |||||||||||||||
| </html>[/Code]Une autre approche pour lier l'événement utilise this.innerHTML où cela fait référence à l'élément courant. Le code suivant illustre cetteListing 3: Gestionnaire d'événements en utilisant this.innerHTML
[Code] <button onclick = “alerte ( this.innerHTML )”> Cliquez-moi pour me voir </button> [/Code] Utilisation DOM Object: Ici, la cession est faite en utilisant la propriété – onevent. Dans ce cas, nous avons besoin pour obtenir le premier élément, puis affecter un gestionnaire à la propriété onevent. The following code is an example of setting a click handler to the element with id ‘myId’ Listing 4: Gestionnaire d'événements en utilisant DOM Object [Code] <entrée id = “ma pièce d'identité” type = “button” value = “appuyez moi”/> <script> document.getElementById( ‘ ma pièce d'identité ‘ ).onclick = function() { alerte('Merci') } </script> [/Code] Voici les deux choses suivantes doivent être notées pour pouvoir utiliser cette – · It is a property, pas un attribut et son nom est onevent qui est sensible à la casse et doit être en minuscules. · The handler should be a function not a String. Lorsque le navigateur trouve un attribut onevent dans le balisage HTML, il crée une fonction en utilisant son contenu et l'assigne à la propriété. Ainsi, les deux codes suivants fait la même Listing 5: Gestionnaire d'événements en utilisant uniquement HTML [Code] <input type = “button” onclick = “alerte( 'Cliquez!’ )” value = “Bouton”/> [/Code] Listing 6: Gestionnaire d'événements en utilisant HTML & JS. [Code] <input type = “button” id = “button” value = “Bouton”/> <script> document.getElementById('bouton').onclick = function() { alerte('Cliquez!’) } </script> [/Code] JavaScript écrase un gestionnaire défini dans le balisage. L'extrait suivant remplace un gestionnaire de balisage par un nouveau Listing 7: Écrasement d'un jeu de gestionnaire. <input type =”button” onclick =”alerte('Avant')” value=”appuyez moi”/> <script> document.getElementsByTagName('contribution')[0].onclick = function() { alerte('Après') } </script> [/Code] En utilisant des méthodes spéciales: Dans une application JavaScript complexe, où les différentes méthodes d'interface traitent des méthodes personnalisées d'événements communs sont utilisés pour assigner des gestionnaires. Microsoft fournit une solution qui fonctionne uniquement avec la version IE moins 9 et aussi avec Opera. Handlers sont assignés et détachés comme sous Listing 8: Montage et démontage des gestionnaires element.attachEvent( “sur” + un événement, maître) [/Code] Suppression d'un gestionnaire – [Code] element.detachEvent( “sur” + un événement, maître) [/Code] Utilisation événement attach, nous pouvons affecter plusieurs gestionnaires à un même élément. L'extrait de code suivant illustre cette Listing 9: Affecter plusieurs gestionnaires à un élément. [Code] <entrée id = “myElement” type = “button” value = “appuyez moi” /> <script> var myElement = document.getElementById( “myElement” ) a agi = function() { alerte( 'Merci!’ ) } étaient métiers 2. = function() { alerte( 'Merci encore!’ ) } myElement.attachEvent( “sur clic”, maître) myElement.attachEvent( “sur clic”, handler2) </script> [/Code] Joindre les événements ne passe pas le paramètre 'this'. Conformément à la norme W3C l'affectation de gestionnaire suivant fonctionne dans presque tous les navigateurs qui sont utilisés aujourd'hui. Fixation d'un gestionnaire Listing 10: Montage et démontage des gestionnaires selon w3c element.addEventListener ( un événement, maître, phase ) [/Code] élément. removeEventListener ( un événement, maître, phase ) [/Code]
actions d'événements liés: Nous devons prendre soin des quatre actions suivantes lors de la manipulation d'événements liés à des actions · Enregistrez le gestionnaire d'événements: Cela peut être fait en définissant les éléments de propriété onevent e.g. onclick ou onkeypress etc. Cela fonctionne avec le navigateur entier, mais a une limitation que l'on peut attacher un seul gestionnaire d'événement à un élément. Les événements attachés peuvent être enlevés d'une manière similaire en utilisant detachEvent ou removeEventListener. · Obtenez l'objet d'événement: La majorité des navigateurs passent l'objet d'événement comme un argument au gestionnaire. Les trois événements suivants sont générés lorsque l'utilisateur clique sur sa souris. o Souris vers le bas: indique que la souris est enfoncé. o mouseup: indique que la souris est relâché. o Click: indique que la souris est cliqué. Si cela se produit dans la succession, cela indique que un double clic est arrivé. · Extract information from the object – La troisième étape est l'extrait l'action des informations relatives à l'objet et de lancer l'action. · Inform about the completion of the event – Ceci est la dernière étape. Une fois que l'événement est vendu aux enchères avec succès à la fin de l'événement est marquée. Summary: Pour conclure la discussion que nous pouvons garder les points suivants à l'esprit · Used to initiate an action which should be performed as per the customers need. · Events are of two types – événements DOM et des événements de fenêtre. · 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
Patterns Java Script design
CSS3 & JavaScript
Java Script and CSS3 properties
