gestion d’événements

Copier des données dans le clipboard en JavaScript

SoC, ,
Comment copier des données quelconques dans le clipboard en JavaScript dans le contexte d'une page Web ? Ce problème est assez simple à régler. Il suffit d'ajouter un gestionnaire de l'événement copy à l'objet document.
Le problème se complique s'il est exigé que ce gestionnaire d'événement soit anonyme et par ailleurs qu'il soit strictement éphémère, c'est-à-dire qu'il se retire de l'objet document une fois que l'événement copy est survenu, comme ce serait le cas si l'utilisateur cliquait sur un bouton "Copier" à usage ponctuel. En effet, en mode strict, il n'est plus possible d'utiliser arguments.callee pour faire référence à une fonction anonyme dans le corps de cette dernière. Par conséquent, impossible de faire référence à la fonction dans un appel à removeEventListener ().
Mise à jour du 26/12/2018 : Il est désormais possible d'utiliser l'option "once" lors de l'appel à addEventListener () (ex: addEventListener ("click", function (e) {}, { once: true })) pour ajouter un gestionnaire d'événement éphémère. Plus simple !
Continuer la lecture de "Copier des données dans le clipboard en JavaScript" →
Copier des données dans le clipboard en JavaScript

Closures pour gérer les événements en JavaScript

SoC, ,
La fonction addEventListener () permet d'associer une fonction (le gestionnaire d'événement) à un événement. Lorsque l'événement survient, le navigateur appelle le gestionnaire d'événement en lui transmettant un unique argument sous la forme d'un objet décrivant l'événement.
Comment transmettre autre chose à ce gestionnaire, comme par exemple une référence sur un objet spécifique ?

Continuer la lecture de "Closures pour gérer les événements en JavaScript" →

Closures pour gérer les événements en JavaScript

Inversion de contrôle pour gérer les événements

SoC, ,
Le développement d'une IHM (interface homme-machine) conduit très rapidement à associer un traitement à une séquence d'actions. Par exemple, attendre que l'utilisateur presse la touche "Suppr" pour initier la suppression d'un élément graphique, puis qu'il clique sur un élément graphique pour supprimer ce dernier. On parle ici d'un automate qui est dans un état d'attente de la pression de la touche "Suppr", puis dans un état d'attente d'un clique sur un élément avant de revenir à son état initial.
La solution qui vient à l'esprit est de s'appuyer sur la gestion des événements du système. Il s'agit d'associer un gestionnaire d'événement à chacun des événements qui entraîne un possible changement d'état de l'automate, et de gérer dans ce gestionnaire le changement d'état. Pour reprendre l'exemple, supposons qu'il s'agisse de permettre de supprimer un élément HTML d'identifiant "tagElement" en pressant la touche Suppr, puis en cliquant sur l'élément. Le code JavaScript est alors le suivant : 
var STATE_IDLE = 0;
var STATE_KEYPRESSED = 1;
var state;

function run () {
	document.body.addEventListener ("keypress", handlerKeyPress, false);
	document.getElementById ("tagElement").addEventListener ("click", handlerMouseClick, false);
	state = STATE_IDLE;
}

function handlerKeyPress (e) {
	switch (state) {
		case STATE_IDLE :
			if (e.key != "Delete")
				break;
			state = STATE_KEYPRESSED;
			document.getElementById ("tagElement").innerHTML = "Cliquez-moi maintenant";
			break;
	}
}

function handlerMouseClick (e) {
	switch (state) {
		case STATE_KEYPRESSED :
			document.getElementById ("tagElement").innerHTML = "Vous m'avez supprimé ! (pressez Suppr pour recommencer)";
			state = STATE_IDLE;
			break;
	}
}
Cliquez ici pour accéder à une page de test minimaliste. Vous pourrez visualiser le code et le récupérer pour travailler avec.
Le problème est que le code de l'automate est réparti dans les deux gestionnaires d'événement impliqués. En soi, c'est déjà compliqué. Ça le devient encore plus tandis que l'IHM s'enrichit et que les automates de ce type se multiplient et se complexifient. N'est-il pas possible de regrouper le code d'un automate dans une seule fonction spécifique ?

Continuer la lecture de "Inversion de contrôle pour gérer les événements" →

Inversion de contrôle pour gérer les événements