Javascript events. part 01

Μέγεθος: px

Εμφάνιση ξεκινά από τη σελίδα:

Download "Javascript events. part 01"

Σπάρτακος Πανταζής
7 χρόνια πριν
Προβολές:

1 Javascript events part 01

2 Οδηγούμενη από γεγονότα (event-driven) Οδηγούμενες από γεγονότα ονομάζονται οι γλώσσες προγραμματισμού που η ροή του προγράμματος μπορεί να αλλάξει από γεγονότα. Η javascript είναι μια τέτοια γλώσσα. Γεγονός (event) μπορεί να είναι το πάτημα ενός πλήκτρου, η κίνηση το κέρσορα ή φόρτωση της σελίδας.

3 Δομή event-driven κώδικα Η δομή κώδικα οδηγούμενου από γεγονότα έχει δύο σκέλη 1. Ορίζουμε ποία γεγονότα θέλουμε να χειριστούμε και πώς θέλουμε να γίνει ο χειρισμός. 2. Περιμένουμε να συμβεί κάποιο γεγονός. Μόλις συμβεί το χειριζόμαστε όπως έχουμε καθορίσει προηγουμένως, αν αυτό έχει οριστεί.

4 event-driven javascript Στην javascript δεν χρειάζεται να ανησυχούμε για το δεύτερο κομμάτι, καθώς αυτό το αναλαμβάνει η γλώσσα. Χρειάζεται να ορίσουμε συναρτήσεις που θα χειρίζονται κατάλληλα τα συμβάντα/γεγονότα που θέλουμε.

5 Javascript events Θα μπορούσαμε να χωρίσουμε τα γεγονότα στις παρακάτω κατηγορίες: Γεγονότα που προκύπτουν συμπεριφορά του περιηγητή, πχ φόρτωση σελίδας (onload). Γεγονότα που σχετίζονται με διαδικτυακά δεδομένα, πχ ajax response. Γεγονότα που προκαλούνται συμπεριφορά του χρήστη, πχ πάτημα πλήκτρου. Χρονικά εξαρτώμενα γεγονότα, εκτέλεση

6 Javascript events & DOM Μπορούμε να ορίσουμε το χειρισμό των event με την βοήθεια του DOM, θέτοντας κατάλληλες συναρτήσεις σε στοιχεία του DOM. σε κάθε στοιχείο του DOM μπορούν να οριστούν χαρακτηριστικά που αφορούν γεγονότα. window.onload = function(){ console.log ("loaded"); }

7 event και html Ο χειρισμός των event μπορεί να γίνει και στην html, έχοντας κώδικα js στο ανάλογο χαρακτηριστικό. <body onload="console.log("loaded");"> </body> Προτιμούμε να μην το κάνουμε με αυτό το τρόπο. Είναι καλό να υπάρχει διαχωρίσιμος js και html.

8 Mouse events onclick - όταν ο χρήστης κάνει click το στοιχείο ondbclick - διπλό click στο στοιχείο onmousedown - πατάει, onmouseup - αφήνει. onmousemove - κίνηση του κέρσορα μέσα στο στοιχείο onmouseover - είσοδος του κέρσορα onmouseout - έξοδος του κέρσορα click: πατάει και αφήνει κουμπί του ποντικιού

9 Keyboard Events onkeydown - πάτημα κουπιού onkeypress - πάτημα και απελευθέρωση κουπιού onkeyup - απελευθέρωση κουπιού

10 other events onload - όταν όλα τα στοιχεία της σελίδας φορτωθούν πλήρως. readystatechange resize - όταν αλλάζει το μέγεθος του παραθύρου.

11 Παράμετρος event Mια παράμετρος με την οποία καλείται κάθε συνάρτηση. Η παράμετρος αυτή είναι ένα object που περιέχει διάφορες πληροφορίες σχετικά με το event που κλήθηκε. Τα στοιχεία του εξαρτώνται από το είδος του event

12 Μερικά στοιχεία του event target - το node στο DOM απο το οποίο άρχισε / δημιουργήθηκε το γεγονός. (εξηγούμε αργότερα γιατί είναι χρήσιμο) currenttarget - το node από το οποίο "αιχμαλωτίστηκε" το event timestamp - πότε συνέβει το event

13 propagation preventdefault - ακυρώνει το default χειρισμό του event. (πχ sumbit) stoppropagation - σταματάει την περαιτέρω διάδοση του event στο DOM (συνεχίζει η διάδοση στους handlers του ίδιου DOM). stopimmediatepropagation - σταματάει άμεσα την διάδοση του event.

14 Για mouse Events screenx, screenυ - συντεταγμένες που συνέβη το γεγονός σε σχέση με το πάνω αριστερό σημείο της οθόνης. clientx, clienty - συντεταγμένες που συνέβη το γεγονός σε σχέση με το πάνω αριστερό σημείο της σελίδας. button - ποίο πλήκτρο του ποντικιού πατήθηκε

15 Για keyboard Events keycode περιέχει έναν κωδικό ποίο πλήκτρο πατήθηκε.

16 Timmer Μας δίνει την δυνατότητα να εκτελέσουμε κώδικα μετά από κάποιο χρονικό διάστημα (delay) σε milliseconds. var id =settimeout(func, delay, par1, par2,..., parn); var id = settimeout("code", delay); Η συνάρτηση επιστρέφει ένα id που χαρακτηρίζει το συγκεκριμένο interval και με την χρήση αυτού μπορούμε να το ακυρώσουμε. cleartimeout(id);

17 Interval Όμοια με την Timeout υπάρχει και η Ιnterval, με την διαφορά ότι η Ιnterval επαναλαμβάνεται ανά το χρονικό διάστημα που ορίζει το delay. var id =setinterval(func, delay, par1, par2,..., parn); var id = setinterval("code", delay); ακύρωση clearinterval(id);

18 addeventlistener Μας επιτρέπει να έχουμε πολλαπλά events σε ένα στοιχείο του DOM. Σύνταξή: element.addeventlistener("eventname", function (e) {...} ); προσθέτει την συνάντηση στους handlers για το event με eventname στο στοιχείο element.

19 to be continued...

Σχετικά έγγραφα

JAVASCRIPT EVENTS. Διδάσκοντες: Π. Αγγελάτος, Δ. Ζήνδρος Επιμέλεια διαφανειών: Π. Αγγελάτος Σχολή Ηλεκτρολόγων Μηχανικών και Μηχανικών Υπολογιστών

JAVASCRIPT EVENTS. Διδάσκοντες: Π. Αγγελάτος, Δ. Ζήνδρος Επιμέλεια διαφανειών: Π. Αγγελάτος Σχολή Ηλεκτρολόγων Μηχανικών και Μηχανικών Υπολογιστών JAVASCRIPT EVENTS Διδάσκοντες: Π. Αγγελάτος, Δ. Ζήνδρος Επιμέλεια διαφανειών: Π. Αγγελάτος Σχολή Ηλεκτρολόγων Μηχανικών και Μηχανικών Υπολογιστών Άδεια Χρήσης Το παρόν εκπαιδευτικό υλικό υπόκειται σε άδειες