פרק 13 - addEvenetListener

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

הדרך השנייה היא להגדיר אירוע דרך ג׳אווהסקיפט בעזרת המתאם הDOM.  

 

עד עכשיו בצורה שלמדנו, האירוע שהגדרנו, לדוגמא שלחיצה על כפתור יחליף צבע, תתבצע תמיד, כלומר מהרגע שהגדרנו את הכפתור יהיה אפשר ללחוץ עליו.

כעת בעזרת הDOM, אנו נוכל או למצוא אלמנטים קיימים/ליצור אלמנטים חדשים, ולהגדיר להם להתחיל להקשיב לאירוע, או לחילופין להפסיק להקשיב לאירוע. 

 

איך עושים זאת? 

דבר ראשון: נמצא את האלמנט בDOM 

דבר שני: נגדיר לאלמנט להתחיל להקשיב לאירוע ספציפי בעזרת הפונקציה ()addEventListener.

נראה דוגמא:

‏‏צילום מסך (85)

אתם כבר אמורים להבין כמעט כל מה שקורה בדוגמא. הדבר היחיד שמתחדש לנו פה זה הפונקציה ()addEventListener: 

הפונקציה מקבלת 2 דברים: 

  1. סוג האירוע שאנו רוצים שיתבצע. במקרה שלנו לחיצה. 
  2. הפונקציה שאנו רוצים שתתבצע. 

ברגע שהגדרנו את זה, אז כל פעם שילחצו על האלמנט ששמור בתוך mydiv – הפונקציה changeBackground תתבצע.  יש? 

()removeEventListener. 

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

‏‏צילום מסך (86)

כלומר נכניס לתוך הפונקציה את אותו סוג אירוע שהגדרנו בהאזנה, ואיזה פונקציה אנחנו רוצים שהוא יפסיק להאזין לה! 

משימה

  1. בצעו את המשימות מהפרק הקודם, אך הפעם את ההאזנות תוסיפו בעזרת addEventListener. 
  2. זוכרים את המשימה הזאת: תיצרו מערך של אנשים וימי הולדת. כלומר בכל תא במערך יש עוד מערך שיש בתא הראשון שלו שם של אדם, ואת תאריך יום ההולדת שלו. כתבו פונקציה המקבלת את המערך הזה, עוברת עליו בלולאת for, ומאחלת מזל טוב למי שיש יום הולדת. עכשיו תוסיפו כפתור שברגע שתלחצו עליו – הפונקציה תתבצע. תוסיפו גם פסקה שמסבירה מה מתבצע בתוכנית.
  3. באותו אופן: חזרו אחורה למספר משימות שבצעתם ועבדתם קשה עליהם, ותוסיפו להם כפתור שיפעיל אותם… תוסיפו עוד אלמנטים של כותרות/פסקאות/תמונות שיהפכו את התוכנית שלכם ליותר אטרקטיבית. (השלב הבא יהיה כבר להציג את התוצאה של הפונקציה ישירות על הדף במקום לקונסול) 

סיכום 

למדנו על האזנות דינאמיות דרך ג׳אווהסקריפט.

אפשר להוסיף האזנה לאירוע, ובאותו אופן להוריד האזנה לאירוע. 

יחסית פשוט לא? 

כל הזכויות שמורות לבנימין טק

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

Instagram Facebook

שלחו פרטים

וניצור איתכם קשר

שלחו פרטים

וניצור איתך קשר

שלחו פרטים

וניצור איתכם קשר

שאלה מעולה :)

חלל עבודה משותף (המכונה באנגלית: Coworking Space) הוא סביבת עבודה שבה מתאספים פרטים וחברות שונות, בדרך כלל בתחילת דרכן או כשהן בשלבי התפתחות, לשם פעילות עסקית.

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

אדם הבוחר לעבוד מתוך מתחם עבודה יכול להשקיע את עיקר זמנו בפיתוח העסק שלו ופחות באדמיניסטרציה. כל מה שקשור להוצאות המשרד, מדפסות, ריהוט, אינטרנט, ניקיון, חדרי ישיבות וכו' הוא מקבל כחלק מהשירות שמציעות החברה שמספקת את חלל העבודה המשותף.

מטרה משנית של חלל העבודה המשותף היא יצירת קהילה עסקית- חברתית.

מתוך ״ויקיפדיה״