Às vezes é necessário carregar dinamicamente alguns métodos de eventos javascript
Freqüentemente precisamos adicionar eventos dinamicamente em JS, o que envolve problemas de compatibilidade do navegador. Freqüentemente usamos uma mistura dos vários métodos discutidos abaixo.
Método 1, setAttribute
var obj = document.getElementById("obj");
obj.setAttribute("onclick", "javascript:alert('test');");
Aqui, setAttribute é usado para especificar o atributo onclick, que é simples e fácil de entender.
No entanto: o IE não oferece suporte . Não é que o IE não suporte a função setAttribute, mas não suporta o uso de setAttribute para definir determinados atributos, incluindo atributos de objeto, atributos de coleção e atributos de evento. definir estilo, onclick e onmouseover Não funciona no IE.
Método 2, use attachmentEvent e addEventListener
IE suporta attachmentEvent
obj.attachEvent("onclick", Foo);
funçãoFoo()
{
alerta("Teste");
}
Também pode ser escrito junto
obj.attachEvent("onclick", function(){alert("teste");});
Outros navegadores suportam addEventListener
obj.addEventListener("clique", Foo, falso);
funçãoFoo()
{
alerta("Teste");
}
Também pode ser escrito junto
obj.addEventListener("clique", function(){alert("Teste");}, false);
Observe que o evento attachmentEvent está ativado, como onclick, mas o addEventListener não está ativado, como click.
A propósito, o terceiro parâmetro de addEventListener (embora raramente usado) useCapture - se verdadeiro, useCapture indica que o usuário deseja iniciar a captura. Quando a captura é iniciada, todos os eventos do tipo especificado serão despachados para o EventListener registrado antes de serem despachados para qualquer EventTargets abaixo dele na árvore. Os eventos que estão surgindo na árvore não dispararão o EventListener especificado usando a captura.
Aplicação abrangente
Copie o código do código da seguinte forma:
se (janela.attachEvent)
{
//Código do evento do IE
}
outro
{
//Códigos de eventos para outros navegadores
}
Método três, evento = função
Exemplo: obj.onclick = Foo;
Isto é suportado em vários navegadores. Pertence à especificação antiga (o Método 2 pertence à especificação DOM2), mas por ser fácil de usar, é usado em muitas situações.
Aqui está minha solução:
Copie o código do código da seguinte forma:
função mostrar(){
alerta("Olá, mundo!!!");
}
obj.setAttribute('onclick',document.all ? eval(function(){show()}) : 'javascript:show()');
O método attachmentEvent anexa outros eventos de processamento a um evento. (Série Mozilla não suportada)
O método addEventListener é usado na série Mozilla
Exemplo:
document.getElementById("btn").onclick = método1;
document.getElementById("btn").onclick = método2;
document.getElementById("btn").onclick = método3;
Se escrito assim, apenas medhot3 será executado
Escreva assim:
var btn1Obj = document.getElementById("btn1");
//object.attachEvent(evento,função);
btn1Obj.attachEvent("onclick",método1);
btn1Obj.attachEvent("onclick",método2);
btn1Obj.attachEvent("onclick",método3);
A ordem de execução é método3->método2->método1
Se for uma série Mozilla, este método não é suportado e você precisa usar addEventListener.
var btn1Obj = document.getElementById("btn1");
//element.addEventListener(tipo,ouvinte,useCapture);
btn1Obj.addEventListener("clique",método1,falso);
btn1Obj.addEventListener("clique",método2,falso);
btn1Obj.addEventListener("clique",método3,falso);
A ordem de execução é método1->método2->método3
Exemplos de uso:
1.
Copie o código do código da seguinte forma:
var el = EDITFORM_DOCUMENT.body;
//Obtenha o objeto primeiro, EDITFORM_DOCUMENT é na verdade um iframe
if (el.addEventListener){
el.addEventListener('clique', KindDisableMenu, falso);
} senão if (el.attachEvent){
el.attachEvent('onclick', KindDisableMenu);
}
2.
Copie o código do código da seguinte forma:
if (window.addEventListener) {
window.addEventListener('carregar', _uCO, falso);
} senão if (window.attachEvent) {
window.attachEvent('onload', _uCO);
}