Javascript - La gestion des événements

Evénements

L’utilisateur devra pouvoir intéragir avec le composant, pour ce faire le composant devra implémenter des méthodes répondant aux événements. Différentes méthodes peuvent associer un événement sur un objet.

1- Evénement dans le tag HTML : Cette methode a comme inconvéniant de mélanger le comportement javascript au HTML ce qu’il faut éviter au maximum (code intrusif).

<div onclick= "functiontraitement">   

2- Evénement directement lié à l’objet.

document.getElementById(‘monObjet’).onclick=functiontraitement;

3- Accéder au gestionnaire d’évenements Ajouter un événement sur un élément (DOM W3C)

element.addEventListener('click',gereClick,true)

Retirer un événement sur un élément (DOM W3C)

element.removeEventListener('click', gereClick,true)

Ajouter un événement sur un élément (DOM Microsoft)

element.attachEvent('onclick', gereClick)

Retirer un événement sur un élément (DOM Microsoft)

element.detachEvent('onclick', gereClick)

Il existe donc plusieurs méthodes pour brancher un traitement javascript à un évènement. Le principal avantage des méthodes utilisant le gestionnaire d’évènements est de pouvoir ajouter plusieur traitements (fonctions) déclenchés par un même événement sur un même objet.

De plus ces méthodes dites DOM et DOM version Microsoft ont l’avantage d’être non-intrusives et donc préférables. Cependant il est nécessaire de tester le navigateur du client , de dédoubler le code (1pour IE, 1 pour les autres) afin que celui-ci soit compréhensif pour tous. C’est pourquoi il est préférable d’utilisé une fonction qui encapsule le traitement multi-navigateur.

function addEvent(obj, evType, fn) {
	if (obj.addEventListener){				//Mozilla – firefox ….
		obj.addEventListener(evType, fn, true);
		return true;
	} 
	else if (obj.attachEvent){				//IE
		var r = obj.attachEvent("on"+evType, fn);
		return r;
	} 
	else {
		return false;					//branchement impossible
	}
}

Intégration du gestionnaire d’évenements aux composants javascript

Nous avons vu précédemment que le mot clé this dans la fonction constructrice d’objet représente l’objet lui-même ainsi on a :

function Obj(name, idcontainer) {
	this.name=name
	this.container = document.getElementById(idcontainer);
	this.container.innerHTML="test";
	this.alertName = function () {
		alert( this.name);
	}
}

et le code appelant :

myobj=new Obj('objName',"divID");
myobj. alertName();

Le résultat est la création d’un objet de type Obj , puis affichage d’une boite à message Alert "objName".
Essayons de modifier le code pour intégrer l’événement ‘click’.

function obj(name, idcontainer) {
	this.name=name
	this.container = document.getElementById(idcontainer);
	this.container.innerHTML="test";
	this.alertName = function () {
		alert( this.name);
	}
	this.eventclickhandler = function(e) {
		alert (this.name);				BUG!!!!
	}
	addEvent(this.container,"click",this. eventclickhandler) ;
}

En effet, le gestionnaire d’événements n’est jamais intégré à l’objet, et donc le mot clé this ne symbolise pas notre objet Obj. Pour IE il symbolise la fonction et pour Mozilla il symbolise l’objet div qui a subit le clique.

Solution : Déclarer une variable recueillant notre objet en diminuant la portée à l’intérieur de notre fonction constructrice.

function obj(name, idcontainer) {
	this.name=name
	this.container = document.getElementById(idcontainer);
	this.container.innerHTML="test";
	this.alertName = function () {
		alert( this.name);
	}
	this.eventclickhandler = function(e) {
		alert (this4Event.name);				SOLUTION!!!
	}
	addEvent(this.container,"click",this. eventclickhandler) ;
	var this4Event =this;						SOLUTION!!!
}

Explications :
La variable this4Event est déclarée dans le corps de la fonction donc elle est accessible de n’importe où. Elle permet ainsi de relier efficacement l’évènement au composant et pas seulement à l’objet graphique recevant le clic (en l’occurrence le div). Cette méthode d’implémentation est la plus efficace et non-intusive, elle est vivement conseillée.