Choix de la langue :

• 
• 
• 

Menu Principal

• 
• 
• 
• 
• 

Ligams » Publications » Javascript » Evénement javascript : addEventListener, attachEvent

Evénement javascript : addEventListener, attachEvent

Gérer les événements en Javascript n'est pas forcément simple : Javascript étant éxécuté côté client, les différents clients l'interprètent à leur manière. Aussi, il faut harmoniser la gestion des événements si l'on souhaite obtenir les mêmes comportements sur tous les navigateurs.

En attendant HTML 5, ou l'on espère fortement une harmonisation de l'interprétation de Javascript, on peut se rabattre sur certains palliatifs :

• l'utilisation d'un framework (tel que JQuery, Mootools ou Yahoo! ...) qui sont tous très bien après un peu de pratique, mais qui ont le désavantage non négligeable d'alourdir considérablement la page (de 60ko à 200ko) souvent pour une petite utilisation.
• Créer des fonctions personnelles pour éviter justement, l'utilisation d'un framework.

Cet exemple permet de gérer les événements sur un élément du DOM, sans avoir à importer de Framework.

Création de la fonction addEvent Javascript

//création d'un espace de nom utils
var Utils = [];
//création d'un espace de nom pour les événements
var Utils.Event = [];
//
Utils.Events.addEvent = function(elem,_type,_delegate)
{
    if(elem)
    {
        if (elem.attachEvent)
        {
            elem.attachEvent ("on"+_type,_delegate);
        } 
        else if (elem.addEventListener) 
        {
            elem.addEventListener (_type,_delegate,false);
        } 
        else
        {
            elem["on"+_type] = _delegate;
        }
    }
}

Cette fonction permet donc d'attacher un événement à un élément du DOM.

Exemple d'utilisation :

Utils.Events.addEvent(document.body,"load",hello);

function hello(e)
{
  alert("salut");
}

Supprimer l'événement avec removeEvent

De la même manière, on peut créer la méthode removeEvent(), qui fait appel à removeEventListener et detachEvent :

Utils.Events.removeEvent = function(elem,_type,_delegate)
{
    if(elem)
    {
        if (elem.detachEvent)
        {
            elem.detachEvent ("on"+_type,_delegate);
        } 
        else if (elem.removeEventListener) 
        {
            elem.removeEventListener (_type,_delegate,false);
        } 
        else
        {
            elem["on"+_type] = null;
        }
    }
}

et supprimer l'événement que l'on a ajouté :

Utils.Events.removeEvent(document.body,"load",hello);

Ce type d'utilitaire est particulièrement utile si comme moi, vous aimez externaliser vos scripts, notamment en POO avec l'utilisation de classes Javascript.

Un problème se pose néanmoins lors de la récupération du sender sous Internet Explorer, que nous aborderons dans un prochain article.

Commentaires

Les commentaires sont tous validés par un modérateur, votre commentaire n'apparaît pas directement sur le site.
Aucun support n'est assuré ici, vous pouvez néanmoins laisser vos remarques et critiques sur l'article, les points de vue pertinents sont toujours les bienvenus.