Μέθοδος one
Η μέθοδος one επιτρέπει την προσθήκη ενός χειριστή
συμβάντων σε ένα στοιχείο. Αφού το συμβάν
ενεργοποιηθεί μία φορά - ο χειριστής θα
αφαιρεθεί αυτόματα.
Σύνταξη
Έτσι προσαρτούμε έναν χειριστή συμβάντων σε ένα στοιχείο,
ως πρώτη παράμετρο ως συμβολοσειρά
περνάει ένα ή περισσότερα συμβάντα χωρισμένα
με κενά, δεύτερο - περνάμε δεδομένα σε μορφή αντικειμένου JavaScript,
τα οποία περνάνε στον χειριστή στην ιδιότητα
event.data κατά την ενεργοποίηση του συμβάντος. Η δεύτερη παράμετρος
είναι προαιρετική. Τρίτο περνάμε τη συνάρτηση-χειριστή,
στην οποία περνάται το αντικείμενο συμβάντος ή περνάμε false:
javascript$(selector).one(events, [data], handler(event object));
Μπορούμε ως δεύτερη παράμετρο να περάσουμε έναν επιπλέον
φιλτραρισμένο επιλογέα (selector) για απογόνους μέσα στο στοιχείο,
τρίτο - πρόσθετα δεδομένα, τα οποία περνάνε
στον χειριστή στην ιδιότητα event.data κατά
την ενεργοποίηση του συμβάντος. Η δεύτερη και τρίτη παράμετροι
είναι προαιρετικές. Τέταρτο περνάμε
τη συνάρτηση-χειριστή, στην οποία περνάται το αντικείμενο συμβάντος
και προαιρετικές πρόσθετες παράμετροι. Αν αντί για
συνάρτηση-χειριστή περάσουμε false, τότε η συνάρτηση απλά
θα επιστρέψει false:
javascript$(selector).one(events, [selector], [data], handler(event object));
Μπορούμε να χρησιμοποιήσουμε τη μέθοδο one διαφορετικά,
τότε στην πρώτη παράμετρο περνάται
ένα αντικείμενο JavaScript, όπου τα κλειδιά - ο τύπος συμβάντος, και
οι τιμές - η συνάρτηση-χειριστής, την οποία προσθέσαμε
στο στοιχείο:
javascript$(selector).one({'event type': handler}, [selector], [data]);
Αν δεν περάσουμε επιπλέον επιλογέα (selector), τότε το συμβάν ενεργοποιείται στο στοιχείο στο οποίο προσαρτούμε τον χειριστή, αλλιώς - σε απόγονο στοιχείο, το οποίο ταιριάζει με αυτόν τον επιλογέα (αντιπροσωπευμένα συμβάντα - delegated events).
Παράδειγμα
Ας κάνουμε κλικ στην παράγραφο για να εμφανίσουμε τα δεδομένα, τα οποία
περάσαμε στη μέθοδο one. Σε επόμενα κλικ
δεν θα συμβαίνει τίποτα. Ας χρησιμοποιήσουμε τη
συνάρτηση-χειριστή testFunc,
την οποία δημιουργήσαμε:
html<p>click</p>javascriptfunction testFunc(event) {
alert(event.data.text);
}
$('p').one('click', {text: 'aaa' }, testFunc);