[Tuto] La gestion des événements en JavaScript

Actualité par (Intégrateur du Dimanche, Strasbourg)
Créé le , mis à jour le (14488 lectures)
Tags : alsacréations

Julien Royer vient de nous concocter une introduction rapide aux notions nécessaires pour bien comprendre et bien utiliser les événements en JavaScript.

La gestion des événements en JavaScript est un tutoriel d'approche qui aborde les notions suivantes : l'objet Event, le flux d'événement et les gestionnaires d'événement.

Merci Julien et bonne lecture à tous !

Commentaires

Hells_Dark a dit le

Merci beaucoup.
Je redecouvre Javascript ces derniers temps.

jblanche a dit le

Excellent tuto,
toutefois je n'écris plus ce genre de code depuis quelque temps tellement Prototype simplifie la gestion de ces évènements ;)

QuentinC a dit le

Très bien expliqué et commenté. Un tuto de qualité en plus sur alsa, un !

J'ai toutefois repéré une petite coquille...
« ... car elle va à l'encontre de la sépararation du comportement et de la structure. » dans la partie sur les évènements définis dans le code XHTML.

Il existe une parade très simple pour ne pas écraser des évènements successifs attribués avec le modèle DOM0. Ce code est déjà apparu plusieurs fois sur le forum en plusieurs variantes, mais je le remets ici à toutes fins utiles :

el : élément cible
type : type d'évènement, avec le préfixe on et en minuscules. Ex : onsubmit
func : fonction à attribuer

function addDOM0Event (el, type, func) {
if (el[type]) {
var oldfunc = el[type];
el[type] = function () {
oldfunc();
func();
}
}
else el[type]=func;
}Très bien expliqué et commenté. Un tuto de qualité en plus sur alsa, un !

QuentinC a dit le

Hé mais... pourquoi il apparaît en double ?
Merci aux modérateurs de bien vouloir éditer le commentaire précédent.

Julien a dit le

Merci pour ces compliments. :-)

@jblanche : A mon avis, même si l'on utilise une bibliothèque, il n'est pas inutile de comprendre comment elle abstrait les différences de comportements des navigateurs (voir "The Law of Leaky Abstractions" (en) : www.joelonsoftware.com/ar... ).

@Quentin : La phrase que tu cites concerne bien les gestionnaires d'événement dans le code XHTML (c'est-à-dire les attributs XHTML onclick, onsubmit, ...), et non pas les attributs JavaScript correspondants. Je pense qu'il est donc bien approprié de parler de problème dans la séparation du comportement et de la structure dans ce cas précis.

C'est vrai que la solution que tu évoques est parfois utile, elle est d'ailleurs évoquée dans les tutoriels "Comment bien coder en Javascript ?" et "JavaScript : organiser son code en modules".

Pour ce qui est de ton commentaire en double, j'ai passé le mot à Raphaël. :-)

Morgan Capron a dit le

Article très intéressant, si vous pouviez en plus rajouter des exemples concrets se serait parfait.

Julien a dit le

@Morgan : C'est vrai que le principal défaut de ce tuto à mon avis est d'être trop théorique.

Mais bon, il ne s'agit que d'une introduction. Pour quelque chose de plus complet, il faudrait regarder par exemple chez PPK (QuirksMode, voir les liens en fin de tuto), en anglais par contre.