1. Eventos de bolhas
Existem dois tipos de modelos de eventos para navegadores: capturar eventos e eventos de bolhas. Como o IE não suporta eventos de captura, o seguinte usa principalmente eventos de bolha como uma explicação.
(Bolha apelidada) Tipo de bolha refere -se ao evento mais específico ao evento menos específico desencadeado um por um.
A cópia do código é a seguinte:
<corpo onclick = "add ('body <br>')">
<div onclick = "add ('div <br>')">
<PonClick = "Add ('P <BR>')"> Clique em mim </p>
</div>
</body>
<div id = "display">
</div>
<script type = "text/javascript">
função add (stext) {
var ulo = document.getElementById ("display");
ulo.innerhtml += stext;
}
</script>
As três funções acima adicionaram a função OnClick. As três funções após o elemento P independente são disparadas. O elemento P é executado pela primeira vez, depois a div é executada e, finalmente, o corpo é executado.
Aqui, aqui está um lembrete do evento de captura, e sua ordem é exatamente o oposto do evento de bolhas.
2. Monitoramento de eventos
Um evento requer uma função para responder. Esse tipo de função é geralmente chamado de manipulador de eventos. De outra perspectiva, essas funções estão ouvindo em tempo real se ocorre um evento, geralmente chamado de ouvinte de eventos. A função de escuta de eventos é bem diferente para diferentes navegadores.
eu. Método de escuta geral, como o uso do método OnClick, quase todas as tags suportam esse método. E a compatibilidade do navegador é muito alta
Considerando o comportamento, separação de eventos.
Geralmente, monitore usando os seguintes métodos
A cópia do código é a seguinte:
<Body>
<div id = "me"> clique em </div>
<script type = "text/javascript">
var opp = document.getElementById ("me"); // Evento encontrado
opp.OnClick = function () {// Definir função de evento
Alerta ("Fui clicado!")
}
</script>
</body>
Ambos os métodos introduzidos acima são muito convenientes e são amados pelos desenvolvedores da Everbright ao fazer e lidar com algumas pequenas funções. Mas para o mesmo evento. Eles só podem adicionar uma função, como a função OnClick marcada por p. Ambos os métodos podem ter apenas uma função. Portanto, o IE possui sua própria solução, colegas e DOM padrão estipula outro método.
ii. Método de monitoramento no IE
No navegador da manhã, cada elemento tem dois métodos para lidar com a escuta do tempo.
são onetEvent () e desapenevt (), respectivamente.
Como você pode ver nos nomes de funções deles, o alpenENeVT () é uma função usada para adicionar processamento de eventos a um elemento, enquanto o Detachevent () é usado para excluir a função de escuta no elemento. A sintaxe deles é a seguinte:
[Object] .attachevent ("ENEVT_HANDLER", "FNHANDLER");
[objeto] .Detachevent ("ENEVT_HANDLER", "FNHANDLER");
Entre eles, Enevt_Handler representa comumente usada OnClick, Onload, OnMouseOver, etc.
FNHandler é o nome da função do ouvinte.
Na seção anterior, você pode usar o método AnextEvent () em vez de adicionar a função de escuta. Ao clicar nele, você pode usar o Detachevent () para excluir a função de escuta para que ele não seja executado após o próximo clique.
A cópia do código é a seguinte:
<script type = "text/javascript">
função fnClick () {
alerta ("Fui clicado!");
op.Detachevent ("OnClick", "FnClick");
}
var op;
window.onload = function () {
op = document.getElementById ("oop"); // Encontre o objeto
op.attachevent ("OnClick", "fnClick"); // Adicione uma função do ouvinte
}
</script>
<div>
<p id = "oop">
</p>
</div>
iii. Adicione vários eventos de escuta (ou seja)
A cópia do código é a seguinte:
<Script Language = "JavaScript">
função fnClick1 () {
alerta ("Fui clicado por fnClick1");
}
função fnClick2 () {
Alert ("Fui clicado por FnClick2");
//op.detachevent("OnClick",FNCLICK1); // Exclua a função do ouvinte 1
}
var op;
window.onload = function () {
op = document.getElementById ("myp"); // Encontre o objeto
op.attachevent ("OnClick", fnClick1); // Adicionar função do ouvinte 1
op.attachevent ("OnClick", fnClick2); // Adicione a função do ouvinte 2
}
</script>
</head>
<Body>
<div>
<p id = "myp"> clique em mim </p>
</div>
3. Monitoramento padrão de eventos DOM
Com os dois métodos do IE, o DOM padrão também usa dois métodos para adicionar e excluir a função do ouvinte, respectivamente. ou seja, addEventListener () e removeventListener ()
Ao contrário do IE, essas duas funções aceitam 3 parâmetros, a saber, o nome do evento, o nome da função a ser atribuído e se é usado para o estágio de bolha ou o estágio de captura. Os parâmetros do estágio de captura são verdadeiros e os parâmetros do estágio da bolha são falsos. A sintaxe é a seguinte:
A cópia do código é a seguinte:
[Object] .AddeventListener ("Event_Name", FNHandler, BCAPTURA);
[Object] .RemoveEventListener ("Event_Name", FNHandler, BCAPTURA);
Os métodos de uso dessas duas funções são basicamente semelhantes ao IE, mas você deve observar que o nome de event_name é "clique", "mouseOver" etc., em vez de "OnClick" e "onMouseOver" no ie.
Além disso, o terceiro parâmetro bcapture geralmente é definido como falso, no estágio de borbulha.
Método padrão de escuta de eventos DOM:
A cópia do código é a seguinte:
<Script Language = "JavaScript">
função fnClick1 () {
alerta ("eu fui clicado 1");
op.removeEventListener ("clique", fnClick1, false);
}
função fnClick2 () {
alerta ("eu fui clicado 2");
}
window.onload = function () {
op = document.getElementById ("myp");
op.addeventListener ("Clique", fnClick1, false);
op.addeventListener ("clique", fnClick2, false);
}
</script>
<div>
<p id = "myp"> clique em mim </p>
</div>
Você pode testar a ordem de execução específica.
O exposto acima é tudo sobre este artigo, espero que gostem.