אירועים ומאזינים לאירועים ב-javascript
javascript היא חלק בלתי נפרד מחוויית המשתמש באתרי אינטרט הרבה בזכות היכולת להגדיר באמצעותה פונקציות שיגיבו בזמן אמת לפעולות שמבצע המשתמש. לדוגמה, לחיצה על כפתור שמקפיצה פופ-אפ, ולידציה שאומרת למשתמש שהסיסמה שלו קצרה מדי או לא חזקה מספיק בזמן אמת, הודעה למשתמש כשהוא מנסה לנווט מחוץ לדף, ועוד. פעולות אילו מכונות אירועים (events) , וניתן להאזין להם באמצעות מאזינים לאירועים (event listener) , שאותם מצמידים לאלמנטים בדף דוגמת div או p.
האירועים מכונים בשם שמתאר את הפעולה. לדוגמה, click, שיורה כשמקליקים על אלמנט, ו-mouseover, שיורה כשעוברים על אלמנט עם העכבר.
לפני שאסביר כיצד להשתמש באירועים חייבים להבין שני דברים פשוטים:
- כיצד לתפוס אלמנט בדף לשימושו של javascript?
- מהי פונקציה אנונימית וכיצד להשתמש בה?
כיצד לתפוס אלמנט בדף לשימושו של javascript?
כדי לתפוס אלמנט בדף לשימושו של javascript מצמידים לאלמנט id ברמת ההטמ"ל, ואחר כך תופסים את האלמנט באמצעות getElementById().
לדוגמה, כדי לתפוס את הכפתור שה-id שלו הוא myBtn משתמשים בקוד הבא:
<html>
<head>
<title>דוגמה לתפיסת אלמנט</title>
<meta charset="utf-8">
</head>
<body>
<button id="myBtn" type="button">הקלק עליי!</button>
<script>
// תופס את האלמנט
document.getElementById("myBtn");
</script>
</body>
</html>מה אפשר לעשות עם האלמנט? המון דברים, אפשר להכניס ולשנות טקסט, לשנות מיקום, לשנות מראה, ואנחנו מיד נראה כיצד ניתן להאזין לאירועים שקשורים לאלמנט.
אבל קודם בואו נכיר את הנושא של פונקציה אנונימית.
מה זה פונקציה אנונימית?
פונקציה אנונימית, כשמה, היא פונקציה ללא שם.
כך כותבים אותה:
function (){}כפי שאמרנו, ללא שם.
כשלעצמה, אין בפונקציה אנונימית שום דבר מעניין, אבל ניתן לשתול בתוכה קוד. לדוגמה, הקוד הבא שמכיל הודעה למשתמש בתוך תיבת alert:
function (){
alert("מה המצב, אחי?!");
}
חזרה לאירועים ולמאזינים לאירועים
אחרי שהבנו כיצד ניתן לתפוס אלמנטים, וכיצד להשתמש בפונקציות אנונימיות, אנו מוכנים לדבר שלשמו התכנסנו.
כדי להאזין לאירועים מצמידים לאלמנטים בדף מאזינים לאירועים באמצעות addEventListener . לדוגמה, הקוד מאזין לאלמנט שה-id שלו הוא myElem, ובתגובה להקלקה על האלמנט מפעיל את הפונקציה myFunction.
כך נראה הקוד:
document.getElementById("myElem").
addEventListener
("click", myFunction);addEventListener מקבל שני פרמטרים:
- הפרמטר הראשון הוא האירוע שצריכים להאזין לו (במקרה זה קליק).
- השני זו הפונקציה שצריכה לירות בתגובה לאירוע (במקרה זה, myFunction).
ניתן להוסיף יותר ממאזין אחד לאותו אלמנט בדף. בדוגמה הבאה, מאזינים לשני אירועים, גם ל-click וגם ל-mouseover על אותו אלמנט.
document.getElementById("myElem").
addEventListener
("click", myFunction);
document.getElementById("myElem").
addEventListener
("mouseover", myFunction);
דוגמאות לאירועים
מלבד אירוע click שיורה בתגובה להקלקה על אלמנט בדף, ואירוע moseover שיורה בתגובה למעבר עם העכבר, קיימים אירועים נוספים. הטבלה הבאה מציגה מספר אירועים שימושיים במיוחד:
| האירוע | מתי הוא יורה? |
|---|---|
| click | כשמקליקים על אלמנט |
| mouseover / mouseout | כשנכנסים או יוצאים עם העכבר מאלמנט |
| keyup / keydown | כשלוחצים על כפתור במקלדת |
| focus / blur | כשנכנסים או יוצאים משדה בטופס |
| select | כשבוחרים ערך מ- select list |
| submit | כשמגישים טופס |
| load | כשהדף סיים להטען |
| unload | כשיוצאים מדף |
דוגמת קוד ממש פשוטה: קריאה לפונקציה כשלוחצים על הכפתור
נתחיל מהצגת דוגמת קוד פשוטה. לחיצה על הכפתור שה-id שלו myBtn גורמת להופעת פופאפ עם הודעה שמברכת את המשתמש לשלום.
לחצו על הכפתור כדי לצפות בדוגמה חיה של הקוד:
הקוד מאזין לאירוע הקלקה על myBtn, וכשזה מתרחש הוא קורא לפונקציה popUp. את הקריאה לפונקציה עוטפים בתוך פונקציה אנונימית.
כך נראה הקוד:
<html>
<head>
<title>דוגמה למאזין לאירועים</title>
<meta charset="utf-8">
</head>
<body>
<button id="myBtn" type="button">הקלק עליי!</button>
<script>
// 1. מאזין לאירוע ההקלקה על הכפתור
// 2. את הפונקציה חובה לעטוף בתוך פונקציה אנונימית
document.getElementById("myBtn").
addEventListener("click", function(){ popUp(); });
// הפונקציה שנקראת בתגובה לאירוע מקפיצה פופאפ
function popUp() {
alert(" ?!מה המצב, אחי ");
}
</script>
</body>
</html>שימו לב, שקוראים לפונקציה popUp בתוך פונקציה אנונימית כדי למנוע קריאה לפונקציה עם טעינת הדף.
דוגמה מעט יותר מורכבת עם פונקציה שמעבירה פרמטר
עכשיו, אחרי שלמדנו לקרוא לפונקציה בתגובה לאירוע, נוסיף נדבך, ותוך כדי קריאה לפונקציה popUp נעביר לה פרמטר.
לחצו על הכפתור כדי לצפות בדוגמה חיה של הקוד:
וזה הקוד:
<html>
<head>
<title>דוגמה למאזין לאירועים</title>
<meta charset="utf-8">
</head>
<body>
<button id="myBtn" type="button">הקלק עליי!</button>
<script>
// נעביר לפונקציה פרמטר
document.getElementById("myBtn").
addEventListener("click", function(){popUp("אחי"}));
// הפונקציה מקבלת את הפרמטר, ומשלבת אותו בפופ-אפ
function popUp(str) {
alert("מה המצב," + str + "?!");
}
</script>
</body>
</html>קוראים לפונקציה מתוך addEventListener בתוך פונקציה אנונימית.
הדרך היעילה למניעת אירועים דיפולטיים
עד כה זרמנו עם מה שלהטמ"ל יש להציע. אבל הרבה פעמים נרצה להציע התנהגות משלנו שתדרוס את ההתנהגות הטבעית של ההטמ"ל. לדוגמה, נרצה שלחיצה על כפתור הטופס לא תשלח אותו ישירות בפוסט לשרת, אלא שקודם תתבצע עליו ולידציה באמצעות פונקציות של javascript. דוגמה אחרת, היא שאנחנו רוצים שלחיצה על לינק תעשה משהו אחר מלבד לפתוח את הלינק, אולי שתפתח פופ-אפ במקום.
javascript מספיק חכם גם כדי למנוע מאורעות דיפולטיים, והוא עושה זאת באמצעות העברה לפונקציה של פרמטר המאורע, e, וביטול המאורע באמצעות preventDefault.
לדוגמה, הפונקציה האנונימית הבאה:
function ( e ) {
e.preventDefault();
}אנו מעבירים לפונקציה את הפרמטר e (קיצור של event), ומשתמשים בפרמטר כדי למנוע את האירוע הדיפולטי באמצעות : e.preventDefault().
דוגמת הקוד הבאה, מאזינה ללחיצה על קישור, אבל מונעת את המעבר לדף אחר, ומקפיצה פופ-אפ במקום.
כדי לראות את הקוד בפעולה, לחצו על הלינק:
וזה הקוד שעומד מאחורי מה שהדגמנו:
<html>
<head>
<title>
כיצד להאזין ללינק, ולבצע משהו אחר בלחיצה עליו
</title>
<meta charset="utf-8">
</head>
<body>
<a href="" id="myLink">
לחץ עליי!
</a>
<script>
// 1. מאזין ללחיצה על הלינק
// 2. מונע את ההתנהגות הדיפולטית
// 3. מקפיץ פופ-אפ במקום לפתוח את הלינק
document.getElementById("myLink").
addEventListener("click", function( e ){
e.preventDefault();
popUp();
});
// הפונקציה שנקראת בתגובה לאירוע מקפיצה פופאפ
function popUp() {
alert(" במקום לפתוח דף חדש ");
}
</script>
</body>
</html>
דוגמת קוד שקצת יותר דומה לחיים האמיתיים
הדוגמה הבאה קצת יותר מורכבת, אבל יכולה לסייע לכם להבין את הנושאים שלמדנו עד כה בדרך טובה יותר.
הדוגמה מציגה רשימה של 3 שירים, כשלחיצה על כל אחד משמות השירים מעדכן את השיר שמוצג עכשיו. זו דוגמה קצת יותר דומה לחיים האמיתיים, שמדגימה את הנושאים הבאים:
- הצמדת אירוע לאלמנט (במקרה זה, בתוך לולאה).
- האזנה לאירוע.
- כשמקליקים על הלינק, מניעת האירוע הדיפולטי באמצעות e.preventDefault
- שינוי הטקסט המוצג בהתאם לכפתור שעליו לחצו.
וזה הקוד:
<!DOCTYPE html>
<html>
<head>
<title>Choose the song you'd like to hear</title>
<meta charset="utf-8">
</head>
<body>
<div id="list-of-songs">
<a href="" class="track">Baby hit me one more time</a>
<br />
<a href="" class="track">The moppets intro</a>
<br />
<a href="" class="track">Charlie bit my finger</a>
</div>
<div>Current track: <span id="show-current-track"></span></div>
<script>
/***
* Update the info that is displayed to the user.
**/
function informUserAboutTheTrack(e){
var evt = e || window.event;
var txt = evt.target.innerHTML || evt.originalTarget.innerHTML;
document.getElementById("show-current-track").innerHTML = txt;
}
/***
* Attach event listener to each and every track the first time the page is loaded.
**/
var listOfSongs = document.getElementById("list-of-songs");
var tracks = listOfSongs.getElementsByClassName("track");
(function addEventListeners(){
for(var i=0, l=tracks.length; i < l; i++){
var track = listOfSongs.getElementsByClassName("track")[i];
track.addEventListener("click",function(e){
e.preventDefault();
informUserAboutTheTrack(e);
});
}
}());
</script>
</body>
</html>
לסיכום
אני מאוד מקווה שהצלחתי להדגים לכם, גם אם רק על קצה המזלג, עד כמה השימוש באירועים חזק ועד כמה הוא יכול לתרום לתכנות של אפליקציות שמגיבות בזמן אמת למשתמש. במדריך הבא, נלמד מהו ההבדל בין משתנים מקומיים לגלובאליים ב- JavaScript.
אהבתם? לא אהבתם? דרגו!
0 הצבעות, ממוצע 0 מתוך 5 כוכבים
המדריכים באתר עוסקים בנושאי תכנות ופיתוח אישי. הקוד שמוצג משמש להדגמה ולצרכי לימוד. התוכן והקוד המוצגים באתר נבדקו בקפידה ונמצאו תקינים. אבל ייתכן ששימוש במערכות שונות, דוגמת דפדפן או מערכת הפעלה שונה ולאור השינויים הטכנולוגיים התכופים בעולם שבו אנו חיים יגרום לתוצאות שונות מהמצופה. בכל מקרה, אין בעל האתר נושא באחריות לכל שיבוש או שימוש לא אחראי בתכנים הלימודיים באתר.
למרות האמור לעיל, ומתוך רצון טוב, אם נתקלת בקשיים ביישום הקוד באתר מפאת מה שנראה לך כשגיאה או כחוסר עקביות נא להשאיר תגובה עם פירוט הבעיה באזור התגובות בתחתית המדריכים. זה יכול לעזור למשתמשים אחרים שנתקלו באותה בעיה ואם אני רואה שהבעיה עקרונית אני עשוי לערוך התאמה במדריך או להסיר אותו כדי להימנע מהטעיית הציבור.
שימו לב! הסקריפטים במדריכים מיועדים למטרות לימוד בלבד. כשאתם עובדים על הפרויקטים שלכם אתם צריכים להשתמש בספריות וסביבות פיתוח מוכחות, מהירות ובטוחות.
המשתמש באתר צריך להיות מודע לכך שאם וכאשר הוא מפתח קוד בשביל פרויקט הוא חייב לשים לב ולהשתמש בסביבת הפיתוח המתאימה ביותר, הבטוחה ביותר, היעילה ביותר וכמובן שהוא צריך לבדוק את הקוד בהיבטים של יעילות ואבטחה. מי אמר שלהיות מפתח זו עבודה קלה ?
השימוש שלך באתר מהווה ראייה להסכמתך עם הכללים והתקנות שנוסחו בהסכם תנאי השימוש.