שימוש ב-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');
});

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

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

ESP32 מאפס לילדים

מדריך ל-ESP32 לילדים ולהורים מאפס

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

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

המנעו מהעלאת source control לשרת פומבי

לא תאמינו כמה אתרים מעלים את ה-source control שלהם לשרת. ככה תמצאו אותם וגם הסבר למה זה רעיון רע.

ספריות ומודולים

להתנסות ב AutoGPT

הטרנד החם בעולם ה-GPT וה-AI – הפעלת אייג׳נטים בקלות עם Auto GPT.

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