Explicación detallada y ejemplos de implementación de métodos de eventos cruzados de navegador en JavaScript

js实现一些跨浏览器的事件方法

　　用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) { /* 取消事件的默认行为 */
    if (event.preventDefault) {
      event.preventDefault();
    } else {
      event.returnValue = false;
    }
  },
  stopPropagation: function(event) {/* Detener la propagación del evento */
    if (event.stopPropagation) {
      event.stopPropagation();
    } else {
      event.cancelBubble = true;
    }
  },
  /* Los eventos mouseover y mouserout involucran mover el puntero del ratón de un borde de elemento a otro dentro de los elementos.*/
  getRelatedTarget: function(event) {
    if (event.relatedTarget) {
      devolver event.relatedTarget;
    } else if (event.toElement) {//IE8 Evento mouserout
      devolver event.toElement;
    } else if (event.fromElement) {//IE8 Evento mouseover
      devolver event.fromElement;
    } else {
      devolver null;//Otros eventos
    }
  }
});

Llamar como se muestra a continuación:

EventUtil.on(document, "click", function(event){//Asociar el evento de click al elemento del documento
  event = EventUtil.getEvent(event);//Obtener el objeto de evento
  alert("Coordenadas de pantalla: " + event.screenX + " + event.screenY);
});

El artículo se refiere a la tercera edición de 'Programación Avanzada en JavaScript'

Gracias por leer, espero que pueda ayudar a todos, gracias por el apoyo a este sitio!