1. Fluxo de eventos
Os fluxos de eventos descrevem a ordem em que os eventos são recebidos da página. Mas o IE propõe fluxos de bolhas, enquanto o Netscape Communicator propõe fluxos de captura.
Stream de eventos JavaScript
2. Bolha de eventos
O evento começa a ser recebido pelo elemento mais específico (o nó com a hierarquia de nidificação mais profunda) e, em seguida, propaga -se passo a passo para nós para nós menos específicos (documento). do seguinte modo:
A cópia do código é a seguinte:
<html>
<head>
<title> Evento Bubbling </title>
</head>
<Body>
<div id = "mydiv"> clique em mim </div>
</body>
</html>
window.onload = function () {
var obj = document.getElementById ("teste");
obj.OnClick = function () {
alerta (this.TagName);
};
document.body.OnClick = function () {
alerta (this.TagName);
};
document.documentElement.OnClick = function () {
alerta (this.TagName);
};
Document.OnClick = function () {
alerta ("documento");
};
Window.OnClick = function () {
alerta ("janela");
}
};
Ordem de propagação de eventos: Div-> Body-> html-> documento
Perceber:
Todos os navegadores modernos suportam eventos de bolhas, mas existem algumas diferenças na implementação. As bolhas de eventos no IE5.5 e as versões anteriores saltarão diretamente do corpo para o documento (nenhum HTML é executado). Eventos de bolha do Firefox, Chrome e Safari até o objeto da janela.
3. Pare as bolhas de eventos e cancelam eventos padrão
um. Obtenha o objeto de evento
A cópia do código é a seguinte:
função getEvent (evento) {
// window.event ie
// Evento que não
Evento de retorno || Window.Event;
}
B Função: Stop Event Bubbles
A cópia do código é a seguinte:
função stopbubble (e) {
// Se um objeto de evento for fornecido, este é um navegador que não
if (e && e.stopPropagation) {
// Portanto, ele suporta o método stopPropagation () de W3c
E.StopPropagation ();
} outro {
// Caso contrário, precisamos usar o IE para cancelar a bolha do evento
window.Event.cancelbubble = true;
}
}
c. Bloquear o comportamento padrão do navegador
A cópia do código é a seguinte:
função stopdefault (e) {
// Block Padrão do navegador Ação (W3C)
if (e && e.preventDefault) {
E.PreventDefault ();
} outro {
// Como bloquear a ação padrão da função no ie
window.Event.ReturnValue = false;
}
retornar falso;
}