אירועים ב-jQuery
אירועים ב-jQuery הם משהו שהדפדפן או הגולש עושה, ואנחנו מעוניינים שהקוד ייצר התנהגות מסוימת בתגובה לו. לדוגמה, כשהמשתמש מקליק עם העכבר על אלמנט מסוים או כשהוא לוחץ על כפתור. ישנם סוגים רבים של אירועים ב-jQuery , ובמדריך זה אסקור מספר אירועים שימושיים במיוחד שהמשתמש מייצר באמצעות העכבר, או המקלדת. בנוסף, אסביר על השיטה להאזין לאירועים באמצעות המתודה on, ובסוף המדריך אצרף קוד מועיל שמשתמש באירועים כדי ליצור אפקט של כיתוב בשדה טקסט שנעלם כשנמצאים בתוך שדה הטקסט, ומופיע כשיוצאים ממנו.
אירועי jQuery שימושיים במיוחד
()click.
מתרחש כשהעכבר נמצא על אלמנט, ולאחר שהגולש לחץ על העכבר, ושחרר.
()dblclick.
האירוע מתרחש לאחר שהגולש לחץ פעמיים על העכבר.
()hover.
כשהעכבר מרחף מעל לאלמנט.
()mouseenter.
האירוע מתרחש כשהעכבר נכנס לתוך אלמנט מסוים.
()mouseleave.
האירוע מתרחש כשהעכבר יוצא מתוך אלמנט מסוים.
()keydown.
כשהמשתמש מתחיל ללחוץ על מקש מסוים.
()keyup.
כשהגולש משחרר את המקש המסוים.
()focusin.
מתייחס בעיקר לאלמנטים שנמצאים בטפסים ובלינקים. כאשר המשתמש מקליק על האלמנט דוגמת שדה טקסט, או כפתור רדיו.
()focusout.
מתייחס בעיקר לאלמנטים שנמצאים בטפסים ובלינקים. כאשר המשתמש יוצא מהאלמנט. לדוגמה, כשהמשתמש יוצא משדה טקסט.
המתודה ()on.
הדרך המומלצת ביותר להאזין לאירועים החל מגרסה 1.7 של jQuery היא באמצעות המתודה on, שמחברת לסלקטור (האלמנט הנבחר בדף), את הפונקציה שהוא צריך לבצע בתגובה לאירוע. בוא נראה את הקוד הבא שמדגים אירוע. במקרה זה, הקלקה של המשתמש על הריבוע תגרום להחלפת הצבע. שימו לב ש-(this)$ מצביע על האלמנט שעליו הפעלנו את המתודה on, ובמקרה זה על הריבוע colored-square#.
$('div#colored-square').on('click' , function () {
$(this).css({'background': 'orange', 'color': 'white'});
});
וכך זה נראה:
אבל מה קורה כשרוצים שפעולה שנעשית על אלמנט תגרום לשינוי באלמנט אחר בדף? במקרה כזה, אפשר להחליף את this באלמנט שעליו אנחנו רוצים להפעיל את השינוי. לדוגמה, הקוד הבא מגדיר שהקלקה עם העכבר על אלמנט הריבוע הצבעוני יגרום לשינוי בצבע הרקע של העיגול:
$('div#colored-square2').on('click', function () {
$('#circle').css('background', 'orange');
});
וכך זה נראה:
תיבת טקסט עם jQuery
קוד - הכיתוב נעלם כשנעמדים בתוך תיבת הטקסט בטופס, ומופיע מיד כשיוצאים ממנה, אם לא כתבנו דבר בתיבה
כשתפעילו את הקוד זה מה שתראו. כמובן שתוכלו לשנות את הטקסט שכתוב בתיבת הטקסט במה שתרצו על ידי שינוי הערך value בשדה 'type='text.
את כתיבת הקוד נתחיל מההטמ"ל המאוד בסיסי שיוצר תיבת טקסט בתוך טופס, ואת תגיות ה-script שלתוכן נשבץ את הקוד שלנו.
<html>
<head>
<meta charset="WINDOWS-1255">
<style>
</style>
</head>
<body>
<form>
<div>
<input type="text" value='הקלד לכאן את הטקסט'/>
<input type="submit" value='כפתור להדגמה'/>
</div>
</form>
<script src="//code.jquery.com/jquery-latest.js"></script>
<script>
</script>
</body>
</html>
ראשית ניצור את הפונקציה שבתוכה יתפקד jQuery. המטרה של הפונקציה הזו היא שהמשתנים יישארו לוקליים ושסימן ה-$ יורה על jQuery בלבד.
<script>
(function($){
})(jQuery);
</script>
נוסיף משתנה input ששומר בזיכרון את שדה הטקסט במצב ש-jQuery יכול לעבוד אתו מפני שהוא עטוף בסימן ה-$:
var input = $('input:text')
ומשתנה textInside ששומר בזיכרון את ערך ה-value של שדה הטקסט, ובמקרה זה את הערך : “הקלד לכאן את הטקסט" =value .
שמירה בזיכרון עשויה לחסוך במשאבי מערכת מפני שבמקום ש-jQuery ייקח את ערכם של המשתנים מה-DOM בכל פעם מחדש, הוא עושה זאת רק פעם אחת, ומאחסן את ערכם של המשתנים. המשמעות היא שיפור בזמני תגובה, בפרט בפרויקטים שבהם מספר רב של קריאות.
כך נראה הקוד לאחר הוספת המשתנים:
<script> (function($){
var input = $('input:text'),
textInside = input.val();
})(jQuery);
</script>
בשלב הבא, נוסיף את הפונקציה שמתרחשת כאשר הגולש מקליק בתוך שדה הטקסט. האירוע הוא focusIn והתגובה אומרת שעם ה-value של שדה הטקסט זהה לערך השמור בזיכרון של textInside אז צריך להחליף את ערכו של ה-value לערך ריק. נראה את הקוד:
input.on('focusin', function() {
var inputValue = $(this);
if (inputValue.val() === textInside)
{
inputValue.attr('value',' ');
}
});
שימו לב לדברים הבאים:
1.השימוש ב-(this)$ כדי לאחסן את שדה הטקסט בזיכרון. (this)$ מצביע על האלמנט ש-on מאזין לו, ובמקרה זה הוא מאזין לשדה הטקסט. חשוב לשמור את (this)$ בזיכרון מפני שאחר כך אנחנו צריכים אותו פעמיים ואנחנו מעוניינים לחסוך במשאבי מערכת, ולהפחית את זמן התגובה.
2.המתודה()val. לוקחת את ה-value של שדה הטקסט.
3.המתודה()attr. מגדירה פה את ערכו של ה-value של שדה הטקסט.
דבר נוסף שאנחנו רוצים לעשות הוא שאם הגולש בוחר שלא למלא את הטופס, אז הטופס ימולא בטקסט ברירת המחדל. למטרה זו נוסיף את הקוד הבא:
input.on('focusout', function() {
var inputValue = $(this);
if (inputValue.val() === ' ')
{
inputValue.attr('value',textInside);
}
});
לסיכום, הקוד המלא:
<html>
<head>
<meta charset="WINDOWS-1255">
<style>
form{background: orange; width: 400px; height: 30px; margin: auto; padding: 10px; border: 1px solid black;}
form div{text-align: right;}
input{text-align: right; color: #808080; float: right; padding-left: 10px;}
</style>
</head>
<body>
<form>
<div>
<input type="text" value='הקלד לכאן את הטקסט'/>
<input type="submit" value='כפתור להדגמה'/>
</div>
</form>
<script src="//code.jquery.com/jquery-latest.js"> </script>
<script>
(function($){
var input = $('input:text'),
textInside = input.val();
input.on('focusin', function() {
var inputValue = $(this);
if (inputValue.val() === textInside)
{
inputValue.attr('value','');
}
});
input.on('focusout', function() {
var inputValue = $(this);
if (inputValue.val() === '')
{
inputValue.attr('value',textInside);
}
});
})(jQuery);
</script>
</body>
</html>
אהבתם? לא אהבתם? דרגו!
0 הצבעות, ממוצע 0 מתוך 5 כוכבים
המדריכים באתר עוסקים בנושאי תכנות ופיתוח אישי. הקוד שמוצג משמש להדגמה ולצרכי לימוד. התוכן והקוד המוצגים באתר נבדקו בקפידה ונמצאו תקינים. אבל ייתכן ששימוש במערכות שונות, דוגמת דפדפן או מערכת הפעלה שונה ולאור השינויים הטכנולוגיים התכופים בעולם שבו אנו חיים יגרום לתוצאות שונות מהמצופה. בכל מקרה, אין בעל האתר נושא באחריות לכל שיבוש או שימוש לא אחראי בתכנים הלימודיים באתר.
למרות האמור לעיל, ומתוך רצון טוב, אם נתקלת בקשיים ביישום הקוד באתר מפאת מה שנראה לך כשגיאה או כחוסר עקביות נא להשאיר תגובה עם פירוט הבעיה באזור התגובות בתחתית המדריכים. זה יכול לעזור למשתמשים אחרים שנתקלו באותה בעיה ואם אני רואה שהבעיה עקרונית אני עשוי לערוך התאמה במדריך או להסיר אותו כדי להימנע מהטעיית הציבור.
שימו לב! הסקריפטים במדריכים מיועדים למטרות לימוד בלבד. כשאתם עובדים על הפרויקטים שלכם אתם צריכים להשתמש בספריות וסביבות פיתוח מוכחות, מהירות ובטוחות.
המשתמש באתר צריך להיות מודע לכך שאם וכאשר הוא מפתח קוד בשביל פרויקט הוא חייב לשים לב ולהשתמש בסביבת הפיתוח המתאימה ביותר, הבטוחה ביותר, היעילה ביותר וכמובן שהוא צריך לבדוק את הקוד בהיבטים של יעילות ואבטחה. מי אמר שלהיות מפתח זו עבודה קלה ?
השימוש שלך באתר מהווה ראייה להסכמתך עם הכללים והתקנות שנוסחו בהסכם תנאי השימוש.