Подробное объяснение реализации методов событий через браузеры и примеры

Реализация некоторых кросс-браузерных методов событий на JavaScript

　　Реализация привязки, удаления событий и получения некоторых常用 свойств событий на JavaScript, часто необходимо учитывать совместимость с различными браузерами, ниже приведен кросс-браузерный объект событий:

var EventUtil = {
  on: function(element, type, handler) { /* Добавление события */
    if (element.addEventListener) {
      element.addEventListener(type, handler, false);
    } else if (element.attachEvent) { // IE Внимание: в этом случае обработчик события выполняется в глобальном контексте, поэтому события, привязанные attachEvent, в этом случае this в обработчике функции равен window, будьте внимательны
      element.attachEvent("on" + type, handler);
    } else {
      element["on" + type] = handler;
    }
  },
  off: function(element, type, handler) { /* Удаление события */
    if (element.removeEventListener) {
      element.removeEventListener(type, handler, false);
    } else if (element.detachEvent) {
      element.detachEvent("on" + type, handler);
    } else {
      element["on" + type] = null;
    }
  },
  getEvent: function(event) { /* Возврат ссылки на объект event */
    return event ? event : window.event;
  },
  getTarget: function(event) { /* Возврат цели события */
    return event.target || event.srcElement;
  },
  preventDefault: function(event) { /* Отменение mặc định hành vi sự kiện */
    if (event.preventDefault) {
      event.preventDefault();
    } else {
      event.returnValue = false;
    }
  },
  stopPropagation: function(event) { /* Предотвращение переброски события */
    if (event.stopPropagation) {
      event.stopPropagation();}}
    } else {
      event.cancelBubble = true;
    }
  },
  /* Эти два события mouseover и mouseout включают перемещение мыши от одного элемента к другому. */
  getRelatedTarget: function(event) {
    if (event.relatedTarget) {
      return event.relatedTarget;
    } else if (event.toElement) {//Событие mouseout в IE8
      return event.toElement;
    } else if (event.fromElement) {//Событие mouseover в IE8
      return event.fromElement;
    } else {
      return null;//Другие события
    }
  }
};

вызов:

EventUtil.on(document, "click", function(event){//Привязать событие click к элементу document
  event = EventUtil.getEvent(event);//Получить объект события event
  alert("Координаты экрана: " + event.screenX + "," + event.screenY);
});

Статья основана на книге «JavaScript High Performance Programming, Third Edition»

Спасибо за чтение, надеюсь, это поможет вам, спасибо за поддержку нашего сайта!