Ajouter 'addeventlistener' sur internet explorer

Soyez le premier à donner votre avis sur cette source.

Snippet vu 7 080 fois - Téléchargée 16 fois


Contenu du snippet

Voici une manière d'ajouter la fonction addEventListener sur Internet Explorer (testé sur la version 7) sans modifier Object.prototype .
addEventListener est une fonction décrite dans le DOM Level 2 et qui n'est pas encore prise en charge par IE.
La technique est d'overrider les fonctions getElementById, getElementByName, getElementsByTagName.
On stock l'ancienne méthode dans une variable (ex. : oldGetElementById)
et on appelle l'ancienne méthode à l'interieur du corps de la nouvelle, on modifie le ou les objets récupéré(s) , en ajoutant addEventListener et on retourne ces même objets.
- l'utilisateur (le coder) n'y a vu que du feu :)
- on ne modifie pas Object.prototype.
- on ne reecrit pas "vraiment" les fonctions puisqu'on les appelle de toute façons :)

Source / Exemple :


//ce code est utile uniquement sur IE,donc
    //on vérifie qu'on est bien sur IE.
    var using_ie = typeof(ActiveXObject)!="undefined";
    if(using_ie)
    {
        //sauvegarde des ancienne méthodes.
        var oldGetElementById = document.getElementById;
        var oldGetElementsByName = document.getElementsByName;
        var oldGetElementsByTagName = document.getElementsByTagName;
        
        //override 
        document.getElementById = function(id)
        {
            //appel de l'ancienne méthode pour récupérer l'élement.
            var obj = oldGetElementById(id);
            //ajout des fonctions
            obj.addEventListener = addEventListener;
            obj.executeEvents = executeEvents;
            return obj;
        }
        //comme getElementById mais avec une boucle qui 
        //parcourt chacun des éléments.
        document.getElementsByTagName = function(tag)
        {
            var obj = oldGetElementsByTagName(tag);
            for(obj_i=0;obj_i<obj.length;obj_i++)
            {
                obj[obj_i].addEventListener = addEventListener;
                obj[obj_i].executeEvents = executeEvents;
            }
            return obj;
        }
        //identique à getElementsByTagName.
        document.getElementsByName = function(name)
        {
            var obj = oldGetElementsByName(name);
            for(obj_i=0;obj_i<obj.length;obj_i++)
            {
                obj[obj_i].addEventListener = addEventListener;
                obj[obj_i].executeEvents = executeEvents;
            }
            return obj;
        }
        
        //Ajoute l'évenement dans un Array.
        var addEventListener = function(eventName,callback,b)
        {
            //on donne un nom a l'array qui contiendra les callbacks.
            //chaque évenement possede un Array différent.
            var eventArrayName = "ieEventList_"+eventName;
            //Si l'array est inexistant on le crée et on
            //lui indique comment executer les fonctions.
            if(typeof(this[eventArrayName])=="undefined")
            {
                var me = this;
                this[eventArrayName] = new Array();
                this["on"+eventName] = function()
                {
                    me.executeEvents(eventName);
                }
            }
            //ajoute la fonction.
            this[eventArrayName].push(callback);
        }
        
        //execute la liste de fonctions se trouvant dans
        //l'Array attribué à un évenement.
        var executeEvents = function(eventName)
        {
            var eventArrayName = "ieEventList_"+eventName;
            if(typeof(this[eventArrayName])=="undefined")
                return;//au cas ou..
            //éxecution de chaque évenement.
            for(eventIndex=0;eventIndex<
                this[eventArrayName].length;eventIndex++)
            {
                this[eventArrayName][eventIndex]();
            }
        }
    }

Conclusion :


hehe

A voir également

Ajouter un commentaire

Commentaires

hdescure
Messages postés
1
Date d'inscription
lundi 1 février 2010
Statut
Membre
Dernière intervention
12 mai 2010

pas mal et très pratique pour les codeurs DOM,
juste 4 petites corrections

1 - Surcharger document.createElement()

var oldCreateElement=document.createElement;
//override

document.createElement= function(type)
{
//appel de l'ancienne méthode pour récupérer l'élement.
var obj = oldCreateElement(type)
//ajout des fonctions
obj.addEventListener = addEventListener;
obj.executeEvents = executeEvents;
return obj;
}

2 - modifier l'appel des callback car avec this[eventArrayName][eventIndex]() on perd la référence à this dans la fonction de callback : il faut écrire

//this[eventArrayName][eventIndex]();
this.tempEventFunction=this[eventArrayName][eventIndex];
this.tempEventFunction()

3 - Surcharger directement document.addEventListener car par mal de codes font le test sur la définition de addEventListener donc dans les dernières lignes du if il faut ajouter
document.addEventListener=addEventListener;
window.addEventListener=addEventListener;
document.executeEvents = executeEvents;
window.executeEvents = executeEvents;

4 - un petit changement cosmétique non nécessaire pour éviter surcharger plusieurs fois le tout, modif de la condition du if
if(using_ie && !(document.addEventListener))
cs_depression
Messages postés
100
Date d'inscription
mardi 7 novembre 2000
Statut
Membre
Dernière intervention
13 juillet 2009

"y a pas que des utilisateurs de firefox faut penser aussi au utilisateur IE même si IE est en retard sur le dom"

Les utilisateurs d'IE, j'y pense, et puis j'oublie.

Bon, Firefox est connu. Les internautes font leurs choix, moi aussi.

Et c'est vrai qu'il n'y a pas que Firefox, il y a aussi Opera.
djmmix
Messages postés
152
Date d'inscription
lundi 28 juillet 2003
Statut
Membre
Dernière intervention
29 avril 2009

depression: y a pas que des utilisateurs de firefox faut penser aussi au utilisateur IE même si IE est en retard sur le dom ...

très bonne source :)

car le but c'est de rendre un site toujours compatible a tout navigateur
the_wwt
Messages postés
177
Date d'inscription
jeudi 5 octobre 2006
Statut
Membre
Dernière intervention
16 janvier 2009
1
Source élégante!
Pur s'abstenir de tester l'extraordinaire multitude de machines virtuelles javascript, il existe prototype: mature, élégant, plébisciter par tout le monde ( même google qui le propose en version compressé ).

Juste pour dire que la remarque de coucou47 n'est pas à suivre ( changer l'itération par compteur avec le for (.. in ..)).
Si tu fais ce genre d'itération, tu vas tomber sur des propriétés ajoutées par l'utilisateur exemple:
var o = [1,2,3,4];
o.maFonction = function(){ alert("bonjour");}
for( var p in o ){
alert(p + "=" + o[p]);
}
>Affiche:
1,2,3,4 et "function(){ alert("bonjour");}"

Alors quefor(var i 0, length o.length; i < length; i++){
alert(i + "=" + o[i]);
}
>Affiche:
1,2,3,4

Donc à éviter.
Cordialement,
Pierrick
cs_bultez
Messages postés
13619
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
30
xtremduke++ pour l'ensemble de ses réponses

attachEvent ou addEventListener
dans ta "fonction générale" et c'est tout.
en 3 lignes quoi.
et rien à tester, à faire... pour les utilisateurs

je ne vais pas paul et mickey sur ces stupidités
de soit disant normes !
ce ne sont que des recommandations ( avec 20 ans
de retard sur l'existant pour ne critiquer que cet aspect ),
ni des normes ni des standards... et chaque constructeur
n'en respecte que ce qui l'arrange ( les cas des navigateurs
n'est presque qu' anecdotique dans ces recommandations )
( certes aujourd'hui il parait que c'est IE qui les
respecte le moins )

et je m'arrête ici aussi....

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.