נגישות       נגישות
שינוי גודל טקסט:
א א א
שינוי צבעי האתר:
? מקשי קיצור:

לחיצה חוזרת ונשנית על המקש Tab תעביר אתכם בין הקישורים והאזורים השונים בעמוד.

הפעלת מקשי הקיצור תלויה בדפדפן שבו אתם משתמשים.

Internet Explorer, Chrome ובגרסאות ישנות של Firefox: לחצו על מקש Alt ועל מקש המספר או האות על-פי הרשימה. ב Firefox 3 ומעלה: לחצו על המקשים Alt + Shift + המספר או האות.

S - עבור לתוכן הדף
L - חיפוש
1- עמוד הבית
2 - פרוייקטים
3 - מדריכים
4 - אודות
5 - צרו קשר
6 - הצהרת נגישות
 

אירועים ומאזינים לאירועים ב-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="http://reshetech.co.il" id="myLink">
לחץ עליי!
</a>

<script>

// 1. מאזין ללחיצה על הלינק
// 2. מונע את ההתנהגות הדיפולטית
// 3. מקפיץ פופ-אפ במקום לפתוח את הלינק

document.getElementById("myLink").
addEventListener("click", function( e ){ 
    e.preventDefault();

    popUp(); 
});

// הפונקציה שנקראת בתגובה לאירוע מקפיצה פופאפ

function popUp() {
    alert(" במקום לפתוח דף חדש ");
}
</script>
</body>
</html>

 

דוגמת קוד שקצת יותר דומה לחיים האמיתיים

הדוגמה הבאה קצת יותר מורכבת, אבל יכולה לסייע לכם להבין את הנושאים שלמדנו עד כה בדרך טובה יותר.

הדוגמה מציגה רשימה של 3 שירים, כשלחיצה על כל אחד משמות השירים מעדכן את השיר שמוצג עכשיו. זו דוגמה קצת יותר דומה לחיים האמיתיים, שמדגימה את הנושאים הבאים:

  1. הצמדת אירוע לאלמנט (במקרה זה, בתוך לולאה).
  2. האזנה לאירוע.
  3. כשמקליקים על הלינק, מניעת האירוע הדיפולטי באמצעות e.preventDefault
  4. שינוי הטקסט המוצג בהתאם לכפתור שעליו לחצו.

Choose a song:

Now playing: N/A

וזה הקוד:

<!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.

לכל מדריכי ה- JavaScript

 

הוסף תגובה חדשה

 

= 9 + 2