שימוש ב-addEventListener ב-JavaScript

על חשיבות השימוש ב-addEventListener וסקריפט קטן ושימושי המאפשר שימוש גם באינטרנט אקספלורר.

אני יודע שלרבים כבר לא יוצא לכתוב JavaScript טהור כמו פעם אלא לרוב משתמשים בספריות כגון MooTools ו-jQuery. אבל לפעמים אנחנו כן משתמשים ב-JavaScript בלבד, במיוחד ל-snippets שונים ומשונים.

אחת הבעיות בהצמדת אירועים באופן הבא:


 el.onclick = function() { alert('hello');};

היא שאם אני מצמיד שני אירועים זהים לאותו אלמנט (תחשבו על window.onload), אחד האירועים ידרוס את השני. דבר שיכול להיות קטלני. לפיכך אנחנו צריכים להשתמש ב-addEventListener. מתודה פשוטה שמאפשרת הוספת כמה וכמה אירועים לכל אלמנט.

הבעיה העיקרית היא שאינטרנט אקספלורר 6-8 לא תומך ב-addEventListener וזה כמובן מתכון לצרות צרורות. פתרון אלגנטי שאני תמיד נוקט בו הוא שימוש בסקריפט הקטן הבא:


/* IE addEventListener */
var addEvent = (function () {
  if (document.addEventListener) {
    return function (el, type, fn) {
      if (el && el.nodeName || el === window) {
        el.addEventListener(type, fn, false);
      } else if (el && el.length) {
        for (var i = 0; i < el.length; i++) {
          addEvent(el[i], type, fn);
        }
      }
    };
  } else {
    return function (el, type, fn) {
      if (el && el.nodeName || el === window) {
        el.attachEvent('on' + type, function () { return fn.call(el, window.event); });
      } else if (el && el.length) {
        for (var i = 0; i < el.length; i++) {
          addEvent(el[i], type, fn);
        }
      }
    };
  }
})();

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


addEvent(el, 'click', function () {
   alert('Hello');
});

כשה-el יכול להיות כל פוינטר שהוא, למשל getElementById:


addEvent(document.getElementById('SOMEID'), 'click', function () {
   alert('Hello');
});

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

פוסטים נוספים שכדאי לקרוא

תמונה של עציץ, רספברי פיי ורמקול
רספברי פיי

לגרום לעציץ שלכם לדבר

כך תשתמשו ברספברי פיי, חיישנים וגם בינה מלאכותית שמותקנת על הרספברי פיי (כן) כדי ליצור… עציץ המדבר.

פתרונות ומאמרים על פיתוח אינטרנט

SSG עם next

אחרי שלמדנו במאמר הקודם מה זה SSR והבנו שלא מדובר בקליע כסף שפותר את כל הבעיות שלנו, נלמד על SSG שיכול להקל על כמה מהבעיות של SSR.

מיקרו בקרים

בית חכם עם ESPHome ו Home Assistant

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

פתרונות ומאמרים על פיתוח אינטרנט

רינדור של קליינט סייד עם SSR

הסבר קצר על SSR מול רינדור קלאסי ולא. לא תמיד זה טוב להשתמש בו. אין כדור כסף שיכול לפתור הכל.

גלילה לראש העמוד