Enkonduko al retumilaj eventoj en JavaScript

java-script-browser-events

Superrigardo: En ĉi tiu artikolo ni diskutos pri la retumilaj eventoj en JavaScript. Java skribaj eventoj estas tre gravaj kiel ili elfaras plejparto de la taskoj. La alia grava punkto estas la retumila kongrueco. Kiel la java skribo estas integriĝinta en html dosieroj, La ekzekuto de java skribo estas retumilo dependa. Java skriboj estas ankaŭ maturigita sufiĉe pritrakti retumilajn eventojn.

Enkonduko:
Retumila evento estas signalo de la retumilo al la apliko en kazo ago estas elfarita. Ĉi tiuj eventoj estas sekvi tipojn

  • DOMaj Eventoj: Ĉi tiuj estas iniciatita de la DOMaj elementoj ekz. klaka evento estas ekkaŭzita kiam elementon estas klakita aŭ muso super evento estas ekkaŭzita kiam la musan sugeston estas ŝvebita sur elemento. Ĉi tiuj eventoj konektas java skriba kodo kun la dokumento.
  • Fenestraj Eventoj: Ĉi tiuj estas iniciatita kiam la retumilan fenestron estas resized.









Kio estas la eventoj?
Evento povas esti difinita kiel aga/laboro kiu sendas signalon al java skribo. Nun java skribo efektivigas en respondo al iu evento. Sed la evento devus esti registrita sendi signalon al la respektiva java skriba ero. Sekvanta estas kelkaj de la eventoj.

Fenestraj eventoj: Ĉi tiuj eventoj estas iniciatita kiam retumilan fenestron estas resized.
DOMaj eventoj: Ĉi tiuj estas iniciatita kiam DOMan elementon estas elfaranta iun agon.
Aliaj eventoj: Ĉi tiuj eventoj estas konsiderantaj ĉiuj aliaj tipoj de eventoj krom la supra du.

Eventaj prizorgantoj: Ni devas kompreni ke estas granda diferenco inter java kaj java skribo. En java, Multi surfadeniganta eblas sed java skribaj eventoj estas ununuraj surfadenigita. Do la eventaj prizorgantoj estas efektivigita sequentially. Klarigi ĝin, Lasi nin supozi unu uzanton elfaris du eventojn, Mouseover kaj tiam mousemove. Do la mouseover evento estos efektivigita unue. Unufoje la unua evento estas kompleta, Mousemove evento akiros efektivigita.

Se skribo devas elfari agon kontraŭ evento, Ĝi devus havi funkcion asociita al ĝi. Ĉi tiuj funkcioj estas plu-gvidita kiel eventaj prizorgantoj. Kutime ĉi tiuj funkcioj estas nomita en la formato – sur EVENTA_NOMO ekz. Onclick ktp. Eventaj prizorgantoj en java skribo estas ununura surfadenigita kaj estas efektivigita sequentially. Tial se du eventoj okazas samtempe, Iliaj prizorgantoj estos efektivigita unu post kiam alia. Estas multaj vojoj en kiu la eventaj prizorgantoj estas asignita. Ĉi tiuj estas.








Uzanta HTMLan etikedon: La eventa prizorganto povas esti asociita rekte je al la markup uzanta econ sur-evento.

Enlistiganta 1: Eventa prizorganto uzanta html etikedo

[Kodo]

<Eniga identigaĵo = “B1” Valoro = “Klaki min” Onclick = “Atentigo(‘Dankonas! Mi estas klakita. ‘); ” Tipo = “Butono” />

[/Kodo]
Kiam ĉi tiu kodo estas efektivigita, Ni vidas butonon kun etikedo – ‘Klakas min'. Se la uzanto frapas ĉi tiun butonon atentiga fenestro kun mesaĝo – Dankonas! Mi estas klakita. Ni ankaŭ povas voki funkcion por evento pritraktanta. Konsideri la sekvantan kodon

Enlistiganta 2: Eventa prizorganto uzanta funkcion
[Kodo]

<!DOCTYPE HTML>
<Html>
<Kapo>
<Skriba tipo=”Teksto/javascript”>
Funkcia kalkulo_kunikloj() {
Por(Var i = 1; I <= 3; I ) {
Atentigo( “Kuniklo “+I ” Ekstere de la ĉapelo!” )
}
}
</Skribo>
</Kapo>
<Korpo>
<Eniga tipo = “Butono” Onclick = “Kalkulaj_kunikloj()” Valoro = “Kalkulaj kunikloj!”/>
</Korpo>

?

</Html>[/Kodo]Alia alproksimiĝas ligi la eventon estas uzanta tion ĉi.InnerHTML kie tio ĉi plu-gvidas al la nuna elemento. La sekvanta kodo ilustras tion ĉiEnlistiganta 3: Eventa prizorganto uzanta tion ĉi.InnerHTML

[Kodo]

<Butono onclick = “Atentigo ( Tio ĉi.InnerHTML )”> Klaki min vidi min </Butono>

[/Kodo]

Uzanta DOMan Objekton Nemoveblaĵo: Ĉi tie la komisio estas farita uzanta la nemoveblaĵon – Onevent. En ĉi tiu kazo ni devas akiri la elementon unue kaj tiam asigni prizorganton al la nemoveblaĵo onevent. La sekvanta kodo estas ekzemplo fiksi klakan prizorganton al la elemento kun identigaĵo ‘myId’

Enlistiganta 4: Eventa prizorganto uzanta DOMan Objekton Nemoveblaĵo

[Kodo]

<Eniga identigaĵo = “MyId” Tipo = “Butono” Valoro = “Premi min”/>

<Skribo>

Dokumento.GetElementById( ‘ MyId ‘ ).Onclick = funkcio() {

Atentigo(‘Dankonas’)

}

</Skribo>

[/Kodo]

Ĉi tie la sekvanta du aferoj devas esti notita por uzi tion ĉi –

· Ĝi estas nemoveblaĵo, Ne eco kaj ĝia nomo estas onevent kiu estas kazo sentema kaj devus esti en pli malalta kazo.

· La prizorganto devus esti funkcio ne Ŝnuro.

Kiam la retumilo trovas onevent eco en la HTML markup, Ĝi kreas funkcion uzanta ĝiajn enhavojn kaj asignas ĝin al la nemoveblaĵo. Do la sekvanta du kodoj faras la saman

Enlistiganta 5: Eventa prizorganto uzanta nuran HTML

[Kodo]

<Eniga tipo = “Butono” Onclick = “Atentigo( ‘Klako!’ )” Valoro = “Butono”/>

[/Kodo]

Enlistiganta 6: Eventa prizorganto uzanta HTML & JS.

[Kodo]

<Eniga tipo = “Butono” Identigaĵo = “Butono” Valoro = “Butono”/>

<Skribo>

Dokumento.GetElementById(‘butono’).Onclick = funkcio() {

Atentigo(‘Klako!')

}

</Skribo>

[/Kodo]

JavaScript anstataŭigas prizorganton fiksita en markup. La sekvanta ereto anstataŭigas markup prizorganto kun nova unu

Enlistiganta 7: Anstataŭiganta prizorgantan aron.
[Kodo]

<Eniga tipo=”Butono” Onclick=”Atentigo(‘Antaŭ’)” Valoro=”Premi min”/>

<Skribo>

Dokumento.GetElementsByTagName(‘enigo’)[0].Onclick = funkcio() {

Atentigo(‘Post’)

}

</Skribo>

[/Kodo]

Uzanta Specialajn metodojn: En kompleksa JavaScript apliko, Kie malsamaj fasadaj metodoj pritraktas oftan eventon laŭmendaj metodoj estas uzita asigni prizorgantojn. Microsoft provizas solvon kiu nuraj laboroj kun IEa versio malpli ol 9 Kaj ankaŭ kun Opero. Prizorgantoj estas asignita kaj dekroĉita kiel nesufiĉe
Alliganta Prizorganton

Enlistiganta 8: Alliganta kaj foriganta prizorgantojn
[Kodo]

Elemento.AttachEvent( “Sur” + Evento, Prizorganto)

[/Kodo]

Foriganta Prizorganton –

[Kodo]

Elemento.DetachEvent( “Sur” + Evento, Prizorganto)

[/Kodo]

Uzanta alligas eventon, Ni povas asigni multoblajn prizorgantojn al la sama elemento. La sekvanta koda ereto montras tion ĉi

Enlistiganta 9: Asignanta multoblajn prizorgantojn al unu elemento.

[Kodo]

<Eniga identigaĵo = “MyElement” Tipo = “Butono” Valoro = “Premi min” />

<Skribo>

Var myElement = dokumento.GetElementById( “MyElement” )

Var prizorganta = funkcio() {

Atentigo( ‘Dankonas!’ )

}

Var handler2 = funkcio() {

Atentigo( ‘Dankonas denove!’ )

}

MyElement.AttachEvent( “Onclick”, Prizorganto)

MyElement.AttachEvent( “Onclick”, Handler2)

</Skribo>

[/Kodo]

Alligi eventojn doesn’t transludo la parametro ‘tio ĉi'. Kiel por la W3C normo la sekvantaj prizorgantaj komisiaj laboroj en preskaŭ ĉiuj retumiloj kiu estas uzita hodiaŭ.

Alliganta Prizorganton

Enlistiganta 10: Alliganta kaj foriganta prizorgantojn kiel por w3c
[Kodo]

Elemento.AddEventListener ( Evento, Prizorganto, Fazo )

[/Kodo]
Foriganta Prizorganton
[Kodo]

Elemento. RemoveEventListener ( Evento, Prizorganto, Fazo )

[/Kodo]








Evento rilatita agojn: Ni devus prizorgi de la sekvanta kvar agoj dum pritraktanta eventon rilatita agojn

· Registri la eventan prizorganton: Tio ĉi povas esti farita de fiksanta la elementojn onevent nemoveblaĵo ekz. onclick aŭ onkeypress ktp. Tio ĉi laboras kun la tuta retumilo sed havas limon ke ni povas alligi nur unu eventan prizorganton al elemento. La alligita eventojn povas esti forigita en simila modo uzanta detachEvent aŭ removeEventListener.

· Akiri la eventan objekton: Plimulto de retumiloj pasas la eventan objekton kiel argumento al la prizorganto. La sekvanta tri eventoj estas produktita kiam la uzanton klakas lian muson.

O Mousedown: Indikas ke la muso estas premita.

O Mouseup: indikas ke la muso estas liberigita.

O Klako: Indikas ke la muso estas klakita. Se tio ĉi okazas en heredo, Tio ĉi indikas ke duobla klako okazis.

· Eltiraĵa informo de la objekto – La tria paŝo estas la eltiraĵa ago rilatita informon de la objekto kaj iniciati la agon.

· Informi pri la kompletiĝo de la evento – Tio ĉi estas la fina paŝo. Unufoje la evento estas aŭkciita sukcese la kompletiĝon de la evento estas markita.

Resuma: Konkludi la diskuton ni povas teni la sekvantajn punktojn en menso
· Evento estas signalo de la fronta fino al la malantaŭa fino.

· Uzita iniciati agon kiu devus esti elfarita kiel por la klienta bezono.

· Eventoj estas de du tipoj – DOMaj eventoj kaj Fenestraj eventoj.

· Eventaj prizorgantoj estas funkcioj asociita al eventoj.

· Eventaj prizorgantoj estas asignita en la sekvanta vojo

O Uzanta HTMLan etikedon

O Uzanta DOMan objekton nemoveblaĵo

O Uzanta specialajn metodojn

LEGI PLI DA JAVAajn SKRIBAJN ARTIKOLOJN

Java Script Design Patterns

Java Skriba Desegno Skemoj

Java Skriba Desegno Skemoj

CSS3 & JavaScript

CSS3 & JavaScript

Java Skribo kaj CSS3 nemoveblaĵoj

?

Etikedita sur:
============================================= ============================================== Buy best TechAlpine Books on Amazon
============================================== ---------------------------------------------------------------- electrician ct chestnutelectric
error

Enjoy this blog? Please spread the word :)

Follow by Email
LinkedIn
LinkedIn
Share