Manchmal ist es notwendig, einige Methoden von Javascript-Ereignissen dynamisch zu laden
Oftmals müssen wir Ereignisse dynamisch in JS hinzufügen, was Probleme mit der Browserkompatibilität mit sich bringt. Wir verwenden häufig eine Mischung der verschiedenen unten beschriebenen Methoden.
Methode 1, setAttribute
var obj = document.getElementById("obj");
obj.setAttribute("onclick", "javascript:alert('test');");
Hier wird setAttribute verwendet, um das Onclick-Attribut anzugeben, das einfach und leicht zu verstehen ist.
Allerdings: Der IE unterstützt die Funktion setAttribute nicht , aber er unterstützt nicht die Verwendung von setAttribute zum Festlegen bestimmter Attribute, einschließlich Objektattributen, Sammlungsattributen und Ereignisattributen set style, onclick und onmouseover Es funktioniert nicht im IE.
Methode 2: Verwenden Sie attachmentEvent und addEventListener
IE unterstützt attachmentEvent
obj.attachEvent("onclick", Foo);
functionFoo()
{
alarm("Test");
}
Kann auch zusammen geschrieben werden
obj.attachEvent("onclick", function(){alert("test");});
Andere Browser unterstützen addEventListener
obj.addEventListener("click", Foo, false);
functionFoo()
{
alarm("Test");
}
Es kann auch zusammen geschrieben werden
obj.addEventListener("click", function(){alert("Test");}, false);
Beachten Sie, dass das attachmentEvent-Ereignis aktiviert ist, beispielsweise onclick, der addEventListener jedoch nicht aktiviert ist, beispielsweise click.
Übrigens ist der dritte Parameter von addEventListener (obwohl selten verwendet) useCapture – wenn true, gibt useCapture an, dass der Benutzer die Erfassung initiieren möchte. Wenn die Erfassung initiiert wird, werden alle Ereignisse des angegebenen Typs an den registrierten EventListener gesendet, bevor sie an alle EventTargets darunter in der Baumstruktur gesendet werden. Ereignisse, die im Baum aufsteigen, lösen nicht den mit der Erfassung angegebenen EventListener aus.
Umfangreiche Anwendung
Kopieren Sie den Codecode wie folgt:
if (window.attachEvent)
{
//IE-Ereigniscode
}
anders
{
//Ereigniscodes für andere Browser
}
Methode drei, Ereignis = Funktion
Beispiel: obj.onclick = Foo;
Dies wird in mehreren Browsern unterstützt. Es gehört zur alten Spezifikation (Methode 2 gehört zur DOM2-Spezifikation), wird aber aufgrund seiner einfachen Verwendung in vielen Situationen verwendet.
Hier ist meine Lösung:
Kopieren Sie den Codecode wie folgt:
Funktion show(){
alarm("Hallo Welt!!!");
}
obj.setAttribute('onclick',document.all ? eval(function(){show()}) : 'javascript:show()');
Die Methode „attachEvent“ hängt andere Verarbeitungsereignisse an ein Ereignis an. (Mozilla-Serie wird nicht unterstützt)
Die Methode addEventListener wird in der Mozilla-Serie verwendet
Beispiel:
document.getElementById("btn").onclick = method1;
document.getElementById("btn").onclick = method2;
document.getElementById("btn").onclick = method3;
Wenn es so geschrieben ist, wird nur medhot3 ausgeführt
Schreiben Sie es so:
var btn1Obj = document.getElementById("btn1");
//object.attachEvent(event,function);
btn1Obj.attachEvent("onclick",method1);
btn1Obj.attachEvent("onclick",method2);
btn1Obj.attachEvent("onclick",method3);
Die Ausführungsreihenfolge ist Methode3->Methode2->Methode1
Wenn es sich um eine Mozilla-Serie handelt, wird diese Methode nicht unterstützt und Sie müssen addEventListener verwenden.
var btn1Obj = document.getElementById("btn1");
//element.addEventListener(type,listener,useCapture);
btn1Obj.addEventListener("click",method1,false);
btn1Obj.addEventListener("click",method2,false);
btn1Obj.addEventListener("click",method3,false);
Die Ausführungsreihenfolge ist Methode1->Methode2->Methode3
Anwendungsbeispiele:
1.
Kopieren Sie den Codecode wie folgt:
var el = EDITFORM_DOCUMENT.body;
// Zuerst das Objekt abrufen, EDITFORM_DOCUMENT ist eigentlich ein Iframe
if (el.addEventListener){
el.addEventListener('click', KindDisableMenu, false);
} else if (el.attachEvent){
el.attachEvent('onclick', KindDisableMenu);
}
2.
Kopieren Sie den Codecode wie folgt:
if (window.addEventListener) {
window.addEventListener('load', _uCO, false);
} else if (window.attachEvent) {
window.attachEvent('onload', _uCO);
}