CodeS-SourceS
Rechercher un code, un tuto, une réponse

Associer un événement

Juin 2017

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

A voir également

Publié par CecilCordheley.
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.
Ajouter un commentaire

Commentaires

Donnez votre avis
Redéfinir les types
la poo en javascript par un exemple pratique et visuel