Sissejuhatus brauseri sündmusi JavaScript

java-script-browser-events

Ülevaade: Selles artiklis me arutada umbes brauseri sündmusi JavaScript. Java script üritused on väga tähtis, sest nad teevad enamik ülesandeid. Teine oluline punkt on brauseri ühilduvuse. Kuna java script on põimitud HTML faile, täitmise java script on brauseri sõltuv. Java skripte ka piisavalt küps, et hakkama brauseri sündmused.

Sissejuhatus:
Brauser korral on signaali brauseri taotluse korral hagi läbi. Need sündmused on järgmist tüüpi

  • DOM sündmused: Need on algatatud DOM elemente, nt. klõpsu korral käivitub siis, kui element on klõpsatud või hiirega üle sündmus vallandas kui hiirekursor on tiirles elemendil. Need sündmused ühendada Java Script kood dokumendi.
  • Aken sündmused: Need on algatatud veebilehitseja akna suuruse muutmisel.









Mis on sündmused?
Sündmust saab defineerida kui tegevust / töö, mis saadab signaali Java Script. Nüüd java skripti käivitab vastuseks mõne sündmuse. Aga kui peaks olema registreeritud, et saata signaali vastava Java Script osa. Pärast on mõned sündmused.

Aken sündmused: Need sündmused on algatanud kui brauseriakna suurust.
DOM sündmused: Need on algatatud kui DOM elemendi täidab teatud meetmeid.
Muud üritused: Neid sündmusi arvestades kõiki muid üritusi peale kahe eespool.

sündmus käitleja: Me peame mõistma, et on suur vahe Java ja JavaScript. Java, multi väliskeermestamiseks on võimalik vaid Java Script üritused on ühe keermestatud. Nii kui käitleja täidetakse järjest. Et selgitada seda, oletame üks kasutaja on sooritanud kaks sündmused, mouseover ja siis mousemove. Nii mouseover korral viiakse esimene. Kui esimene üritus on lõppenud, mousemove korral saavad täide.

Kui skript on täita hagi sündmus, see peaks olema seotud funktsioon, et see. Need funktsioonid on nimetatud nii sündmuste haldurid. Tavaliselt on need funktsioonid on nimetatud vormi - aasta EVENT_NAME näiteks. onclick jne. Sündmus käitleja java script on ühe keermestatud ja täidetakse järjest. Seega, kui kaks sündmust toimuvad samal ajal, nende käitlejate viiakse üksteise järel teised. On mitmeid viise, mille korral käitleja on määratud. These are.








Kasutades HTML tag: Üritus käitleja võib olla seotud vahetult märgistuskeel kasutades atribuuti-sündmus.

Listing 1: Event handler using html tag

[Code]

<input id = “B1” väärtus = “kliki mind” onclick = “valvas("Tänu! Ma olen klõpsanud. &#8216;); ” type = “nupp” />

[/Code]
Kui see kood käivitatakse, näeme nuppu, mille märgistus – "Vajuta mind". Kui kasutaja tabab seda nuppu hoiatuse aken sõnum – Thanks! Ma olen klõpsanud. Me võime ka helistada funktsioon sündmus käitlemine. Kaaluge järgmist koodi

Listing 2: Sündmus handler kasutades funktsiooni
[Code]

<!DOCTYPE HTML>
<html>
<pea>
<script type =”text / javascript”>
function count_rabbits() {
eest(var i = 1; mina <= 3; i ) {
valvas( “Jänes “+i ” välja müts!” )
}
}
</käsikiri>
</pea>
<keha>
<input type = “nupp” onclick = “count_rabbits()” väärtus = “count küülikud!”/>
</keha>

 

</html>[/Code]Teine lähenemine siduda korral kasutab this.innerHTML kui see viitab praegune element. Järgmine kood näitab sedaListing 3: Sündmus handler kasutades this.innerHTML

[Code]

<nuppu onclick = “valvas ( this.innerHTML )”> Kliki mind vaata mind </nupp>

[/Code]

Kasutades DOM objekt Kinnisvara: Siin loovutamine toimub kasutades vara – onevent. Sel juhul on meil vaja saada elemendi ja alles seejärel määrata käitleja vara onevent. The following code is an example of setting a click handler to the element with id ‘myId’

Listing 4: Sündmus handler kasutades DOM objekt Kinnisvara

[Code]

<input id = “myid” type = “nupp” väärtus = “vajuta mind”/>

<käsikiri>

document.getElementById( ‘ myid ‘ ).onclick = funktsiooni() {

valvas("Tänu")

}

</käsikiri>

[/Code]

Siin järgmised kaks asja tuleb märkida, et kasutada seda –

· It is a property, ei atribuut ja selle nimi on onevent mis on tõstutundlik ja peaks olema väiketähtedega.

· The handler should be a function not a String.

Kui brauseri leiab onevent atribuut HTML Markup, see tekitab funktsiooni abil selle sisu ja annab selle vara. Nii et järgmise kahe koodid teeb sama

Listing 5: Sündmus handler kasutades ainult HTML

[Code]

<input type = “nupp” onclick = “valvas( "Vajuta!’ )” väärtus = “nupp”/>

[/Code]

Listing 6: Sündmus handler kasutades HTML & JS.

[Code]

<input type = “nupp” id = “nupp” väärtus = “nupp”/>

<käsikiri>

document.getElementById("Nuppu").onclick = funktsiooni() {

valvas("Vajuta!’)

}

</käsikiri>

[/Code]

JavaScript kirjutab käitleja määratud juurdehindlus. Järgnev väljavõte asendab juurdehindlus käitleja uuega

Listing 7: Ülekirjutamine käitleja komplekt.
[Code]

<input type =”nupp” onclick =”valvas("Enne")” value=”vajuta mind”/>

<käsikiri>

document.getElementsByTagName("Input")[0].onclick = funktsiooni() {

valvas("Pärast")

}

</käsikiri>

[/Code]

Spetsiaalseid meetodeid kasutades: Keerulises JavaScript taotluse, kus erinevad liidese meetodid hakkama ühisüritus kohandatud meetodeid kasutatakse, et määrata käitleja. Microsoft pakub lahenduse mis töötab ainult IE versioon alla 9 ja ka Opera. Käitleja on määratud ja lahti nagu all
Kinnitamine Handler

Listing 8: Kinnitamine ja eemaldamine käitleja
[Code]

element.attachEvent( “on” + sündmus, handler)

[/Code]

Eemaldamine Handler –

[Code]

element.detachEvent( “on” + sündmus, handler)

[/Code]

Kasutades lisada sündmus, saame määrata mitmeid käitleja sama element. Järgmised koodijupi näitab seda

Listing 9: Omistamine mitu töötlejat üks element.

[Code]

<input id = “myElement” type = “nupp” väärtus = “vajuta mind” />

<käsikiri>

var myElement = document.getElementById( “myElement” )

tegutses = funktsiooni() {

valvas( "Tänu!’ )

}

olid ametitest 2. = funktsiooni() {

valvas( 'Aitäh veel kord!’ )

}

myElement.attachEvent( “onclick”, handler)

myElement.attachEvent( “onclick”, handler2)

</käsikiri>

[/Code]

Kinnita sündmusi ei liigu parameeter "see". Nagu iga W3C standard järgmised käitleja loovutamise töötab peaaegu kõik brauserid, mida kasutatakse tänapäeval.

Kinnitamine Handler

Listing 10: Kinnitamine ja eemaldamine käitleja kohta W3C
[Code]

element.addEventListener ( sündmus, handler, etapp )

[/Code]
Eemaldamine Handler
[Code]

element. removeEventListener ( sündmus, handler, etapp )

[/Code]








Sündmus seotud tegevused: Me peaksime hoolitsema järgmised neli meedet töötamisel sündmus seotud tegevused

· Registreerige korral käitleja: Seda saab teha seades elemendid onevent vara nt. onclick või onkeypress jne. See töötab kogu brauseri kuid on piirang, et meil on võimalik lisada vaid ühe sündmuse käitleja element. Lisatud sündmusi saab eemaldada sarnaselt kasutades detachEvent või removeEventListener.

· Saada juhul objekti: Enamus brauserid läbida juhul objekti argumendina käitleja. Järgmised kolm üritust tekivad siis, kui kasutaja klõpsab oma hiire.

o mouseDown: näitab, et hiire vajutamisel.

o Mouseup: näitab, et hiir lahti.

o Click: näitab, et hiir on klõpsatud. Kui see juhtub järjest, See näitab, et topeltklõpsuga juhtus.

· Extract information from the object – Kolmas samm on väljavõte tegevus seotud informatsiooni objekti ja algatada tegevust.

· Inform about the completion of the event – See on viimane samm. Kui üritus on oksjonil edukalt lõpule korral on tähistatud.

Summary: Kokkuvõtteks arutelu suudame hoida järgmisi punkte silmas pidades
· 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 sündmuste ja akna sündmused.

· 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