En ocasiones es necesario cargar dinámicamente algunos métodos de eventos javascript
A menudo necesitamos agregar eventos dinámicamente en JS, lo que implica problemas de compatibilidad del navegador. A menudo utilizamos una combinación de los diversos métodos que se describen a continuación.
Método 1, establecer atributo
var obj = document.getElementById("obj");
obj.setAttribute("onclick", "javascript:alert('prueba');");
Aquí, setAttribute se usa para especificar el atributo onclick, que es simple y fácil de entender.
Sin embargo: IE no lo admite . No es que IE no admita la función setAttribute, pero no admite el uso de setAttribute para establecer ciertos atributos, incluidos atributos de objetos, atributos de colección y atributos de eventos. establecer estilo, al hacer clic y al pasar el mouse. No funciona en IE.
Método 2, use adjuntoEvent y addEventListener
IE admite adjuntar evento
obj.attachEvent("al hacer clic", Foo);
funciónFoo()
{
alerta("Prueba");
}
También se pueden escribir juntos
obj.attachEvent("onclick", function(){alert("prueba");});
Otros navegadores admiten addEventListener
obj.addEventListener("hacer clic", Foo, falso);
funciónFoo()
{
alerta("Prueba");
}
También se pueden escribir juntos.
obj.addEventListener("clic", function(){alert("Prueba");}, false);
Tenga en cuenta que el evento adjuntoEvent está activado, como onclick, pero addEventListener no está activado, como clic.
Por cierto, el tercer parámetro de addEventListener (aunque rara vez se usa) useCapture; si es verdadero, useCapture indica que el usuario desea iniciar la captura. Cuando se inicia la captura, todos los eventos del tipo especificado se enviarán al EventListener registrado antes de enviarse a cualquier EventTarget debajo de él en el árbol. Los eventos que están surgiendo en el árbol no activarán el EventListener especificado mediante la captura.
Aplicación integral
Copie el código de código de la siguiente manera:
si (ventana.attachEvent)
{
//código de evento IE
}
demás
{
//Códigos de evento para otros navegadores
}
Método tres, evento = función
Ejemplo: obj.onclick = Foo;
Esto es compatible con varios navegadores. Pertenece a la especificación anterior (el método 2 pertenece a la especificación DOM2), pero debido a que es fácil de usar, se usa en muchas situaciones.
Aquí está mi solución:
Copie el código de código de la siguiente manera:
función mostrar(){
alert("¡¡Hola mundo!!!");
}
obj.setAttribute('onclick',document.all ? eval(function(){show()}): 'javascript:show()');
El método adjuntoEvent adjunta otros eventos de procesamiento a un evento. (La serie Mozilla no es compatible)
El método addEventListener se utiliza en la serie Mozilla
Ejemplo:
document.getElementById("btn").onclick = método1;
document.getElementById("btn").onclick = método2;
document.getElementById("btn").onclick = método3;
Si se escribe así, sólo se ejecutará medhot3
Escríbelo así:
var btn1Obj = document.getElementById("btn1");
//object.attachEvent(evento,función);
btn1Obj.attachEvent("al hacer clic",método1);
btn1Obj.attachEvent("al hacer clic",método2);
btn1Obj.attachEvent("al hacer clic",método3);
El orden de ejecución es método3->método2->método1
Si es una serie de Mozilla, este método no es compatible y debe usar addEventListener.
var btn1Obj = document.getElementById("btn1");
//element.addEventListener(tipo,oyente,useCapture);
btn1Obj.addEventListener("clic",método1,falso);
btn1Obj.addEventListener("clic",método2,falso);
btn1Obj.addEventListener("clic",método3,falso);
El orden de ejecución es método1->método2->método3
Ejemplos de uso:
1.
Copie el código de código de la siguiente manera:
var el = EDITFORM_DOCUMENT.body;
//Obtén el objeto primero, EDITFORM_DOCUMENT es en realidad un iframe
si (el.addEventListener){
el.addEventListener('hacer clic', KindDisableMenu, falso);
} si no (el.attachEvent){
el.attachEvent('onclick', KindDisableMenu);
}
2.
Copie el código de código de la siguiente manera:
si (ventana.addEventListener) {
window.addEventListener('cargar', _uCO, falso);
} más si (ventana.attachEvent) {
window.attachEvent('cargar', _uCO);
}