Overzicht: In dit artikel zullen we discussiëren over de browser gebeurtenissen in JavaScript. Java script gebeurtenissen zijn erg belangrijk omdat ze het grootste deel van de taken uit te voeren. Een ander belangrijk punt is de browser compatibiliteit. Zoals de java script is ingebed in html-bestanden, de uitvoering van java script is browser afhankelijk. Java-scripts worden ook gerijpt genoeg te hanteren browser evenementen.
Introductie:
Een browser gebeurtenis een signaal van de browser naar de applicatie wanneer een actie wordt uitgevoerd. Deze gebeurtenissen zijn van volgende types
- DOM Events: Deze worden geïnitieerd door de DOM-elementen bijv. een gebeurtenis click wordt geactiveerd wanneer een element wordt geklikt of een muis over gebeurtenis wordt geactiveerd wanneer de muisaanwijzer wordt zweefde op een element. Deze gebeurtenissen sluit een java script code met de document.
- venster Events: Deze worden gestart wanneer het browservenster wordt aangepast.
Wat zijn de evenementen?
Een gebeurtenis kan worden omschreven als een actie / werk dat een signaal stuurt naar java script. Nu java script wordt uitgevoerd in reactie op een bepaalde gebeurtenis. Maar de gebeurtenis moet worden geregistreerd om het signaal te sturen naar de desbetreffende java script component. Na zijn enkele van de gebeurtenissen.
window evenementen: Deze gebeurtenissen worden gestart wanneer browservenster wordt aangepast.
DOM events: Deze worden geactiveerd wanneer een DOM-element is het uitvoeren van een bepaalde actie.
andere evenementen: Deze gebeurtenissen overweegt alle andere gebeurtenissen behalve de bovengenoemde twee.
event handlers: We moeten begrijpen dat er een groot verschil tussen java en java script. In java, multi-threading is mogelijk, maar java script gebeurtenissen zijn single threaded. Dus de event handlers worden sequentieel uitgevoerd. Om het te verduidelijken, laten we aannemen één gebruiker heeft twee gebeurtenissen uitgevoerd, mouseover en dan mousemove. Dus de mouseover evenement zal eerst worden uitgevoerd. Zodra de eerste gebeurtenis is voltooid, mouseMove evenement krijgt uitgevoerd.
Als een script heeft om een actie uit te voeren tegen een evenement, het moet een functie in verband te hebben. Deze functies worden aangeduid als event handlers. Meestal zijn deze functies worden genoemd in het formaat - op EVENT_NAME bijv. onclick etc. Event handlers in java script zijn single threaded en worden sequentieel uitgevoerd. Dus als twee gebeurtenissen tegelijkertijd, hun handlers wordt uitgevoerd ene na de andere. Er zijn vele manieren waarop de event handlers zijn toegewezen. These are.
Het gebruik van HTML-tag: Het evenement handler kan direct worden betrokken bij de opmaak met behulp van attribuut on-event.
Listing 1: Event handler using html tag
[Code]
<ingang id = “b1” value = “Klik hier” onclick = “alarm('Bedankt! Ik klikte. ‘); ” type = “knop” />
[/Code]
Wanneer deze code is uitgevoerd, zien we een knop met een label – 'Klik hier'. Als de gebruiker raakt deze knop een waarschuwingsvenster met een boodschap – Thanks! Ik klikte. We kunnen ook een functie voor het event handling bellen. Beschouw de volgende code
Listing 2: Event handler met de functie
[Code]
| <!DOCTYPE HTML> | |||||||||||||||
| <html> | |||||||||||||||
| <hoofd> | |||||||||||||||
| <script type =”text / javascript”> | |||||||||||||||
| function count_rabbits() { | |||||||||||||||
| voor(var i = 1; ik <= 3; i ) { | |||||||||||||||
| alarm( “Konijn “+i ” uit de hoge hoed!” ) | |||||||||||||||
| } | |||||||||||||||
| } | |||||||||||||||
| </script> | |||||||||||||||
| </hoofd> | |||||||||||||||
| <lichaam> | |||||||||||||||
| <input type = “knop” onclick = “count_rabbits()” value = “Count konijnen!”/> | |||||||||||||||
| </lichaam> | |||||||||||||||
| </html>[/Code]Een andere benadering van het event binden gebruikt this.innerHTML wanneer dit verwijst naar het huidige element. De volgende code illustreert ditListing 3: Event handler met behulp van this.innerHTML
[Code] <knoop onclick = “alarm ( this.innerHTML )”> Klik me om me te zien </knop> [/Code] Met behulp van DOM Object Property: Hier wordt de opdracht is gemaakt met behulp van de eigenschap – onevent. In dit geval moeten we het element eerst te krijgen en vervolgens een handler toe te wijzen aan de eigenschap onevent. The following code is an example of setting a click handler to the element with id ‘myId’ Listing 4: Event handler met behulp van DOM Object Property [Code] <ingang id = “Mijn ID” type = “knop” value = “druk me”/> <script> document.getElementById( ‘ Mijn ID ‘ ).onclick = function() { alarm('Bedankt') } </script> [/Code] Hier de volgende twee zaken eraan herinnerd om dit te gebruiken – · It is a property, niet een attribuut en zijn naam is onevent dat is hoofdlettergevoelig en moet in kleine letters. · The handler should be a function not a String. Wanneer de browser vindt een onevent attribuut in de HTML-opmaak, het creëert een functie met behulp van de inhoud ervan en wijst deze toe aan de eigenschap. Dus de volgende twee codes doet hetzelfde Listing 5: Event handler met alleen HTML [Code] <input type = “knop” onclick = “alarm( 'Klik!’ )” value = “Knop”/> [/Code] Listing 6: Event handler met behulp van HTML & JS. [Code] <input type = “knop” id = “knop” value = “Knop”/> <script> document.getElementById('knop').onclick = function() { alarm('Klik!’) } </script> [/Code] JavaScript overschrijft een handler in markup. Het volgende fragment vervangt een markup handler door een nieuwe Listing 7: Overschrijven van een handler set. <input type =”knop” onclick =”alarm('Voor')” value=”druk me”/> <script> document.getElementsByTagName('invoer')[0].onclick = function() { alarm('Na') } </script> [/Code] Gebruik van speciale methoden: In een complexe JavaScript-applicatie, waar de andere interface methoden handle zelfstandig evenement aangepaste methodes worden gebruikt om handlers toe te wijzen. Microsoft biedt een oplossing die werkt alleen met IE-versie minder dan 9 en ook met Opera. Omgaat, wordt toegewezen en afstandelijk als onder Listing 8: Aanbrengen en verwijderen van handlers element.attachEvent( “op” + evenement, handler) [/Code] Het verwijderen van een Handler – [Code] element.detachEvent( “op” + evenement, handler) [/Code] Met behulp van attach event, kunnen we meerdere handlers toewijzen aan hetzelfde element. Het volgende stukje code laat dit zien Listing 9: Het toewijzen van meerdere handlers aan één element. [Code] <ingang id = “myElement” type = “knop” value = “druk me” /> <script> var myElement = document.getElementById( “myElement” ) handelde = function() { alarm( 'Bedankt!’ ) } waren trades 2. = function() { alarm( 'Nogmaals bedankt!’ ) } myElement.attachEvent( “bij klikken”, handler) myElement.attachEvent( “bij klikken”, handler2) </script> [/Code] Bevestig gebeurtenissen niet de parameter 'dit' passeren. Zoals aangegeven in de W3C-standaard de volgende handler opdracht werkt in bijna alle browsers die vandaag de dag worden gebruikt. Het bevestigen van een Handler Listing 10: Aanbrengen en verwijderen van handlers als per W3C element.addEventListener ( evenement, handler, fase ) [/Code] element. removeEventListener ( evenement, handler, fase ) [/Code]
Event gerelateerde acties: We moeten zorgen voor de volgende vier acties tijdens het hanteren van het evenement gerelateerde acties · Registreer de event handler: Dit kan door de elementen onevent eigenschap b.v.. onclick of onkeypress etc. Dit werkt samen met de gehele browser, maar heeft een beperking dat we slechts één event handler kan hechten aan een element. De bijgevoegde evenementen kunnen worden verwijderd in een soortgelijke manier met behulp van detachEvent of removeEventListener. · Klik hier voor de event object: Meerderheid van de browsers passeren het evenement object als een argument om de handler. De volgende drie gebeurtenissen worden gegenereerd wanneer de gebruiker zijn muis klikt. o mouseDown: geeft aan dat de muis ingedrukt. o mouseUp: geeft aan dat de muis wordt losgelaten. o Klik op: geeft aan dat de muis wordt geklikt. Als dit gebeurt in opeenvolging, Dit geeft aan dat een dubbelklik is gebeurd. · Extract information from the object – De derde stap is het extract actie gerelateerde informatie van het object en de inleiding van de actie. · Inform about the completion of the event – Dit is de laatste stap. Nadat het evenement succesvol veilen de voltooiing van de gebeurtenis wordt aangegeven. Summary: Om de discussie kunnen we concluderen de volgende punten in gedachten kunnen houden · Used to initiate an action which should be performed as per the customers need. · Events are of two types – DOM events en Window evenementen. · 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
