Uvod u događajima preglednika u JavaScriptu

java-script-browser-events

Pregled: U ovom članku ćemo raspravljati o događajima preglednika u JavaScriptu. Java Script događaji su vrlo važni kao oni obavljaju većinu zadataka. Druga važna točka je preglednik kompatibilnost. Kao što je Java Script je ugrađen u HTML datoteke, izvršenje java skripte ovisi preglednik. Java skripte su sazreli dovoljno da obrađuju događaje preglednik.

Uvođenje:
Preglednik događaja je signal iz preglednika na primjenu u slučaju da se obavlja radnja. Ovi događaji su od sljedećih vrsta

  • DOM Događaji: To su inicirana elemenata DOM pr. klik događaj se aktivira kada se element kliknuli ili miš preko događaj se aktivira kada se pokazivač miša lebdio na element. Ovi događaji spajanje kod Java Script s dokumentom.
  • Prozor Događaji: To su pokrenuti kada je prozor preglednika je veličina.









Koji su događaji?
Događaj se može definirati kao akcija / rad koji šalje signal za Java Script. Sada java script izvršava kao odgovor na neki događaj. No, događaj bi trebao biti registrirani da pošalje signal na odgovarajuću komponentu Java Script. Ovo su neki od događaja.

Prozor događaji: Ovi događaji su pokrenuti kada se mijenja veličina prozora preglednika.
DOM događanja: To su pokrenuti kada DOM element obavljanje neke radnje.
Ostala događanja: Ovi događaji su s obzirom na sve druge vrste događaja, osim gore navedena dva.

rukovatelje događajima: Moramo shvatiti da postoji velika razlika između Java i Java Script. U java, više navoja je moguće, ali Java Script događaji su jednom zavojnicom. Dakle, rukuju događaju se izvršavaju sekvencijalno. Za to pojasniti, pretpostavimo jedan korisnik je izvršio dva događaja, Prelazak mišem, a zatim mousemove. Tako je Prelazak mišem događaj će se izvršiti prvi. Nakon što je prvi događaj je završena, mousemove događaj će se izvršiti.

Ako skripta ima za izvođenje akcije protiv događaju, ona bi trebala imati funkciju povezanu s njim. Ove funkcije su upućeni kao rukovatelje događajima. Obično ove funkcije su navedeni u formatu - na EVENT_NAME pr. onclick itd. Poslovne rukuju u java skripte su jednokrevetne navojem i izvršavaju sekvencijalno. Dakle, ako su dva događaja pojaviti u isto vrijeme, njihovi vodiči će se izvršiti jedno za drugim. Postoji mnogo načina na koje se dodjeljuje rukuju događaj. These are.








Korištenje HTML oznake: Događaj rukovatelj može biti povezan izravno na označavanje pomoću atributa on-događaj.

Listing 1: Event handler using html tag

[Code]

<ulaz id = “b1” vrijednost = “klikni me” onclick = “uzbuna('Hvala! Ja sam kliknuo. &#8216;); ” type = “button” />

[/Code]
Kada se to kod izvršava, vidimo gumb s oznakom – "Klikni me". Ako korisnik pogodi ovaj gumb prozor s upozorenjem s porukom – Hvala! Ja sam kliknuo. Također možemo nazvati funkciju za rukovanje događaja. Razmotrimo sljedeći kod

Listing 2: rukovatelj Događaj pomoću funkcije
[Code]

<!DOCTYPE HTML>
<html>
<glava>
<Vrsta skripta =”text / javascript”>
function count_rabbits() {
za(var i = 1; ja <= 3; ja ) {
uzbuna( “Zec “+i ” iz šešira!” )
}
}
</script>
</glava>
<body>
<Unos vrste = “button” onclick = “count_rabbits()” vrijednost = “Točka kuniće!”/>
</body>

 

</html>[/Code]Drugi pristup vezati događaj koristi this.innerHTML gdje se to odnosi na tekuće elementa. Sljedeći kod prikazuje ovaListing 3: rukovatelj Događaj pomoću this.innerHTML

[Code]

<Gumb onclick = “uzbuna ( this.innerHTML )”> Kliknite me da me vidi </button>

[/Code]

Korištenje DOM entitet objekta: Ovdje zadatak je napravio koristeći imovinu – onevent. U tom slučaju moramo dobiti element, a zatim dodijeliti rukovatelj do objekta onevent. The following code is an example of setting a click handler to the element with id ‘myId’

Listing 4: rukovatelj Događaj pomoću DOM entitet objekta

[Code]

<ulaz id = “myId” type = “button” vrijednost = “pritisnite me”/>

<script>

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

uzbuna('Hvala')

}

</script>

[/Code]

Ovdje sljedeće dvije stvari moraju napomenuti kako bi mogli koristiti ovu –

· It is a property, nije atribut, a ime je onevent što je velika i mala slova te bi trebao biti u donjem slučaju.

· The handler should be a function not a String.

Kad preglednik pronalazi onevent atribut u HTML oznake, to stvara funkciju koristite njezine sadržaje i dodjeljuje na imovinu. Dakle, sljedeća dva koda radi isto

Listing 5: rukovatelj Događaj koristeći samo HTML

[Code]

<Unos vrste = “button” onclick = “uzbuna( 'Klik!’ )” vrijednost = “Dugme”/>

[/Code]

Listing 6: rukovatelj Događaj pomoću HTML & JS.

[Code]

<Unos vrste = “button” id = “button” vrijednost = “Dugme”/>

<script>

document.getElementById('dugme').onclick = funkcija() {

uzbuna('Klik!’)

}

</script>

[/Code]

JavaScript prepisuje rukovatelj skup u oznakama. Sljedeći isječak zamjenjuje označni rukovatelj s novim

Listing 7: Prepisivanje rukovatelj set.
[Code]

<Unos vrste =”button” onclick =”uzbuna('Prije')” value=”pritisnite me”/>

<script>

document.getElementsByTagName('ulazni')[0].onclick = funkcija() {

uzbuna('Nakon')

}

</script>

[/Code]

Pomoću posebnih metoda: U složenom JavaScript aplikacije, gdje različite metode sučelja nositi zajedničko event prilagođene metode se koriste za dodjeljivanje rukuju. Microsoft nudi rješenje koje radi samo s IE verzije manje od 9 i sa opere. Rukuju se dodjeljuju i odvojen kao pod
Stavljanje Handler

Listing 8: Stavljanje i uklanjanje rukuju
[Code]

element.attachEvent( “na” + događaj, sekundant)

[/Code]

Uklanjanje Handler –

[Code]

element.detachEvent( “na” + događaj, sekundant)

[/Code]

Korištenje priložiti događaj, možemo dodijeliti više rukuju s istim elementom. Sljedeći isječak koda pokazuje to

Listing 9: Dodjela više rukuju s jednim elementom.

[Code]

<ulaz id = “myElement” type = “button” vrijednost = “pritisnite me” />

<script>

var myElement = document.getElementById( “myElement” )

Ponašao = funkcija() {

uzbuna( 'Hvala!’ )

}

bili obrta 2. = funkcija() {

uzbuna( 'Hvala još jednom!’ )

}

myElement.attachEvent( “onclick”, sekundant)

myElement.attachEvent( “onclick”, handler2)

</script>

[/Code]

Pričvrstite događaje ne prolazi parametar 'ovo'. Kao što je po W3C standardu sljedeći zadatak rukovatelj radi u gotovo svim preglednicima koji se koriste i danas.

Stavljanje Handler

Listing 10: Stavljanje i uklanjanje vodiča po W3C
[Code]

element.addEventListener ( događaj, sekundant, faza )

[/Code]
Uklanjanje Handler
[Code]

element. removeEventListener ( događaj, sekundant, faza )

[/Code]








akcije događanja vezana: Trebamo se pobrinuti za sljedeće četiri akcije prilikom rukovanja događaja u svezi akcije

· Registrirajte rukovatelj događaja: To se može učiniti postavljanjem elemenata onevent vlasništva na primjer. onclick ili onkeypress itd. To radi s cijelim pregledniku, ali ima ograničenje da možemo priložiti samo jedan događaj rukovatelj na element. Priloženi događaji mogu se ukloniti na sličan način, koristeći detachEvent ili removeEventListener.

· Uzmite događaja objekt: Većina preglednika proći događaja objekt kao argument rukovatelj. Sljedeće tri događaji nastaju kada korisnik klikne mišem.

o mousedown: ukazuje na to da je pritisnut miš.

o Mouseup: ukazuje na to da je miš je pušten.

o Kliknite: ukazuje na to da je miš klikne. Ako se to dogodi u nizu, to znači da dvostruki klik dogodilo.

· Extract information from the object – Treći korak je informacije vezane ekstrakt akcija od objekta i pokrenuti akciju.

· Inform about the completion of the event – Ovo je zadnji korak. Nakon što je događaj uspješno aukciji završetak manifestacije je označena.

Summary: Da zaključimo raspravu možemo zadržati sljedeće točke na umu
· 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 događaji i Prozor događanja.

· 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 dizajn obrazaca

Java Script dizajn obrazaca

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