Facebook
Twitter
RSSמדריך jQuery – אירועים (Events)
אירוע הוא פעולה שמבוצעת על דף ה-HTML, כמו לחיצה על כפתור, העלאה של דף, הכנסת טקסט לתיבת טקסט, או כל פעולה אחרת על אלמנטים בדף. קיים מספר רב של אירועים מובנים ב-jQuery, עליהם ניתן ללמוד בתיעוד באתר jQuery בכתובת http://api.jquery.com/category/events. על מנת לטפל באירוע, אנו רושמים פונקציית JavaScript שתפעל כאשר האירוע יתרחש, ע”י שימוש בפונקציית jQuery המתארת את האירוע.
האירוע ()ready
בפרק הקודם ראינו דוגמא לקוד בסיסי של jQuery המופעל בעל עליית הדף:
<script type="text/javascript">
$(document).ready(function () {
// כאן יבוא הטיפול באירוע
});
</script>
נבין רגע את הקוד הזה לעומק. ראשית, אנו בוחרים את האובייקט document ע”י שימוש בפונקציית ה- $. אחרי שבחרנו את ה- document, אנחנו מצמידים פונקציה לטיפול באירוע ready שמשמעותו שהמסמך כולו נטען וכל האלמנטים מוכנים לקבל פעולות JavaScript. הפונקציה תגדיר את הקוד שיופעל ברגע שהמסמך סיים להטען.
בסה”כ, הקוד הבא יגרום להצגת alert המציג את כותרת הדף, לאחר טעינת הדף.
<script type="text/javascript">
$(document).ready(function() {
alert(document.title);
});
</script>
להפעלת הדוגמא לחצו כאן
האירוע ()click
אירוע ()click ייקרא, כאשר נלחץ על אלמנט מסויים ע"י העכבר או המקלדת. האירוע שכיח בשימוש עם כפתורים הנמצאים על דף ה- HTML שלנו.
לדוגמא: נתחיל מדף ה- HTML הבא:
<!DOCTYPE html>
<html>
<head>
<title>click() event</title>
</head>
<body>
<input id="btnHide" type="button" value="Click Here" />
<div id="yellowDiv">
jQuery Tutorial
</div>
</body>
</html>
אם נריץ את הדף נקבל את התוצאה הבאה:
כעת, נרצה שבלחיצה על הכפתור ששמו btnHide יוסתר ה- div ששמו yellowDiv. כדי לעשות זאת:
1. נוסיף הפנייה לספריית jQuery:
<head>
<title>click() event</title>
<script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.4.js"
type="text/javascript"></script>
</head>
2. נרשום פונקציה לטיפול באירוע ready:
<head>
<title>click() event</title>
<script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.4.js"
type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
});
</script>
</head>
3. נרשום פונקציה לטיפול באירוע click של הכפתור. נשתמש בפונקציה $ כדי לבחור את הכפתור המזוהה ע”י השם btnHide ונשתמש בפונקציה click כדי להגדיר פונקציה שטטפל באירוע:
<script type="text/javascript">
$(document).ready(function () {
$("#btnHide").click(function () {
});
});
</script>
נשים לב כי כדי לפנות לאלמנט כלשהו בדף ע”פ המזהה הייחודי שלו, נשתמש בסימן #. בפרקים מאוחרים יותר נלמד על סלקטורים ב- jQuery ואיך הם מאפשרים לבחור אלמנטים בדף כדי לבצע עליהם פעולות.
4. נכתוב את הקוד שיופעל כתגובה לאירוע click של הכפתור. במקרה שלנו – הסתרה של ה- div ששמו yellowDiv.
<script type="text/javascript">
$(document).ready(function () {
$("#btnHide").click(function () {
$("#yellowDiv").hide();
});
});
</script>
שימו לב שגם כאן אנחנו משתמשים בסימן # כדי לבחור את האלמנט yellowDiv, ועליו מפעילים את הפונקציה hide אותה נכיר בפרק העוסק באפקטים ב- jQuery.
אם נריץ את הדוגמא, נקבל ראשית את התוצאה הזאת:
אם נלחץ על הכפתור, נקבל את התוצאה הבאה:
להפעלת הדוגמא לחצו כאן
אירועי ()mouseover ו- ()mouseout
אירוע mouseover ייקרא כאשר אנו נזוז עם העכבר מעל האלמנט שעבורו אנו מטפלים באירוע הנ"ל ואירוע mouseout ייקרא כאשר אנו נצא עם העכבר מתחום האלמנט.
לדוגמא, נשנה את דף ה- HTML שבדוגמא הקודמת שיכיל את הקוד הבא:
<script type="text/javascript">
$(document).ready(function () {
$("#yellowDiv").mouseover(function () {
$("#yellowDiv").css({ "background-color": "lightblue" });
});
$("#yellowDiv").mouseout(function () {
$("#yellowDiv").css({ "background-color": "yellow" });
});
});
</script>
בקוד הנ”ל אנחנו מגדירים טיפול לשני אירועים עבור ה- div ששמו yelloDiv. בעת mouseover, אנחנו צובעים את הרקע של אלמנט ה- div בצבע צהוב, ע”י שימוש בפונקציה css. עבור האירוע mouseout, אנחנו מחזירים את צבע הרקע להיות צהוב.
להרצת הדוגמא לחצו כאן.
טיפ: שרשור קריאות לפונקציות
בקטע הקוד האחרון הפעלנו 2 פונקציות על האלמנט yellowDiv. פעם אחת רשמנו פונקציה לטיפול באירוע mouseover ופעם שניה באירוע mouseout. ניתן היה לשרשר את שתי הקריאות האלה לקריאה אחת באופן הבא:
<script type="text/javascript">
$(document).ready(function () {
$("#yellowDiv")
.mouseover(function () {
$("#yellowDiv").css({ "background-color": "lightblue" });
})
.mouseout(function () {
$("#yellowDiv").css({ "background-color": "yellow" });
});
});
</script>
שרשור פונקציות הופך את הקוד לקריא יותר, ומשפר את ביצועי הקוד, כיוון שלא צריך כל פעם לאתר את האלמנטים כדי להפעיל עליהם את הפעולה. התוצאה כמובן תישאר אותו הדבר.
תגובות בפייסבוק