Übersicht: In diesem Artikel werden wir über die Browser-Ereignisse in JavaScript diskutieren. Java Skript Ereignisse sind sehr wichtig, da sie die meisten der Aufgaben. Der andere wichtige Punkt ist die Browser-Kompatibilität. Da die Java-Script wird in HTML-Dateien eingebettet, die Ausführung von Java-Script ist browser abhängig. Java-Skripte werden auch gereift genug Browser-Ereignisse zu behandeln.
Einführung:
Ein Browser-Ereignis ist ein Signal aus dem Browser auf die Anwendung im Falle eine Aktion ausgeführt wird. Diese Ereignisse sind von folgenden Typen
- DOM Events: Diese werden durch die DOM-Elemente initiiert z.B.. ein Klick-Ereignis ausgelöst wird, wenn ein Element oder eine Maus über Ereignis geklickt wird ausgelöst, wenn der Mauszeiger auf einem Element schwebte wird. Diese Ereignisse schließen Sie einen Java-Script-Code mit dem Dokument.
- Fensterereignisse: Diese werden ausgelöst, wenn das Browser-Fenster der Größe verändert wird.
Was sind die Ereignisse?
Ein Ereignis kann als eine Aktion / Arbeit definiert werden, die ein Signal an Java-Skript sendet. Nun führt Java-Script als Reaktion auf ein Ereignis. Aber das Ereignis sollte Signal an die jeweilige Java-Script-Komponente zu senden registriert werden. Im Folgenden sind einige der Ereignisse.
Fenster Ereignisse: Diese Ereignisse werden ausgelöst, wenn Browser-Fenster der Größe verändert wird.
DOM-Ereignisse: Diese werden ausgelöst, wenn ein DOM-Element wird eine Aktion durchführen.
Weitere Veranstaltungen: Diese Ereignisse werden unter Berücksichtigung aller anderen Arten von Ereignissen abgesehen von den beiden oben genannten.
Eventhandler: Wir müssen verstehen, dass es einen großen Unterschied zwischen Java und Java Script. In java, Multi-Threading ist möglich, aber Java-Script-Ereignisse sind Single-Threaded. So sind die Event-Handler werden nacheinander ausgeführt. Um zu klären, es, Nehmen wir an, ein Benutzer zwei Veranstaltungen durchgeführt hat, Mouseover und dann mousemove-. So ist die Mouseover-Ereignis wird zuerst ausgeführt. Sobald das erste Ereignis abgeschlossen ist, mousemove- Veranstaltung erhalten ausgeführt.
Wenn ein Skript hat eine Klage gegen eine Veranstaltung durchzuführen, Es sollte eine Funktion zugeordnet sein. Diese Funktionen werden als Event-Handler bezeichnet. Normalerweise werden diese Funktionen im Format genannt - auf EVENT_NAME z. Onclick usw.. Event-Handler in Java-Script sind Single-Threaded und werden der Reihe nach ausgeführt. Wenn also zwei Ereignisse zur gleichen Zeit auftreten,, ihre Handler wird einer nach dem anderen ausgeführt werden. Es gibt viele Möglichkeiten, in denen die Ereignisbehandlungsroutinen zugeordnet sind,. These are.
Mit HTML-Tag: Der Event-Handler kann das Markup direkt im Bereich On-Event-Attribut zugeordnet werden.
Listing 1: Event handler using html tag
[Code]
<input id = “b1” Wert = “Klick mich” Onclick = “aufmerksam('Vielen Dank! Ich klickte. ‘); ” type = “Taste” />
[/Code]
Wenn dieser Code ausgeführt, wir sehen eine Schaltfläche mit einem Etikett – 'Klick mich'. Wenn der Benutzer trifft diese Taste eine Warnmeldung mit einer Meldung – Thanks! Ich klickte. Wir können auch eine Funktion für die Ereignisbehandlung aufrufen. Betrachten Sie den folgenden Code
Listing 2: Event-Handler-Funktion
[Code]
| <!DOCTYPE HTML> | |||||||||||||||
| <html> | |||||||||||||||
| <Kopf> | |||||||||||||||
| <script type =”text / javascript”> | |||||||||||||||
| function count_rabbits() { | |||||||||||||||
| für(var i = 1; ich <= 3; i ) { | |||||||||||||||
| aufmerksam( “Hase “+i ” aus dem Hut!” ) | |||||||||||||||
| } | |||||||||||||||
| } | |||||||||||||||
| </script> | |||||||||||||||
| </Kopf> | |||||||||||||||
| <body> | |||||||||||||||
| <input type = “Taste” Onclick = “count_rabbits()” Wert = “Graf Kaninchen!”/> | |||||||||||||||
| </body> | |||||||||||||||
| </html>[/Code]Ein weiterer Ansatz, um das Ereignis zu binden, wird unter Verwendung von this.innerHTML, wo diese auf das aktuelle Element verweist. Der folgende Code zeigt diesListing 3: Event-Handler this.innerHTML mit
[Code] <Schaltfläche Onclick = “aufmerksam ( this.innerHTML )”> Klicken Sie mir, mich zu sehen </Taste> [/Code] Mit DOM Objekteigenschaft: Hier ist die Zuordnung erfolgt über die Eigenschaft verwendet – onevent. In diesem Fall müssen wir das Element zuerst zu bekommen und dann einen Handler auf die Eigenschaft onevent zuweisen. The following code is an example of setting a click handler to the element with id ‘myId’ Listing 4: Event-Handler DOM Objekteigenschaft mit [Code] <input id = “meine ID” type = “Taste” Wert = “drücken Sie mir”/> <script> document.getElementById( ‘ meine ID ‘ ).Onclick = function() { aufmerksam('Vielen Dank') } </script> [/Code] Hier werden die folgenden zwei Dinge sind zu beachten, werden diese zu verwenden, – · It is a property, kein Attribut und sein Name ist onevent die Groß- und Kleinschreibung und in Kleinbuchstaben geschrieben werden sollte. · The handler should be a function not a String. Wenn findet der Browser ein onevent Attribut im HTML-Markup, es erzeugt eine Funktion, seinen Inhalt unter Verwendung und weist sie die Eigenschaft. Also die beiden folgenden Codes macht das gleiche Listing 5: Event-Handler nur HTML [Code] <input type = “Taste” Onclick = “aufmerksam( 'Klicken!’ )” Wert = “Taste”/> [/Code] Listing 6: Event-Handler mit Hilfe von HTML & JS. [Code] <input type = “Taste” id = “Taste” Wert = “Taste”/> <script> document.getElementById('Taste').Onclick = function() { aufmerksam('Klicken!’) } </script> [/Code] JavaScript überschreibt einen Handler in Markup gesetzt. Der folgende Ausschnitt ersetzt eine Markup-Handler mit einer neuen Listing 7: Überschreiben eines Handler-Set. <input type =”Taste” Onclick =”aufmerksam('Vor')” value=”drücken Sie mir”/> <script> document.getElementsByTagName('Eingang')[0].Onclick = function() { aufmerksam('Nach') } </script> [/Code] Die Sonderverfahren: In einem komplexen JavaScript-Anwendung, wo verschiedene Interface-Methoden behandeln gemeinsame Veranstaltung benutzerdefinierte Methoden-Handler verwendet werden, um zuweisen. Microsoft bietet eine Lösung, die nur mit dem IE-Version funktioniert weniger als 9 und auch mit Opera. Handlers zugeordnet sind und abgenommen, wie unter Listing 8: Anbringen und Abnehmen Handler element.attachEvent( “auf” + Event, Handler) [/Code] Entfernen eines Handler – [Code] element.detachEvent( “auf” + Event, Handler) [/Code] Mit Ereignis anhängen, wir können mehrere Handler auf dasselbe Element zuweisen. Der folgende Codeausschnitt zeigt diese Listing 9: Zuweisen mehrerer Handler zu einem Element. [Code] <input id = “myElement” type = “Taste” Wert = “drücken Sie mir” /> <script> var myElement = document.getElementById( “myElement” ) Handeln wurde = function() { aufmerksam( 'Vielen Dank!’ ) } waren Trades 2. = function() { aufmerksam( 'Danke noch einmal!’ ) } myElement.attachEvent( “Onclick”, Handler) myElement.attachEvent( “Onclick”, handler2) </script> [/Code] Bringen Sie Ereignisse nicht den Parameter übergeben "this". Gemäß dem W3C-Standard arbeitet die folgende Prozedur Zuordnung in fast allen Browsern, die heute verwendet werden. Anbringen eines Handler Listing 10: Anbringen und Handler nach w3c Entfernen element.addEventListener ( Event, Handler, Phase ) [/Code] Element. removeEventListener ( Event, Handler, Phase ) [/Code]
Ereignis im Zusammenhang mit Aktionen: Wir sollten darauf die folgenden vier Maßnahmen zu ergreifen, während ereignisbezogene Aktionen Umgang · Registrieren Sie den Event-Handler: Dies kann durch die Einstellung der Elemente onevent Eigenschaft z getan werden. Onclick oder onkeypress usw.. Dies funktioniert mit dem gesamten Browser hat aber eine Einschränkung, dass wir nur eine Event-Handler an ein Element anhängen. Die beigefügten Ereignisse können in ähnlicher Weise unter Verwendung von detachEvent oder removeEventListener entfernt werden. · Holen Sie sich das Event-Objekt: Die Mehrheit der Browser passieren das Ereignisobjekt als Argument an den Handler. Die folgenden drei Ereignisse werden generiert, wenn der Benutzer mit der Maus klickt. o MouseDown-: zeigt an, dass die Maus gedrückt wird,. o mouseup: zeigt an, dass die Maustaste losgelassen wird,. o Klicken: zeigt an, dass die Maus angeklickt wird. Wenn dies geschieht nacheinander, Dies zeigt an, dass ein Doppelklick geschehen. · Extract information from the object – Der dritte Schritt ist der Extrakt Aktion bezogene Informationen aus dem Objekt und starten Sie die Aktion. · Inform about the completion of the event – Dies ist der letzte Schritt. Sobald das Ereignis erfolgreich den Abschluss der Veranstaltung versteigert wird markiert. Summary: Um die Diskussion zu schließen, können wir die folgenden Punkte beachten · Used to initiate an action which should be performed as per the customers need. · Events are of two types – DOM-Ereignisse und Fenster Ereignisse. · 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
