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

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

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

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

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


יאללה, שתפו :)

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

כתיבת תגובה

האימייל לא יוצג באתר.

רישום