הבלוג של chv 𐧺 מושגים בסיסיים ב-js: מאזין listener

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

מאזין - הוא אלמנט בקוד שרץ כל הזמן וממתין לאירועים מסוימים.

כלומר - אם לדוגמא אנחנו רוצים שכאשר המשתמש לוחץ על משהו מסוים - תרוץ פונקציה מסוימת - נצמיד לאירוע הזה מאזין (שמקושר לאלמנט הרצוי). נגיד שמדובר באלמנט ב-html שלנו ואנחנו רוצים שכשהוא נלחץ יקרה משהו - נצמיד מאזין לאירוע הנקרא - click - "לחיצה".

דוגמא פשוטה למאזין כזה:

<!DOCTYPE html>
<html>
  <head>
    <title>דוגמא למאזין</title>
  </head>
  <body>
    <p id="element">לחץ עליי</p>
  </body>
  <script>
    document.getElementById("element").addEventListener("click", function () {
      alert("!!נלחץ");
    });
  </script>
</html>

בשורות של הסקריפט עצמו אנחנו בוחרים את האלמנט (document.getElementById("element")) ומוסיפים לו מאזין - addEventListener - הפרמטר הראשון שאחרי זה הוא למה המאזין יאזין - במקרה שלנו לאירוע click - לחיצה. ואז יריץ את הפונקציה שבסופו של דבר עושה ;("!!נלחץ")alert.

(ב-html בסיסי לא צריך להסתבך כך כדי להוסיף מאזינים, זה כבר מובנה ב-html להוסיף בתוך ההצהרה על אלמנט - האזנות. כגון - <p onclick="do()"> פשוט יריץ את הפונקציה do כשלוחצים על האלמנט. אבל במקרים יותר מפורטים חייבים להשתמש במאזין כמו למעלה).

או בקיצור כל דבר שאנחנו רוצים שייקרה רק כאשר קורה משהו, אירוע, מחוץ לאפליקציה שלנו (בין אם זה המשתמש ובין אם זה אירוע חיצוני כגון איזה הוראה מ-webhook וכו') אנחנו צריכים להאזין לאירוע הזה.

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

כדי ללמוד על הפרמטרים והמבנה של מאזיני האירועים של html רגיל - אפשר לראות כאן או כאן.