شرح تفصيلي لإنجاز بعض طرق الأحداث المتعددة المتصفحات باستخدام JavaScript و أمثلة

تحقيق بعض طرق الأحداث المتوافقة عبر المتصفحات باستخدام js

　　باستخدام JavaScript إجراء ربط الأحداث، إزالة الأحداث، وكذلك الحصول على بعض خصائص الأحداث الشائعة، يجب النظر في التوافق عبر المتصفحات المختلفة، ويقدم أدناه نموذجًا للأحداث المتوافقة عبر المتصفحات:

var EventUtil = {
  on: function(element, type, handler) { /* إضافة حدث */
    إذا (element.addEventListener) {
      element.addEventListener(type, handler, false);
    } آخره إذا (element.attachEvent) { // IE ملاحظة: عند هذا الوقت، سين�行 الحدث معبرًا عن نطاق الكائن العالمي، لذا يجب أن تكون على دراية باستخدام attachEvent لت绑定 الحدث، عند هذا الوقت يساوي this في دالة معالج الحدث window، يجب أن تلاحظ عند الاستخدام
      element.attachEvent("on" + type, handler);
    } else {
      element["on" + type] = handler;
    }
  },
  off: function(element, type, handler) { /* إزالة الحدث */
    إذا (element.removeEventListener) {
      element.removeEventListener(type, handler, false);
    } آخره إذا (element.detachEvent) {
      element.detachEvent("on" + type, handler);
    } else {
      element["on" + type] = null;
    }
  },
  getEvent: function(event) { /* العودة إلى مرجع object event */
    return event ? event : window.event;
  },
  getTarget: function(event) { /* العودة إلى هدف الحدث */
    return event.target || event.srcElement;
  },
  preventDefault: function(event) { /* إلغاء تأثير الحدث بشكل افتراضي */
    إذا (event.preventDefault) {
      event.preventDefault();
    } else {
      event.returnValue = false;
    }
  },
  stopPropagation: function(event) { /* توقيف انتقال الحدث */
    إذا (event.stopPropagation) {
      event.stopPropagation();}}
    } else {
      event.cancelBubble = true;
    }
  },
  /* mouseover وmouserout هذان الحدثان يتضمنان تحريك مؤشر الفأرة من حدود عنصر إلى حدود عنصر آخر. */
  getRelatedTarget: function(event) {
    if (event.relatedTarget) {
      return event.relatedTarget;
    } else if (event.toElement) { //IE8 mouserout event
      return event.toElement;
    } else if (event.fromElement) { //IE8 mouseover event
      return event.fromElement;
    } else {
      return null;//Other events
    }
  }
};

الإشارة إلى هنا:

EventUtil.on(document, "click", function(event){//Bind click event to the document element
  event = EventUtil.getEvent(event);//Get the event object
  alert("Screen coordinates: " + event.screenX + "," + event.screenY);
});

المقال مأخوذ من كتاب《JavaScript High Performance Programming》 الطبعة الثالثة

شكرًا على القراءة، آمل أن تكون قد ساعدتكم، شكرًا لدعمكم لهذا الموقع!