Inleiding tot die leser gebeure in JavaScript

Oorsig: In hierdie artikel sal ons gesels oor die leser gebeure in JavaScript. Java script gebeure is baie belangrik aangesien dit die meeste van die take uit te voer. Die ander belangrike punt is die leser verenigbaarheid. Soos die Java script in HTML-lêers, die uitvoering van Java script is leser afhanklik. Java skrifte is ook ryp genoeg is om te hanteer leser gebeure.

Inleiding:
'N leser geval is 'n sein van die leser om die aansoek in die geval 'n aksie uitgevoer. Hierdie gebeure is van volgende tipes

DOM gebeure: Hierdie is geïnisieer deur die DOM elemente Bv. 'n klik gebeurtenis veroorsaak wanneer 'n element word gebruik of 'n muis oor gebeurtenis veroorsaak wanneer die muis wyser is hovered oor 'n element. Hierdie gebeure konnekteer 'n Java script kode met die dokument.
venster Events: Hierdie is geïnisieer wanneer die venster is resized.

Wat is die gebeure?
'N gebeurtenis kan gedefinieer word as 'n aksie / werk wat 'n sein stuur na Java script. Nou Java script voer in reaksie op 'n gebeurtenis. Maar die gebeurtenis moet geregistreer wees om sein te stuur na die onderskeie Java script komponent. Hier volg 'n paar van die gebeure.

venster gebeure: Hierdie gebeure is geïnisieer wanneer venster is resized.
DOM gebeure: Hierdie is geïnisieer wanneer 'n DOM-element is die uitvoering van 'n aksie.
ander gebeure: Hierdie gebeure is die oorweging van alle ander vorme van gebeure Afgesien van die bogenoemde twee.

event handlers: Ons moet verstaan dat daar 'n groot verskil tussen Java en Java script. In Java, multi threading is moontlik, maar Java script gebeure is enkele threaded. So het die event handlers word sekwensieel uitgevoer. Om dit te verduidelik, Laat ons aanneem een gebruiker het twee byeenkomste uitgevoer, Beweeg en dan mousemove. So het die wyserhanggeleentheid sal eers uitgevoer word. Sodra die eerste geval is voltooi, mousemove geleentheid sal kry tereggestel.

As 'n script het om 'n aksie uit te voer teen 'n gebeurtenis, Dit moet 'n funksie wat verband hou om dit te hê. Hierdie funksies word verwys as event handlers. Gewoonlik hierdie funksies word genoem in die formaat - op EVENT_NAME Bv. onclick ens. Event handlers in Java script is enkele gestruktureerde en word sekwensieel uitgevoer. Vandaar as twee dinge gebeur op dieselfde tyd, hul hanteerders sal uitgevoer word een na die ander. Daar is baie maniere waarop die gebeurtenis hanteerders is opgedra. These are.

Die gebruik van HTML-tag: Die event handler kan direk verband hou in die opmaak met behulp kenmerk on-gebeurtenis.

Listing 1: Event handler using html tag

[Code]

[/Code]
Wanneer hierdie kode uitgevoer word, sien ons 'n knoppie met 'n etiket – 'Klik my'. As die gebruiker treffers hierdie knoppie 'n waarskuwing venster met 'n boodskap – Thanks! Ek gekliek. Ons kan ook 'n funksie vir die hantering geval noem. Oorweeg die volgende kode

Listing 2: Event handler behulp funksie
[Code]

<!DOCTYPE HTML>

<html>

<kop>

function count_rabbits() {

vir(var i = 1; i <= 3; i ) {

waarskuwing( “Haas “+i ” uit die hoed!” )

}

</script>

</kop>

<body>

</body>

</html>[/Code]Nog 'n benadering tot die geval bind gebruik this.innerHTML waar dit verwys na die huidige element. Die volgende kode illustreer hierdieListing 3: Event handler behulp this.innerHTML

[Code]

[/Code]

Die gebruik van DOM Object Eiendom: Hier is die opdrag is gemaak met behulp van die eiendom – onevent. In hierdie geval moet ons die element eerste en dan 'n hanteerder toewys aan die eiendom onevent. The following code is an example of setting a click handler to the element with id ‘myId’

Listing 4: Event handler behulp DOM Object Eiendom

[Code]

document.getElementById( ‘ myId ‘ ).onclick = funksie() {

waarskuwing('Dankie')

}

</script>

[/Code]

Hier is die volgende twee dinge moet in ag geneem word ten einde dit te gebruik –

· It is a property, nie 'n kenmerk en sy naam is onevent wat is kassensitief en moet in kleinletters.

· The handler should be a function not a String.

Wanneer die leser vind 'n onevent kenmerk in die HTML opmaak, dit skep 'n funksie gebruik te maak van die inhoud daarvan en ken dit aan die eiendom. So die volgende twee kodes doen dieselfde

Listing 5: Event handler met behulp van slegs HTML

[Code]

[/Code]

Listing 6: Event handler met behulp van HTML & JS.

[Code]

document.getElementById('Knoppie ").onclick = funksie() {

waarskuwing('Klik!’)

}

</script>

[/Code]

JavaScript oor skryf 'n hanteerder wat in opmaak. Die volgende uittreksel vervang 'n opmaak hanteerder met 'n nuwe een

Listing 7: Oor skryf 'n hanteerder stel.
[Code]

document.getElementsByTagName('Input')[0].onclick = funksie() {

waarskuwing('Na')

}

</script>

[/Code]

Met behulp van spesiale metodes: In 'n komplekse JavaScript aansoek, waar verskillende koppelvlak metodes hanteer algemene gebeurtenis persoonlike metodes word gebruik om hanteerders toewys. Microsoft bied 'n oplossing wat net werk met Internet Explorer weergawe minder as 9 en ook met Opera. Hanteerders word toegeken en losstaande as onder
Heg 'n Handler

Listing 8: Heg en die verwydering van hanteerders
[Code]

element.attachEvent( “op” + gebeurtenis, hanteerder)

[/Code]

Die verwydering van 'n Handler –

[Code]

element.detachEvent( “op” + gebeurtenis, hanteerder)

[/Code]

Die gebruik van heg gebeurtenis, kan ons verskeie hanteerders toewys aan dieselfde element. Die volgende kode uit toon hierdie

Listing 9: Toeken verskeie hanteerders om een element.

[Code]

var myElement = document.getElementById( “myElement” )

optree = funksie() {

waarskuwing( 'Dankie!’ )

}

was ambagte 2. = funksie() {

waarskuwing( 'Weereens dankie!’ )

}

myElement.attachEvent( “onclick”, hanteerder)

myElement.attachEvent( “onclick”, handler2)

</script>

[/Code]

Heg gebeure nie die parameter "hierdie" slaag. Soos per die W3C standaard die volgende hanteerder opdrag werk in byna al die blaaiers wat vandag gebruik word.

Heg 'n Handler

Listing 10: Heg en die verwydering van hanteerders soos per W3C
[Code]

element.addEventListener ( gebeurtenis, hanteerder, fase )

[/Code]
Die verwydering van 'n Handler
[Code]

element. removeEventListener ( gebeurtenis, hanteerder, fase )

[/Code]

Event verwante aksies: Ons moet sorg vir die volgende vier stappe tydens hantering gebeurtenis-verwante aksies

· Registreer die event handler: Dit kan gedoen word deur die oprigting van die elemente onevent eiendom Bv. onclick of onkeypress ens. Dit werk met die hele leser maar het 'n beperking dat ons net een event handler kan heg aan 'n element. Die aangehegte gebeure verwyder kan word in 'n soortgelyke wyse met behulp van detachEvent of removeEventListener.

· Kry die geleentheid voorwerp: Meerderheid van bruisers slaag indien voorwerp as 'n argument om die hanteerder. Die volgende drie byeenkomste gegenereer wanneer die gebruiker sy muis kliek.

o Mousedown: dui daarop dat die muis gedruk.

o Mouseup: dui daarop dat die muis vrygestel.

o Click: dui daarop dat die muis gekliek. As dit gebeur, in opvolging, dit dui daarop dat 'n dubbel kliek gebeur.

· Extract information from the object – Die derde stap is die uittreksel aksie verwante inligting van die voorwerp en inisieer die aksie.

· Inform about the completion of the event – Dit is die finale stap. Sodra die gebeurtenis suksesvol opgeveil die voltooiing van die gebeurtenis is gemerk.

Summary: Om die bespreking te sluit ons die volgende punte in gedagte kan hou
· An event is a signal from the front end to the back end.

· Used to initiate an action which should be performed as per the customers need.

· Events are of two types – DOM gebeure en Venster gebeure.

· 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