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

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