שימוש ב-addEventListener ב-JavaScript

אני יודע שלרבים כבר לא יוצא לכתוב 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');
});

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

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

אהבתם? לא אהבתם? דרגו!

לא אהבתי בכלללא אהבתיבסדראהבתיאהבתי מאוד (אין הצבעות)


אל תשארו מאחור! יש עוד מה ללמוד!

הצטרפו לעדכונים!

העדכונים נשלחים אך ורק כאשר האתר מתעדכן.

רן בר-זיק

רן בר-זיקכותב כל המאמרים באינטרנט ישראל, מפתח אינטרנט מנוסה במגוון שפות ופלטפורמות.
ניתן ליצור איתי קשר באמצעות:
כתובת המייל שלי: info@internet-israel.com.
פרופיל הלינקדאין שלי

הטוויטר שלי

פרופיל הפייסבוק שלי

אני תמיד שמח לייעץ ולעזור, אך בשל עומס הפניות הרב, אני לא תמיד מצליח לענות במהירות.