Cyflwyniad i ddigwyddiadau porwr yn JavaScript

java-script-browser-events

Trosolwg: Yn yr erthygl hon byddwn yn trafod am y digwyddiadau porwr yn JavaScript. Digwyddiadau Java script yn bwysig iawn wrth iddynt berfformio rhan fwyaf o'r tasgau. Y pwynt pwysig arall yw'r cydnawsedd porwr. Gan fod y sgript java yn rhan annatod o ffeiliau html, gweithredu i sgript java yn dibynnu porwr. sgriptiau java hefyd yn aeddfedu digon i ddelio â digwyddiadau porwr.

Cyflwyniad:
Mae digwyddiad porwr hwn yn arwydd o'r porwr i'r cais rhag ofn gweithred ei berfformio. Mae'r digwyddiadau hyn o mathau canlynol

  • DOM Digwyddiadau: Mae'r rhain yn cael eu cychwyn gan yr elfennau DOM e.e.. digwyddiad clic ei sbarduno pan elfen ei glicio neu llygoden dros y digwyddiad ei sbarduno pan fydd y pwyntydd y llygoden yn cael ei ehededig ar elfen. Mae'r digwyddiadau hyn yn cysylltu cod sgript java â'r ddogfen.
  • ffenestr Digwyddiadau: Mae'r rhain yn cael eu cychwyn pan fydd y ffenestr porwr yn newid maint.









Beth yw'r digwyddiadau?
Gall digwyddiad yn cael ei ddiffinio fel gweithred / gwaith sy'n anfon signal i'r sgript java. Nawr sgript java executes mewn ymateb i ryw ddigwyddiad. Ond dylai'r digwyddiad gael ei gofrestru i anfon signal at y gydran sgript java perthnasol. Canlynol yn rhai o'r digwyddiadau.

digwyddiadau ffenestr: Mae'r digwyddiadau hyn yn cael eu cychwyn pan ffenestr porwr yn newid maint.
digwyddiadau DOM: Mae'r rhain yn cael eu cychwyn pan elfen DOM yn perfformio rhai camau.
digwyddiadau eraill: Mae'r digwyddiadau hyn yn ystyried pob math arall o ddigwyddiadau ar wahân i'r ddau uchod.

trinwyr digwyddiad: Mae angen i ni ddeall bod yna wahaniaeth mawr rhwng java a sgript java. Yn java, aml-edafu yn bosibl ond digwyddiadau sgript java yn sengl threaded. Felly mae'r trinwyr digwyddiad yn cael eu gweithredu yn ddilyniannol. I egluro ei, gadewch i ni dybio un defnyddiwr wedi perfformio dau ddigwyddiad, mouseover ac yna mousemove. Felly bydd y digwyddiad mouseover yn cael ei weithredu yn gyntaf. Unwaith y bydd y digwyddiad cyntaf yn gyflawn, Bydd y digwyddiad mousemove cael eu gweithredu.

Os sgript wedi i berfformio gweithred yn erbyn ddigwyddiad, dylai fod yn swyddogaeth sy'n gysylltiedig ag ef. swyddogaethau hyn yn cael eu cyfeirio fel trinwyr digwyddiadau. Fel arfer swyddogaethau hyn yn cael eu henwi yn y fformat - ar EVENT_NAME e.e.. onclick etc. sy'n trin digwyddiad mewn sgript java yn sengl threaded ac yn cael eu gweithredu yn ddilyniannol. Felly os oes dau ddigwyddiad yn digwydd ar yr un pryd, bydd eu trin yn cael ei weithredu un ar ôl arall. Mae yna nifer o ffyrdd y mae'r trinwyr digwyddiad yn cael eu neilltuo. These are.








Gan ddefnyddio tag HTML: Gall y triniwr digwyddiad yn gysylltiedig yn uniongyrchol i mewn i'r markup gan ddefnyddio priodoledd ar-ddigwyddiad.

Listing 1: Event handler using html tag

[Code]

<id mewnbwn = “b1” value = “Cliciwch i mi” onclick = “effro('Diolch! Yr wyf yn clicio. &#8216;); ” type = “botwm” />

[/Code]
Pan fydd y cod hwn ei gyflawni, rydym yn gweld botwm efo label – 'Cliciwch fi'. Os bydd y defnyddiwr yn taro botwm hwn ffenestr rhybuddio gyda neges – Thanks! Yr wyf yn clicio. Gallwn hefyd yn galw swyddogaeth ar gyfer trin y digwyddiad. Ystyriwch y cod canlynol

Listing 2: triniwr digwyddiad gan ddefnyddio ffwythiant
[Code]

<!DOCTYPE HTML>
<html>
<pen>
<Math o sgript =”testun / javascript”>
function count_rabbits() {
ar gyfer(var ff = 1; i <= 3; i ) {
effro( “cwningen “+ff ” allan o'r het!” )
}
}
</sgript>
</pen>
<corff>
<Math mewnbwn = “botwm” onclick = “count_rabbits()” value = “Cyfrwch cwningod!”/>
</corff>

 

</html>[/Code]Dull arall i rwymo'r yw'r digwyddiad yn defnyddio this.innerHTML lle mae hyn yn cyfeirio at yr elfen gyfredol. Mae'r cod canlynol yn dangos hynListing 3: triniwr digwyddiad gan ddefnyddio this.innerHTML

[Code]

<botwm onclick = “effro ( this.innerHTML )”> Cliciwch i mi i fy ngweld </botwm>

[/Code]

Gan ddefnyddio DOM Gwrthrych Eiddo: Yma, yr aseiniad yn cael ei wneud drwy ddefnyddio'r eiddo – onevent. Yn yr achos hwn, mae angen i gael yr elfen gyntaf ac yna neilltuo triniwr i'r onevent eiddo. The following code is an example of setting a click handler to the element with id ‘myId’

Listing 4: triniwr digwyddiad gan ddefnyddio DOM Gwrthrych Eiddo

[Code]

<id mewnbwn = “myId” type = “botwm” value = “gwasgwch i mi”/>

<sgript>

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

effro('Diolch')

}

</sgript>

[/Code]

Yma, mae'n rhaid i'r ddau beth canlynol yn cael eu nodi er mwyn defnyddio hyn –

· It is a property, Nid yw priodoledd ac mae ei enw i yw onevent sydd yn achos sensitif a dylai fod mewn llythrennau bach.

· The handler should be a function not a String.

Pan fydd y porwr yn dod o hyd priodoledd onevent yn y markup HTML, mae'n creu swyddogaeth ddefnyddio ei gynnwys ac yn pennu ei i'r eiddo. Felly y ddau codau canlynol yn gwneud yr un peth

Listing 5: triniwr digwyddiad gan ddefnyddio dim ond HTML

[Code]

<Math mewnbwn = “botwm” onclick = “effro( 'Cliciwch!’ )” value = “Button”/>

[/Code]

Listing 6: triniwr digwyddiad gan ddefnyddio HTML & JS.

[Code]

<Math mewnbwn = “botwm” id = “botwm” value = “Button”/>

<sgript>

document.getElementById('Botwm').onclick = swyddogaeth() {

effro('Cliciwch!’)

}

</sgript>

[/Code]

JavaScript overwrites yn trin a osodwyd yn markup. Mae'r snippet canlynol yn disodli yn trin markup gydag un newydd

Listing 7: Trosysgrifo set triniwr.
[Code]

<Math mewnbwn =”botwm” onclick =”effro('Cyn')” value=”gwasgwch i mi”/>

<sgript>

document.getElementsByTagName('Mewnbwn')[0].onclick = swyddogaeth() {

effro('Ar ôl')

}

</sgript>

[/Code]

Gan ddefnyddio dulliau arbennig: Mewn cais JavaScript cymhleth, lle mae gwahanol ddulliau rhyngwyneb trin dulliau arfer digwyddiad cyffredin yn cael eu defnyddio i aseinio trinwyr. Microsoft yn darparu ateb sydd ond yn gweithio gyda fersiwn IE llai na 9 a hefyd gydag Opera. Trinwyr cael eu neilltuo ac ar wahân fel dan
Atodi Triniwr

Listing 8: Atodi a chael gwared trinwyr
[Code]

element.attachEvent( “on” + digwyddiad, triniwr)

[/Code]

Cael gwared â Triniwr –

[Code]

element.detachEvent( “on” + digwyddiad, triniwr)

[/Code]

Defnyddio digwyddiad atodi, gallwn aseinio trinwyr lluosog i'r un elfen. Mae'r snippet cod canlynol yn dangos hyn

Listing 9: Pennu trinwyr lluosog i un elfen.

[Code]

<id mewnbwn = “myElement” type = “botwm” value = “gwasgwch i mi” />

<sgript>

var myElement = document.getElementById( “myElement” )

oedd yn gweithredu swyddogaeth =() {

effro( 'Diolch!’ )

}

crefftau Roedd 2. = swyddogaeth() {

effro( 'Diolch eto!’ )

}

myElement.attachEvent( “onclick”, triniwr)

myElement.attachEvent( “onclick”, handler2)

</sgript>

[/Code]

Atodwch digwyddiadau nad yw'n pasio'r paramedr 'hon'. Fel yn achos y safon W3C yr aseiniad triniwr canlynol yn gweithio mewn bron pob borwyr sy'n cael eu defnyddio heddiw.

Atodi Triniwr

Listing 10: Atodi a chael gwared trinwyr fel y W3C
[Code]

element.addEventListener ( digwyddiad, triniwr, cam )

[/Code]
Cael gwared â Triniwr
[Code]

elfen. removeEventListener ( digwyddiad, triniwr, cam )

[/Code]








camau gweithredu sy'n gysylltiedig â digwyddiad: Dylem fod yn ofalus o'r pedwar camau canlynol wrth drin camau gweithredu sy'n gysylltiedig â digwyddiad

· Cofrestrwch yr atebwr digwyddiad: Gellir gwneud hyn trwy osod yr elfennau eiddo onevent e.e.. onclick neu onkeypress etc. Mae hyn yn gweithio gyda'r porwr cyfan ond mae ganddo gyfyngiad y gallwn ei roi dim ond un trinydd digwyddiad i elfen. Gall y digwyddiadau atodedig ei ddileu mewn modd tebyg gan ddefnyddio detachEvent neu removeEventListener.

· Cael y digwyddiad gwrthrych: Y rhan fwyaf o'r porwyr pasio'r digwyddiad gwrthrych fel dadl i'r trafodwr. Mae'r tri digwyddiad canlynol yn cael eu creu pan fydd y defnyddiwr yn clicio ei llygoden.

o Mousedown: yn dangos bod y llygoden ei bwyso.

o Mouseup: yn dangos bod y llygoden yn cael ei ryddhau.

o Click: yn dangos bod y llygoden ei glicio. Os bydd hyn yn digwydd yn olynol, mae hyn yn dangos bod clic dwbl wedi digwydd.

· Extract information from the object – Y trydydd cam yw y wybodaeth sy'n gysylltiedig â gweithredu darn o'r gwrthrych ac yn cychwyn y camau.

· Inform about the completion of the event – Mae hyn yn y cam olaf. Unwaith y bydd y digwyddiad yn cael ei werthu mewn ocsiwn yn llwyddiannus cwblhau y digwyddiad yn cael ei farcio.

Summary: I gloi'r drafodaeth, gallwn gadw'r pwyntiau canlynol mewn cof
· 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 – Digwyddiadau DOM a digwyddiadau Ffenestr.

· 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

Java Script Design Patterns

Java Script Design Patterns

CSS3 & JavaScript

CSS3 & JavaScript

Java Script and CSS3 properties

 

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

Enjoy this blog? Please spread the word :)

Follow by Email
LinkedIn
LinkedIn
Share