מאמר זה מהווה המשך לסדרת המאמרים על jQuery. עד כה סקרנו את ה-selectors שמסייעים לנו לאתר את האלמנט המדויק שאנו רוצים, בין אם זו פסקה עם id מסוים או li זוגי ברשימה מסוימת. עכשיו אנו נדבר על אירועים.
מה הם אירועים? אירועים הם כל דבר שאני יכול לעשות עם העכבר, המקלדת או שתלוי בזמן. למשל אם אני לוחץ עם העכבר על אלמנט מסוים – הלחיצה (click) היא אירוע. אם אני עובר עם העכבר מעל קישור והוא משתנה, המעבר (hover) הוא אירוע. יש לא מעט אירועים ו-jQuery מסייעת לנו בנושא רבות. אני אדגים את כל האירועים על פסקאות עם id שונים.
On
על מנת להבין את כל האירועים ב-jQuery, עלינו להבין את פקודת ה-on. בת'כלס מה שזה אומר זה שברגע שקורה משהו – האירוע מופעל. כאשר אנו מבצעים on אנו קושרים בין האלמנט, לאירוע ולפונקציה שמופעלת על ידי האירוע. אם יש לי אלמנט שהוא פסקה שה-id שלה הוא example1 והאירוע הוא click והפונקציה שמופעלת כתוצאה מהקליק היא alert מסוים אני צריך לקשור את הכל יחד בחבילה מסודרת ויפה. איך עושים את זה? פשוט מאד.
הקלק על הפסקה הזו על מנת לראות את האירוע 'קליק'.
וככה זה נראה בקוד:
<script type="text/javascript">
$(document).ready(function() {
$("#example1").on("click" , function () {
alert("הודעה מעצבנת");
});
});
</script>
הסינטקס הוא פשוט מאד, ראשית אנו מציינים את האלמנט שאני הולך לקשור אליו את האירוע, אז את האירוע (click) ואז פשוט כותב את הפונקציה. הקשירה הזו מבוצעת לכל אלמנט שקיים בדף. וכמובן שבמקום ה-click אפשר לכתוב כל אירוע שהוא. כמו למשל hover.
עבור עם העכבר על הפסקה הזו על מנת לראות הודעה מעצבנת נוספת.
וכך זה נראה בקוד:
<script type="text/javascript">
$(document).ready(function() {
$("#example2").on("mouseover" , function () {
alert("הודעה מעצבנת נוספת");
});
});
</script>
ניתן להחליף את ה-click או את ה-mouseover באירועים רבים נוספים. אני מצרף רשימה שלהם שאפשר ורצוי בהחלט לנסות אך בהמשך יהיה פירוט על כל אירוע ואירוע. מה שחשוב להבין זה את נושא הקשירה (binding). נסו לקשור אירועים שונים לאלמנטים שונים (עליהם הסברתי במאמרים הקודמים) לשם התרגול.
- blur
- focus
- focusIn – דומה ל-focus אך כולל בעבוע של אלמנטים בנים
- focusOut – דומה ל-blur אך כולל בעבוע של אלמנטים בנים
- load
- resize
- scroll
- unload
- beforeunload
- click
- dblclick
- mousedown
- mouseup
- mousemove
- mouseover
- mouseout
- mouseenter
- mouseleave
- change
- select
- submit
- keydown
- keypress
- keyup
- error
Off
כמו שיש קשירה, יש גם התרה או off. אם מסיבה מסוימת אני רוצה להתיר אלמנטים מסוימים מהאירועים שלהם, אז כל מה שאני צריך לעשות זה להשתמש בפקודה הזו. זה נראה קצת טיפשי, אבל תחשבו למשל על כפתור כיבוי שיכבה למשל את האפשרות שבה לחיצה על פסקאות הדוגמא שלנו שהצבתי למעלה תקפיץ alerts.
הקליקו פעמיים על הפונקציה הזו על מנת לכבות את ה-alerts של שתי פסקאות הדוגמא שפירסמתי קודם.
<script type="text/javascript">
$(document).ready(function() {
$("#example3").on("dblclick" , function () {
$("#example1").off("click");
$("#example2").off("mouseover");
alert("אין יותר הודעות מעצבנות");
});
});
</script>
פשוט ביותר, לא? אפשר להשתמש גם ב-off() על מנת לבצע התרה של כל האירועים.
one
אם אני רוצה לקשור אירוע בצורה חד פעמית לאלמנט מסוים, כלומר שהאירוע ירוץ רק פעם אחת בלבד, אני יכול להשתמש ב-one שמבצע קשירה חד פעמית של אלמנט, אירוע ופונקציה. שימו לב לדוגמא הזו שמבצעת קשירה חד פעמית בלבד.
הקליקו על הפסקה הזו על מנת לראות הודעה חד פעמית
וככה זה נראה:
<script type="text/javascript">
$(document).ready(function() {
$("#example4").one("click" , function () {
alert("ההודעה הזו תופיע פעם אחת בלבד");
});
});
</script>
סיכום
יכול מאד להיות שהמונח on בלבל אתכם, במיוחד אם אתם לא מורגלים בשפות תכנות אחרות. זה בסדר גמור, נסו לתרגל לפי הדוגמאות שנתתי. בחלקו השני של המאמר אני מרחיב על ה-events (יש עוד לא מעט) ונותן דוגמאות נוספות. אך הבנת ה-bind היא חשובה ביותר. מומלץ לנסות לפחות דוגמא אחת בעצמכם לפני שמתקדמים הלאה.