Associer un événement

Dernière mise à jour le par @karamel .

Redéfinir le D.O.M

Objectif

Régularisé le JS

Le JavaScript ne s'implémente pas forcement de la même façon d'un navigateur à l'autre. De plus il est parfois compliqué de charger une bibliothèque jQuery (le projet est arrivé à un stade trop avancé, La structure maîtresse de la page (l'intégration de base) ne vous est pas accessible etc.)

Redéfinir l'affectation des événements

Il n'est pas conseillé d'assigner une fonction à un événement. En effet si vous souhaiter plus loin affecter un nouvel événement vous allez sans aucun doute écraser l'ancien. Ainsi un bon développeur JS s'évertuera à attacher l'évènement plus tôt que de l'assigner.

Affecter l'événement "Click" par le prototype

Attention, cette méthode n'est pas valide pour IE7 et inférieur

Bien qu'il s'agisse de l'événement click, nous n'allons pas l'appeler "click" mais "_click" pour ne pas interférer avec la méthode du même nom disponible sur FF ou via jQuery.

Le prototype

Pour créer une fonction sur un objet quelque qui soit en JavaScript après son implémentation, il faut utiliser le mot clef prototype. Comme nous voulons ajouter cette fonction à tous nos éléments, nous allons utiliser l'objet HTMLElement

Nous obtenons donc la déclaration suivante :

HTMLElement.prototype._click=function(){} ;

attachEvent, addEventListener

Le but de notre exercice est d'associer une fonction à un événement. La méthode adéquate est addEventListener. Cependant, cette fonction n'est pas valide pour Interner Explorer. Comme on ne peut dire un utilisateur « désolé, vous n'avez pas le bon navigateur allez-vous en trouvez un autre », on doit trouver une solution alternative à ce problème.

JavaScript nous donne la possibilité de tester si un objet possède une fonction ou non. Ainsi si notre élément n'a pas la fonction addEventListener, nous utiliserons sa soeur jumelle attachEvent.

Nous obtenons donc le code suivant :

HTMLElement.prototype._click = function(fn){//ici "fn" représentera notre fonction à affecter
if(this.addEventListener) { //si l'élément possede la méthode addEventListener
this.addEventListener("click",fn,false) ;
    }
else{    //sinon utiliser la méthode attachEvent
this.attachEvent("onclick",fn) ;
    }
}

Associer l'événement click via un "EventObserver"

Une autre méthode un peu plus universelle est d`utiliser un EventObserver.

L'idée est de créer un objet qui possèdera une méthode "addEvent" qui associera comme il faut la fonction à l'événement.

//1. Créer le nameSpace

Var EventObserver={ } ;

//2 créer la fonction addEvent

EventObserver.addEvent=function(element, evt, fn){
//  element   = élément sur lequel l'évènement sera associée
//  evt   =>nom de l'événement ("click", "mouseover","mouseup "...etc).
// fn    => la fonction à associer 
if(element.addEventListener){ //si l'élément possede la méthode addEventListener  
element.addEventListener(evt,fn,false) ;}
else {     //sinon utiliser  attachEvent
 element.attachEvent("on"+evt,fn) ;   }}

Adresse d'origine

Ce document intitulé « Associer un événement » issu de CodeS SourceS (codes-sources.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.
Redéfinir les types
la poo en javascript par un exemple pratique et visuel
Rejoignez-nous