אינטרנט ישראל
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • קבלו עדכונים במייל
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג’אווהסקריפט
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • קבלו עדכונים במייל
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג’אווהסקריפט
ראשי » מדריכים » jQuery » jQuery – Events – אירועים

jQuery – Events – אירועים

רן בר-זיק פברואר 3, 2009 6:13 am אין תגובות

במאמר זה יש סקירה על ה-events שיש בספרית Jquery. מאמר זה מהווה המשך לסדרת המאמרים על Jquery.

המאמר הקודם ללימו jQueryjQuery – Selectors חלק ב
המאמר הבא ללימוד jQueryjQuery – Events – אירועים חלק ב’
כדאי תמיד להשאר מעודכנים! הרשמו לעדכונים של האתר במייל! - המייל יישלח כל יום ראשון בעשר בבוקר ויכיל אך ורק את המאמרים שהתפרסמו באינטרנט ישראל. ללא ספאם, ללא הצפות, ללא בלגנים. אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט. הפרויקט הוא הפרויקט הספרותי המוביל בהדסטארט. בשיתוף הקריה האקדמית אונו.

מאמר זה מהווה המשך לסדרת המאמרים על 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 היא חשובה ביותר. מומלץ לנסות לפחות דוגמא אחת בעצמכם לפני שמתקדמים הלאה.

כדאי תמיד להשאר מעודכנים! הרשמו לעדכונים של האתר במייל! - המייל יישלח כל יום ראשון בעשר בבוקר ויכיל אך ורק את המאמרים שהתפרסמו באינטרנט ישראל. ללא ספאם, ללא הצפות, ללא בלגנים. אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט. הפרויקט הוא הפרויקט הספרותי המוביל בהדסטארט. בשיתוף הקריה האקדמית אונו.
מידע למפתחים ספרית jQuery
ללמוד ג'אווהסקריפט בעברית

ללמוד לתכנת ג'אווהסקריפט בעברית שגייס יותר משלוש מאות אלף שקל ולמעלה מ-2000 תומכים - בואו ללמוד עכשיו איך לתכנת.

רשימת הנושאים
  • מדריכים
    • ריאקט
    • ECMAScript 6
    • ES20XX
    • Node.js
    • Express
    • רספברי פיי
    • Babel
    • docker
    • MongoDB
    • Git
    • לימוד MySQL
    • SASS
    • jQuery
    • CSS3
    • HTML 5
    • SVN
    • LESS
  • פיתוח אינטרנט
    • פתרונות ומאמרים על פיתוח אינטרנט
    • jQuery Scripts
    • jQuery למתקדמים
    • יסודות בתכנות
    • נגישות אינטרנט
  • חדשות אינטרנט
  • מידע כללי על אינטרנט
    • רשת האינטרנט
    • בניית אתרי אינטרנט
  • rss logo

    לכל המאמרים

    לכל המאמרים שפורסמו באינטרנט ישראל משנת 2008 ועד עכשיו.
  • rss logo

    RSS Feed

    משתמשים בקורא RSS? אם כן, עקבו אחרי אינטרנט ישראל באמצעות פיד ה-RSS!
    מה זה RSS?
  • Twitter logo

    עקבו אחרי בטוויטר

    בחשבון הטוויטר שלי אני מפרסם עדכונים מהירים על חדשות בתחום התכנות והיזמות, התרעות על מצבי חירום ורכילות בוערת על תחום הווב.
    מה זה טוויטר?
  • facebook like image

    ערוץ הטלגרם של אינטרנט ישראל

    בערוץ הטלגרם של אינטרנט ישראל אני מפרסם את הפוסטים של באתר וכן עדכונים טכנולוגיים נוספים.
    מה זה טלגרם?
  • github logo

    הפרויקטים שלי בגיטהאב

    הפרויקטים שאני כותב ושוחררו לציבור ברישיון קוד פתוח נמצאים ברובם בגיטהאב.
חיפוש
הצטרפו לעדכונים!

העדכונים נשלחים אך ורק כאשר האתר מתעדכן.

כל הזכויות שמורות לרן בר-זיק ולאינטרנט ישראל | מדיניות הפרטיות של אתר אינטרנט ישראל | אתר אינטרנט ישראל נגיש לפי תקן WCAG 2.0 AA | הצהרת הנגישות של האתר | אבטחת מידע ודיווח על בעיית אבטחת מידע

גלילה לראש העמוד