Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum. Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !

AJOUTER 'ADDEVENTLISTENER' SUR INTERNET EXPLORER


Information sur la source

Description

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

  • //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]();
  • }
  • }
  • }
    //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
 

Commentaires et avis

signaler à un administrateur
Commentaire de XtremDuke le 11/09/2008 17:15:14

Ca ne serait pas plus simple d'utiliser attachEvent() ?

signaler à un administrateur
Commentaire de depression le 11/09/2008 17:50:35 9/10

addEventListener n'est pas dans IE7?

Les branquignoles...

Bon, tu as fais une bonne source, c'est une bonne idée, même si je pense que ce n'était pas à toi de faire ce travail, mais aux développeurs du navigateur IE.

Pour ma part, j'utilise Event.Observe() du framework Prototype, et je suis moins embêté par les caprices d'IE, même si j'ai tendance à me moquer du rendu pour mon site perso sur ce navigateur comme de ma première gastro. Je mets juste une note sur le site comme quoi IE est (franchement) obsolète, et qu'il ne faut pas s'étonner si le rendu est minable.

Quoi qu'il en soit, bon boulot!

signaler à un administrateur
Commentaire de XtremDuke le 11/09/2008 18:01:49

"et qu'il ne faut pas s'étonner si le rendu est minable."

Un site correctement développé a le même rendu sous IE que sous les autres navigateurs.

signaler à un administrateur
Commentaire de li9 le 11/09/2008 18:12:51

Hello!
Merci pour vos commentaires  :)
Alors , XtremDuke, le bute de cette source est justement d'éviter attachEvent(). parce que vérifier partout dans le code si on est sur IE ou FF ou autre c est plutot agaçant :p .Et en plus on respecte les normes.
Depression : ton pseudo est flippant lol.
Je suis d accord, ça n'ets pas mon job de faire ca,
mais si on doit attendre que IE respecte le DOM, on aura encore des if(ie) ... dans 10 ans :)
Ce sont des branquignoles je suis d'ac. ^^

Vous trouvez pas ça sympa de faire directement :
var obj = document.getElementById("bla");
obj.addEventListener("keydown",function(){},true);
peut importe le navigateur ?

En tout cas merci encore pour vos commentaires!

++

signaler à un administrateur
Commentaire de depression le 11/09/2008 18:37:41

"Un site correctement développé a le même rendu sous IE que sous les autres navigateurs."

@XTREMDUKE:

Certainement pas! Il faut d'abord dev le code correctement, aux normes du W3C, puis, perdre du temps à l'adapter pour IE...

signaler à un administrateur
Commentaire de XtremDuke le 11/09/2008 21:34:02

Mdr ok je vai m'arreter là...

signaler à un administrateur
Commentaire de coucou747 le 12/09/2008 09:11:36 9/10

:) sympa comme source

juste une petite remarque :
for(eventIndex=0;eventIndex<this[eventArrayName].length;eventIndex++)
=>
for(eventIndex in this[eventArrayName])

signaler à un administrateur
Commentaire de bultez le 12/09/2008 13:01:02


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....

signaler à un administrateur
Commentaire de the_wwt le 12/09/2008 13:15:33 7/10

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 que
for(var i = 0, length = o.length; i < length; i++){
   alert(i + "=" + o[i]);
}
==>Affiche:
1,2,3,4

Donc à éviter.
Cordialement,
Pierrick

signaler à un administrateur
Commentaire de djmmix le 13/09/2008 12:05:03 10/10

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

signaler à un administrateur
Commentaire de depression le 13/09/2008 18:15:54

"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.

Ajouter un commentaire

Discussions en rapport avec ce code source dans le forum

Evenement onmouseout et Firefox [ par fenzy75 ] Bonjour ,j'ai un probleme avec un menu deroulant.Mon menu marche tres bien sur MIE mais sous Firefox il semblerai que l'evenement onmouseout ne soit p Detection du navigateur qui différencie FIREFOX et NETSCAPE [ par barth707 ] Bonjour,Je cherche depuis un moment d&#233;j&#224; une detection en javascript qui me permet de faire la diff&#233;rence entre Firefox et Netscape.Si window.location et firefox [ par 8livier ] bonjour,un petit probleme avec firefox....window.location=formulaire.commune.options[formulaire.commune.selectedIndex].value;ne fonctionne pas....Que menu deroulant sous FIREFOX [ par stopworries ] Salut tout le monde,J'ai un menu horizontal sur ma page en css et js qui fonctionne tres bien, seulement sous IE. Sous firefox, le menu se decale vers Evenement "Retour Arriere". [ par Coup2vent ] Bonjour,Etant novice, je m'adresse a ce forum en esperant avoir une reponse de votre part.Mon probl&#232;me est le suivant:J'ai une page avec un bouto saveas sous FireFox [ par crashtest ] Bonjour,alors c'est simple je voudrais faire pareil que le saveas de IE mais sous FireFox voila @++ et merci pour vos r&#233;ponse.Mes sitewebs (fonct detecter Firefox (et non netscape) [ par Breskovic ] Bonjour, mon site pose un probl&#232;me s&#233;rieux avec Netscape (PC/Mac), et seulement Netscape. Je ne peux donc pas laisser un utilisateur Netsca Comment mettre Date et Heure valide pour IE, Nescape, Firefox [ par JLB59 ] Bonjour tout le monde, J'ai fait un site que j'ai mis en ligne. Comme j'utilisais IE en local pour voir le r&#233;sultat, je n'ai eu aucun prb. J'ai URGENT !! Probleme sur l'evenement Onchange sur un objet Input type Text [ par jolazoule ] Bonjour,je d&#233;veloppe actuellement un panier pour un site marchand. Sur la page recapitulative il y le nom du produit puis une TextBox &lt;input t utilisation de document.location.reload sous firefox [ par josymarc ] Bonjour,Apr&#232;s avoir cherch&#233; partout une r&#233;ponse, je fais une derni&#232;re tentative. Dans mon portail, j'ai une page qui permet de cho


Nos sponsors

Sondage...

CalendriCode

Janvier 2009
LMMJVSD
   1234
567891011
12131415161718
19202122232425
262728293031 

Consulter la suite du CalendriCode

Téléchargements

Logiciels à télécharger sur le même thème :



Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel BAÏSE, Merci à Vincent pour ses précieux conseils
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés
Temps d'éxécution de la page : 0,406 sec

Google Coop CodeS-SourceS Google Coop CodeS-SourceS


Certaines images présentes sur le site (notament certains avatars) sont issues des collections IconShock, donc si vous souhaitez utiliser ces icons vous devez les acheter, ne les copiez pas et ne utilisez pas dans vos sites et applications sans les avoir commandé.