Menos tonterías, solo da el código de ejemplo:
La copia del código es la siguiente:
<script type = "text/javaScript">
función eventUtil () {
var _elf = this;
/// Agregar evento
var addEvent = (function () {
if (document.addeventListener) {
Función de retorno (El, type, fn) {
el.AdDeventListener (tipo, fn, falso);
}
} demás {
Función de retorno (El, type, fn) {
el.attachevent ("on" + type, function () {
return fn.call (el, window.event);
});
}
}
}) ();
/// Agregar atributos para cambiar el evento
var addPropertyChangeEvent = function (obj, fn) {
if (window.activexObject) {
obj.onpropertychange = fn;
} demás {
obj.addeventListener ("entrada", fn, falso);
}
}
// eliminar el evento
var removevent = function (obj, type, fn) {
if (obj.removeEventListener) {
obj.removeEventListener (tipo, fn, falso);
} else if (obj.detachevent) {
obj.detachevent ("on" + type, obj ["on" + type + fn]);
obj ["on" + type + fn] = null;
}
}
// Evento de carga
var lowvent = function (fn) {
var OldonLoad = Window.Onload;
if (typeof oldonload! = "function") {
Window.Onload = fn;
} demás {
window.onload = function () {
oldonload ();
fn ();
}
}
}
// Bloquear eventos
var stOpeVent = function (e) {
E = E || Window.event;
if (e.preventDefault) {
E.PreventDefault ();
E.stoppropagation ();
} demás {
e.returnValue = false;
E.CancelBubble = True;
}
}
// Si es solo para evitar que el evento burbujee
var stopPropagation = function (e) {
E = E || Window.event;
if (!+"/v1") {
E.CancelBubble = True;
} demás {
E.stoppropagation ();
}
}
// Obtener el objeto de origen del evento
var getEvent1 = function (e) {
E = E || Window.event;
var obj = e.srelement? E.Sricelement: E.Target;
regresar obj;
}
// Obtener el objeto de origen del evento
var getEvent2 = function (e) {
if (window.event) return window.event;
var c = getEvent2.caller;
while (C.Caller) {
c = C.Caller;
}
devolver c.argumentos [0];
}
// o esta función es más potente
var getEvent3 = function (e) {
var e = e || Window.event;
if (! e) {
var c = this.getEvent3.caller;
mientras (c) {
e = c.argumentos [0];
if (e && (event == E.Constructor || MouseEvent == E.Constructor)) {
romper;
}
c = C.Caller;
}
}
VAR Target = E.Srcelement? E.Sricelement: E.Target,
currentn = target.nodename.tolowercase (),
parentn = target.parentnode.nodename.tolowercase (),
grandn = Target.ParentNode.ParentNode.nodename.tOlowerCase ();
return [e, Target, Currentn, Parentn, Grandn];
}
_self.addevent = addEvent;
_Self.AddPropertyChangeEvent = addPropertyChangeEvent;
_self.removeEvent = removeVent;
_Self.loadEvent = Loadvent;
_Self.stopEvent = stopEvent;
_self.stoppropagation = stopPropagation;
_self.getEvent1 = getEvent1;
_self.getEvent2 = getEvent2;
_self.getEvent3 = getEvent3;
}
var eventUtil = new EventUtil ();
eventUtil.loadevent (function () {
eventUtil.addevent (documento, "hacer clic", función (e) {
alerta (eventUtil.getEvent3 (e));
});
eventUtil.AddPropertyChangeEvent (documento, función (e) {
alerta (eventUtil.getEvent3 (e));
});
});
</script>
El procesamiento de eventos de JavaScript se divide en tres etapas: burbujas de procesamiento de captura.
Tomemos hacer clic en el botón como ejemplo:
Etapa de captura: desde la capa externa hasta la capa interna, primero llame al método de monitoreo de la etapa de captura de clics registrado para la ventana, luego documento, cuerpo, nodos parientes capa por capa, hasta el botón en sí.
Fase de procesamiento: llame al método de escucha de clic del botón en sí.
Etapa de burbuja: comenzando desde el botón, desde la capa interna hasta la capa externa, llame al método de monitoreo de la etapa de burbujas de los nodos principales en cada nivel en secuencia hasta la ventana.
Sin embargo, para IE8 e IE inferior, la fase de captura no es compatible, por lo que la escucha de eventos en la fase de captura aún no es común.
El método de manejo de eventos habitual es:
La copia del código es la siguiente:
función eventHandler (e) {
E = E || Window.event;
Var Target = E.Target || E.Sracelement;
...
}
E es un objeto de evento. Cuando se activa el evento, se pasa como parámetro. Sin embargo, no es aplicable a IE8 y versiones más bajas de IE. Solo se puede acceder a través de la variable de evento global. Afortunadamente, no habrá situación en la que se procesen dos eventos al mismo tiempo.