Spiegazione dettagliata e esempi di implementazione di alcuni metodi di eventi multi-browswer in JavaScript

Metodi di evento cross-browser implementati in JavaScript

　　Implementare il binding degli eventi, la rimozione degli eventi e l'acquisizione di alcune proprietà degli eventi di uso comune in JavaScript, spesso deve considerare la compatibilità tra browser diversi, di seguito è fornito un oggetto evento cross-browser:

var EventUtil = {
  on: function(element, type, handler) { /* 添加事件 */
    if (element.addEventListener) {
      element.addEventListener(type, handler, false);
    } else if (element.attachEvent) { //IE Attenzione: in questo caso il gestore degli eventi viene eseguito nell'ambito globale, quindi gli eventi associati con attachEvent, in questo momento, equivalgono a window this all'interno della funzione di gestione degli eventi, quindi attenzione quando si utilizza
      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) { /* 取消事件的默认行为 */
    if (event.preventDefault) {
      event.preventDefault();
    } else {
      event.returnValue = false;
    }
  },
  stopPropagation: function(event) { /* 阻止事件冒泡 */
    if (event.stopPropagation) {
      event.stopPropagation();}}
    } else {
      event.cancelBubble = true;
    }
  },
  /* Questi due eventi mouseover e mouserout coinvolgono il movimento del puntatore del mouse da un elemento al limite di un altro elemento. */
  getRelatedTarget: function(event) {
    if (event.relatedTarget) {
      return event.relatedTarget;
    } else if (event.toElement) {//Evento mouserout di IE8
      return event.toElement;
    } else if (event.fromElement) {//Evento mouseover di IE8
      return event.fromElement;
    } else {
      return null;//Altri eventi
    }
  }
};

Chiamata come segue:

EventUtil.on(document, "click", function(event){//Associare l'evento click all'elemento document
  event = EventUtil.getEvent(event);//Ottieni l'oggetto evento event
  alert("Coordinate dello schermo: " + event.screenX + "," + event.screenY);
});

Articolo tratto da 'JavaScript High Performance Programming Third Edition'

Grazie per la lettura, spero che possa aiutarti, grazie per il supporto al nostro sito!