Skip to content

بناء مكتبة جافاسكريبت من الصفر ـ الجزء الثاني

بناء مكتبة جافاسكريبت من الصفر ـ الجزء الثاني

6 أبريل 2015 | 00:00

في هذا الجزء من دورة بناء مكتبة جافاسكريبت من الصفر سنرى كيفية إضافة دوال الأحداث Events Methods. الدالة bind ستقوم بإضافة الحدث إلى عنصر أوعناصر معينة بينما ستقوم دالة unbind بدور عكسي وهو تجريد العنصر من هذا الحدث.(تما كما هو الحال عند استعمال مكتبة جيكويري jQuery).

الكود البرمجي

function o(selector) {
  if (this == window) {
    return new o(selector);
  }
  if (typeof selector == "string") {
    this.el = Sizzle(selector);
  } else if (typeof selector == "object" && selector.nodeType != "undefined") {
    this.el = selector;
  } else {
    throw "Invalid selector!";
  }
}
 
o.prototype.bind = function (event, callback) {
  if (o.isArray(this.el)) {
    this.el.forEach(function (elm) {
      o.addEvent(elm, event, callback);
    });
  } else {
    o.addEvent(this.el, event, callback);
  }
  return this;
};
o.prototype.unbind = function (event, callback) {
  if (o.isArray(this.el)) {
    this.el.forEach(function (elm) {
      o.removeEvent(elm, event, callback);
    });
  } else {
    o.removeEvent(this.el, event, callback);
  }
  return this;
};
o.prototype.show = function () {
  this.el.forEach(function (elm) {
    elm.style.display == "none" && (elm.style.display = "");
  });
};
o.prototype.hide = function () {
  this.el.forEach(function (elm) {
    elm.style.display = "none";
  });
};
 
o.addEvent = function (el, event, callback) {
  el.addEventListener(event, callback);
};
o.removeEvent = function (el, event, callback) {
  el.removeEventListener(event, callback);
};
o.isArray =
  Array.isArray ||
  function (obj) {
    return obj instanceof Array;
  };

شاهد الفيديو للمزيد من التفاصيل:

إنضموا إلى نشرتنا البريدية أسفله للتوصل بآخر الدروس المرئية والمكتوبة.

عيسى محمد علي
عيسى محمد علي
مطور ويب متخصص في الواجهات الأمامية، أحب التدوين وإغناء المحتوى التقني للغة الضاد وهذا كان السبب الرئيسي في إنشائي لمدونة توتومينا.