Εισαγωγή στις εκδηλώσεις του προγράμματος περιήγησης σε JavaScript

java-script-browser-events

Επισκόπηση: Σε αυτό το άρθρο θα συζητήσουμε για τα γεγονότα του προγράμματος περιήγησης σε JavaScript. Java γεγονότα σενάριο είναι πολύ σημαντικό, δεδομένου ότι εκτελούν τα περισσότερα από τα καθήκοντα. Το άλλο σημαντικό σημείο είναι η συμβατότητα προγράμματος περιήγησης. Καθώς το χειρόγραφο της Ιάβας είναι ενσωματωμένες σε αρχεία html, η εκτέλεση του script java είναι το πρόγραμμα περιήγησης εξαρτάται. Java scripts επίσης ωριμάσει αρκετά για να χειριστεί τα γεγονότα του προγράμματος περιήγησης.

Εισαγωγή:
Μια εκδήλωση browser είναι ένα σήμα από το πρόγραμμα περιήγησης στην εφαρμογή σε περίπτωση που εκτελείται μια ενέργεια. Αυτά τα γεγονότα είναι ακόλουθους τύπους

  • DOM Εκδηλώσεις: Αυτές ξεκινούν από τα στοιχεία DOM π.χ.. ένα συμβάν κλικ ενεργοποιείται όταν ένα στοιχείο έχει πατηθεί ή ένα ποντίκι πάνω συμβάν ενεργοποιείται όταν ο δείκτης του ποντικιού αιωρούνταν σε ένα στοιχείο. Αυτά τα γεγονότα συνδέσετε έναν κώδικα script java με το έγγραφο.
  • παράθυρο Εκδηλώσεις: Αυτά ξεκίνησε όταν το παράθυρο του προγράμματος περιήγησης έχει αλλάξει το μέγεθός τους.









Ποια είναι τα γεγονότα?
Ένα συμβάν μπορεί να οριστεί ως μια ενέργεια / εργασία που στέλνει ένα σήμα στο script java. Τώρα script java εκτελεί σε απόκριση σε κάποιο γεγονός. Αλλά το γεγονός θα πρέπει να εγγραφεί για να στείλει σήμα στον αντίστοιχο στοιχείο χειρόγραφο της Ιάβας. Παρακάτω είναι μερικές από τις εκδηλώσεις.

εκδηλώσεις παράθυρο: Οι εκδηλώσεις ξεκίνησαν όταν το παράθυρο του προγράμματος περιήγησης αλλάζει μέγεθος.
γεγονότων DOM: Αυτά ξεκινούν όταν ένα στοιχείο DOM εκτελεί κάποια ενέργεια.
άλλες εκδηλώσεις: Αυτά τα γεγονότα λαμβάνοντας υπόψη όλους τους άλλους τύπους γεγονότων, εκτός από τα παραπάνω δύο.

χειρισμού συμβάντων: Πρέπει να καταλάβουμε ότι υπάρχει μια μεγάλη διαφορά μεταξύ της Ιάβας και το σενάριο της Ιάβας. Στην java, multi threading είναι δυνατή, αλλά τα γεγονότα script java είναι ενιαίο με σπείρωμα. Έτσι οι χειριστές συμβάντων που εκτελέστηκαν διαδοχικά. Για να το διευκρινίσει, ας υποθέσουμε ένας χρήστης έχει πραγματοποιήσει δύο εκδηλώσεις, mouseover και στη συνέχεια MouseMove. Έτσι, το γεγονός mouseover θα εκτελεστεί πρώτη. Μόλις η πρώτη εκδήλωση είναι πλήρης, MouseMove εκδήλωση θα πάρει εκτελούνται.

Εάν ένα σενάριο έχει να εκτελέσει μια ενέργεια ενάντια σε μια εκδήλωση, θα πρέπει να έχει μια λειτουργία που σχετίζεται με το. Αυτές οι λειτουργίες αναφέρονται ως χειριστές συμβάντων. Συνήθως αυτές οι λειτουργίες που κατονομάζονται στην μορφή - στο EVENT_NAME π.χ.. onclick κ.λπ.. χειρισμού συμβάντων στο script java είναι ενιαία σπείρωμα και εκτελούνται διαδοχικά. Ως εκ τούτου, εάν τα δύο γεγονότα συμβαίνουν ταυτόχρονα, χειριστές τους θα εκτελεστεί μία μετά την άλλη. Υπάρχουν πολλοί τρόποι με τους οποίους έχουν εκχωρηθεί οι χειριστές συμβάντων. These are.








Χρησιμοποιώντας ετικέτα HTML: Το πρόγραμμα χειρισμού συμβάντων μπορεί να συνδεθεί απευθείας στο σήμανσης χρησιμοποιώντας το χαρακτηριστικό σε εκδήλωση.

Listing 1: Event handler using html tag

[Code]

<id = εισόδου “β1” value = “Κάντε κλικ στην επιλογή μου” onclick = “συναγερμός('Ευχαριστώ! Είμαι κλικ. &#8216;); ” type = “κουμπί” />

[/Code]
Όταν εκτελείται αυτός ο κώδικας, θα δείτε ένα κουμπί με μια ετικέτα – «Κάντε κλικ για μένα». Αν ο χρήστης πατήσει αυτό το κουμπί ένα παράθυρο προειδοποίησης με ένα μήνυμα – Thanks! Είμαι κλικ. Μπορούμε επίσης να καλέσετε μια συνάρτηση για τον χειρισμό εκδήλωση. Εξετάστε το ακόλουθο κώδικα

Listing 2: χειρισμού συμβάντων χρησιμοποιώντας τη λειτουργία
[Code]

<!DOCTYPE HTML>
<html>
<κεφάλι>
<script type =”text / javascript”>
function count_rabbits() {
για(var i = 1; εγώ <= 3; i ) {
συναγερμός( “Κουνέλι “+i ” από το καπέλο!” )
}
}
</γραφή>
</κεφάλι>
<σώμα>
<input type = “κουμπί” onclick = “count_rabbits()” value = “Μετρήστε κουνέλια!”/>
</σώμα>

 

</html>[/Code]Μια άλλη προσέγγιση, δεσμεύοντας την εκδήλωση χρησιμοποιώντας this.innerHTML όπου αυτό αναφέρεται στην τρέχουσα στοιχείο. Ο ακόλουθος κώδικας δείχνει αυτόListing 3: χειρισμού συμβάντων χρησιμοποιώντας this.innerHTML

[Code]

<κουμπί onclick = “συναγερμός ( this.innerHTML )”> Κάντε κλικ για να με δει </κουμπί>

[/Code]

Χρησιμοποιώντας DOM αντικείμενο Ακινήτου: Εδώ η ανάθεση γίνεται με τη χρήση του ακινήτου – onevent. Σε αυτή την περίπτωση θα πρέπει να πάρετε το στοιχείο και στη συνέχεια να ορίσετε ένα χειριστή στο onevent ακίνητο. The following code is an example of setting a click handler to the element with id ‘myId’

Listing 4: χειρισμού συμβάντων χρησιμοποιώντας DOM αντικείμενο Ακινήτου

[Code]

<id = εισόδου “MyID” type = “κουμπί” value = “πατήστε μου”/>

<γραφή>

document.getElementById( ‘ MyID ‘ ).onclick = λειτουργία() {

συναγερμός('Ευχαριστώ')

}

</γραφή>

[/Code]

Εδώ τα εξής δύο πράγματα πρέπει να σημειωθεί, προκειμένου να χρησιμοποιήσετε αυτό το –

· It is a property, δεν αποτελεί χαρακτηριστικό και το όνομά του είναι onevent η οποία είναι ευαίσθητη υπόθεση και θα πρέπει να είναι με πεζά γράμματα.

· The handler should be a function not a String.

Όταν το πρόγραμμα περιήγησης βρίσκει onevent χαρακτηριστικό της σήμανσης HTML, δημιουργεί μια λειτουργία χρησιμοποιώντας το περιεχόμενό του και εκχωρεί στην ιδιοκτησία. Έτσι, τα επόμενα δύο κωδικούς κάνει το ίδιο

Listing 5: χειρισμού συμβάντων χρησιμοποιώντας μόνο HTML

[Code]

<input type = “κουμπί” onclick = “συναγερμός( 'Κλίκ!’ )” value = “Κουμπί”/>

[/Code]

Listing 6: χειρισμού συμβάντων χρησιμοποιώντας HTML & JS.

[Code]

<input type = “κουμπί” id = “κουμπί” value = “Κουμπί”/>

<γραφή>

document.getElementById('κουμπί').onclick = λειτουργία() {

συναγερμός('Κλίκ!’)

}

</γραφή>

[/Code]

Την Javascript αντικαθιστά ένα χειριστή που στη σήμανση. Το ακόλουθο απόσπασμα αντικαθιστά ένα χειριστή σήμανσης με ένα νέο

Listing 7: Η αντικατάσταση ενός συνόλου χειρισμού.
[Code]

<input type =”κουμπί” onclick =”συναγερμός('Πριν')” value=”πατήστε μου”/>

<γραφή>

document.getElementsByTagName('εισαγωγή')[0].onclick = λειτουργία() {

συναγερμός('Μετά')

}

</γραφή>

[/Code]

Χρησιμοποιώντας ειδικές μεθόδους: Σε μια σύνθετη εφαρμογή το JavaScript, όπου διαφορετικές μεθόδους διεπαφής χειριστεί τα κοινά εκδήλωση έθιμο μέθοδοι που χρησιμοποιούνται για την εκχώρηση χειριστές. Η Microsoft παρέχει μια λύση που λειτουργεί μόνο με IE έκδοση λιγότερο από 9 και επίσης με την Όπερα. Οι χειριστές έχουν ανατεθεί και αποσπασμένων ως κάτω
Επισυνάπτοντας Handler

Listing 8: Τοποθέτηση και αφαίρεση χειριστές
[Code]

element.attachEvent( “επί” + συμβάν, χειριστή)

[/Code]

Αφαίρεση ένα Handler –

[Code]

element.detachEvent( “επί” + συμβάν, χειριστή)

[/Code]

Χρησιμοποιώντας αποδίδουν εκδήλωση, μπορούμε να εκχωρήσετε πολλαπλές χειριστές στο ίδιο στοιχείο. Το ακόλουθο απόσπασμα κώδικα δείχνει αυτό

Listing 9: Εκχώρηση πολλαπλών χειριστές σε ένα στοιχείο.

[Code]

<id = εισόδου “myElement” type = “κουμπί” value = “πατήστε μου” />

<γραφή>

var myElement = document.getElementById( “myElement” )

ενεργούσε = λειτουργία() {

συναγερμός( 'Ευχαριστώ!’ )

}

ήταν συναλλαγές 2. = λειτουργία() {

συναγερμός( 'Ευχαριστώ και πάλι!’ )

}

myElement.attachEvent( “στο κλικ”, χειριστή)

myElement.attachEvent( “στο κλικ”, handler2)

</γραφή>

[/Code]

Συνδέστε τα γεγονότα δεν κατάφερε να περάσει την παράμετρο 'αυτό ». Σύμφωνα με το πρότυπο W3C η παρακάτω αντιστοίχηση χειριστή λειτουργεί σε όλες σχεδόν τις browsers που χρησιμοποιούνται σήμερα.

Επισυνάπτοντας Handler

Listing 10: Τοποθέτηση και αφαίρεση χειρίζονται σύμφωνα με το W3C
[Code]

element.addEventListener ( συμβάν, χειριστή, φάση )

[/Code]
Αφαίρεση ένα Handler
[Code]

στοιχείο. removeEventListener ( συμβάν, χειριστή, φάση )

[/Code]








δράσεις που σχετίζονται εκδήλωση: Εμείς θα πρέπει να φροντίσει τις ακόλουθες τέσσερις ενέργειες, ενώ το χειρισμό δράσεις που σχετίζονται εκδήλωση

· Καταχωρήστε το πρόγραμμα χειρισμού συμβάντων: Αυτό μπορεί να γίνει με τον καθορισμό των στοιχείων onevent ακίνητο π.χ.. onclick ή onkeypress κ.λπ.. Αυτό λειτουργεί με ολόκληρο το πρόγραμμα περιήγησης, αλλά έχει έναν περιορισμό που μπορούμε να επισυνάψετε μόνο ένα πρόγραμμα χειρισμού συμβάντων σε ένα στοιχείο. Οι συνημμένες γεγονότα μπορούν να αφαιρεθούν με παρόμοιο τρόπο χρησιμοποιώντας detachEvent ή removeEventListener.

· Αποκτήστε το αντικείμενο εκδήλωσης: Πλειονότητα των browsers περάσει το αντικείμενο εκδήλωσης ως επιχείρημα για τον χειριστή. Τα ακόλουθα τρία γεγονότα που δημιουργείται όταν ο χρήστης κάνει κλικ του ποντικιού του.

o mouseDown: υποδεικνύει ότι το ποντίκι είναι πατημένο.

o MouseUp: υποδεικνύει ότι το ποντίκι απελευθερώνεται.

o Κλίκ: υποδεικνύει ότι το ποντίκι είναι πατηθεί. Αν αυτό συμβεί σε διαδοχικά, Αυτό δείχνει ότι ένα διπλό κλικ έχει συμβεί.

· Extract information from the object – Το τρίτο βήμα είναι οι πληροφορίες που σχετίζονται με δράση απόσπασμα από το αντικείμενο και να ξεκινήσει τη δράση.

· Inform about the completion of the event – Αυτό είναι το τελικό βήμα. Μόλις η εκδήλωση πλειστηριασμό με επιτυχία η ολοκλήρωση της εκδήλωσης έχει επισημανθεί.

Summary: Για την ολοκλήρωση της συζήτησης μπορούμε να τηρούν τα ακόλουθα σημεία κατά νου
· 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 γεγονότα και εκδηλώσεις Παράθυρο.

· 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 Σχεδιασμός

Μοτίβα Java Script Σχεδιασμός

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