Menos bobagem, basta dar o código de exemplo:
A cópia do código é a seguinte:
<script type = "text/javascript">
função eventUtil () {
var _elf = this;
/// Adicionar evento
var addEvent = (function () {
if (document.addeventListener) {
Função de retorno (el, tipo, fn) {
el.addeventListener (tipo, fn, falso);
}
} outro {
Função de retorno (el, tipo, fn) {
el.attachevent ("on" + tipo, function () {
retornar fn.call (el, window.event);
});
}
}
}) ();
/// Adicionar atributos para mudar o evento
var addPropertyChangeEvent = function (obj, fn) {
if (window.activexObject) {
obj.onPropertyChange = fn;
} outro {
obj.addeventListener ("entrada", fn, false);
}
}
// Remova o evento
var remoTevent = function (obj, tipo, fn) {
if (obj.removeEventListener) {
obj.removeEventListener (tipo, fn, false);
} else if (obj.detachevent) {
obj.detachevent ("on" + tipo, obj ["on" + type + fn]);
obj ["on" + type + fn] = null;
}
}
// Evento de carregamento
var loadevent = função (fn) {
var OldOnLload = Window.OnLload;
if (typeof Oldonload! = "function") {
window.onload = fn;
} outro {
window.onload = function () {
OldonLoad ();
fn ();
}
}
}
// Eventos de bloqueio
var stopevent = função (e) {
e = e || Window.Event;
if (e.preventDefault) {
E.PreventDefault ();
E.StopPropagation ();
} outro {
e.returnValue = false;
e.cancelbubble = true;
}
}
// se for apenas para impedir que o evento borbulhou
var stopPropagation = function (e) {
e = e || Window.Event;
if (!+"/v1") {
e.cancelbubble = true;
} outro {
E.StopPropagation ();
}
}
// Obtenha o objeto de origem do evento
var getEvent1 = function (e) {
e = e || Window.Event;
var obj = e.srcement? E.SrceMent: E.Target;
retornar obj;
}
// Obtenha o objeto de origem do evento
var getEvent2 = function (e) {
if (window.event) retorna janela.event;
var c = getEvent2.Caller;
while (c.caller) {
C = C.Caller;
}
retornar c.arguments [0];
}
// ou esta função é mais poderosa
var getEvent3 = function (e) {
var e = e || Window.Event;
if (! e) {
var c = this.getevent3.Caller;
enquanto (c) {
e = c.argumentos [0];
if (e && (event == e.constructor || mouseevent == e.constructor)) {
quebrar;
}
C = C.Caller;
}
}
VAR Target = E.SrceMplement? e.srcelement: E.Target,
currentn = Target.nodename.tolowerCase (),
parentn = Target.parentnode.nodename.tolowercase (),
avin = Target.parentnode.parentnode.nodename.tolowercase ();
retornar [E, Target, Currentn, Geren, Grandn];
}
_self.adDevent = addEvent;
_self.addPropertyChangeEvent = addPropertyChangeEvent;
_self.removeEvent = Remonevent;
_self.Loadevent = loadevent;
_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, "clique", função (e) {
alerta (eventUtil.getevent3 (e));
});
eventUtil.addPropertyChangeEvent (documento, função (e) {
alerta (eventUtil.getevent3 (e));
});
});
</script>
O processamento de eventos JavaScript é dividido em três estágios: Bubbles de processamento de captura.
Pegue clicando no botão como exemplo:
Fase de captura: da camada externa até a camada interna, primeiro chame o método de monitoramento do estágio de captura de clique, registrado para a janela e depois documente, corpo, nós dos pais pai camada por camada, até o próprio botão.
Fase de processamento: ligue para o método de escuta do clique do próprio botão.
Estágio da bolha: começando no botão, da camada interna à camada externa, chame o método de monitoramento do estágio da bolha dos nós pais em cada nível em sequência até a janela.
No entanto, para o IE8 e o IE inferior, a fase de captura não é suportada; portanto, a escuta de eventos na fase de captura ainda não é comum.
O método usual de manuseio de eventos é:
A cópia do código é a seguinte:
função EventHandler (e) {
e = e || Window.Event;
VAR Target = E.Target || E.Srcelement;
... ...
}
E é um objeto de evento. Quando o evento é acionado, ele é passado como um parâmetro. No entanto, não é aplicável ao IE8 e versões mais baixas do IE. Ele só pode ser acessado através da variável de eventos globais. Felizmente, não haverá situação em que dois eventos sejam processados ao mesmo tempo.