Parfois, il est nécessaire de charger dynamiquement certaines méthodes d'événements javascript
Nous devons souvent ajouter dynamiquement des événements dans JS, ce qui implique des problèmes de compatibilité du navigateur. Nous utilisons souvent un mélange des différentes méthodes décrites ci-dessous.
Méthode 1, setAttribute
var obj = document.getElementById("obj");
obj.setAttribute("onclick", "javascript:alert('test');");
Ici, setAttribute est utilisé pour spécifier l'attribut onclick, qui est simple et facile à comprendre.
Cependant : IE ne le prend pas en charge . Ce n'est pas qu'IE ne prend pas en charge la fonction setAttribute, mais il ne prend pas en charge l'utilisation de setAttribute pour définir certains attributs, notamment les attributs d'objet, les attributs de collection et les attributs d'événement. définir le style, onclick et onmouseover Cela ne fonctionne pas dans IE.
Méthode 2, utilisez attachEvent et addEventListener
IE prend en charge attachEvent
obj.attachEvent("onclick", Foo);
fonctionFoo()
{
alerte("Test");
}
Peut également être écrit ensemble
obj.attachEvent("onclick", function(){alert("test");});
D'autres navigateurs prennent en charge addEventListener
obj.addEventListener("clic", Foo, false);
fonctionFoo()
{
alerte("Test");
}
On peut aussi l'écrire ensemble
obj.addEventListener("click", function(){alert("Test");}, false);
Notez que l'événement attachEvent est activé, comme onclick, mais que addEventListener n'en a pas, comme click.
À propos, le troisième paramètre de addEventListener (bien que rarement utilisé) useCapture - s'il est vrai, useCapture indique que l'utilisateur souhaite lancer la capture. Lorsque la capture est lancée, tous les événements du type spécifié seront distribués au EventListener enregistré avant d'être distribués à n'importe quel EventTargets situé en dessous de lui dans l'arborescence. Les événements qui remontent dans l'arborescence ne déclencheront pas le EventListener spécifié à l'aide de la capture.
Application complète
Copiez le code comme suit :
si (window.attachEvent)
{
//Code d'événement IE
}
autre
{
//Codes d'événements pour les autres navigateurs
}
Troisième méthode, événement = fonction
Exemple : obj.onclick = Foo ;
Ceci est pris en charge dans plusieurs navigateurs. Il appartient à l'ancienne spécification (la méthode 2 appartient à la spécification DOM2), mais comme elle est facile à utiliser, elle est utilisée dans de nombreuses situations.
Voici ma solution :
Copiez le code comme suit :
fonction show(){
alert("Bonjour tout le monde !!!");
}
obj.setAttribute('onclick',document.all ? eval(function(){show()}) : 'javascript:show()');
La méthode attachEvent attache d'autres événements de traitement à un événement. (Série Mozilla non prise en charge)
La méthode addEventListener est utilisée dans la série Mozilla
Exemple:
document.getElementById("btn").onclick = method1;
document.getElementById("btn").onclick = method2;
document.getElementById("btn").onclick = method3;
Si écrit comme ceci, alors seul medhot3 sera exécuté
Écrivez-le comme ceci :
var btn1Obj = document.getElementById("btn1");
//objet.attachEvent(événement,fonction);
btn1Obj.attachEvent("onclick",method1);
btn1Obj.attachEvent("onclick",method2);
btn1Obj.attachEvent("onclick",method3);
L'ordre d'exécution est méthode3->méthode2->méthode1
S'il s'agit d'une série Mozilla, cette méthode n'est pas prise en charge et vous devez utiliser addEventListener.
var btn1Obj = document.getElementById("btn1");
//element.addEventListener(type,écouteur,useCapture);
btn1Obj.addEventListener("clic",method1,false);
btn1Obj.addEventListener("clic",method2,false);
btn1Obj.addEventListener("clic",method3,false);
L'ordre d'exécution est méthode1->méthode2->méthode3
Exemples d'utilisation :
1.
Copiez le code comme suit :
var el = EDITFORM_DOCUMENT.body;
//Récupérez d'abord l'objet, EDITFORM_DOCUMENT est en fait une iframe
si (el.addEventListener){
el.addEventListener('click', KindDisableMenu, false);
} sinon si (el.attachEvent){
el.attachEvent('onclick', KindDisableMenu);
}
2.
Copiez le code comme suit :
si (window.addEventListener) {
window.addEventListener('load', _uCO, false);
} sinon si (window.attachEvent) {
window.attachEvent('onload', _uCO);
}